JavaScript箭头函数的使用

箭头函数arrowfunction

◼ 箭头函数是ES6之后增加的一种编写函数的方法,并且它比函数表达式要更加简洁:
箭头函数不会绑定this、arguments属性;
箭头函数不能作为构造函数来使用(不能和new一起来使用,会抛出错误);
◼ 箭头函数如何编写呢?
(): 函数的参数
{}: 函数的执行体
num.forEach((item,index,arr)=>{})

  ```JavaScript
    // 箭头函数完整写法
    var foo3 = (name,age)=>{
      console.log("箭头函数的函数体")
      console.log(name,age)
    }
  ```

箭头函数的编写优化

◼ 优化一: 如果只有一个参数()可以省略
// 优化一 如果箭头函数只有一个参数箭头函数小括号可以省略

            names.forEach(item=>{
              console.log(item)
            })
            // 拿到nums所有的偶数
            var newNums = nums.filter(item=>{
              return item%2 === 0
             })
  ◼ 优化二: 如果函数执行体中只有一行代码, 那么可以省略大括号
      并且这行代码的返回值会作为整个函数的返回值
          names.forEach(item=>console.log(item))
          var newNums = nums.filter(item => item % 2 === 0)
  ◼ 优化三: 如果函数执行体只有返回一个对象, 那么需要给这个对象加上()
    var arrFun = () => ({name:"acb",age:19})
         console.log(arrFun())

ES6箭头函数this使用

◼ 之前的代码在ES6之前是我们最常用的方式,从ES6开始,我们会使用箭头函数:
为什么在setTimeout的回调函数中可以直接使用this呢?
因为箭头函数并不绑定this对象,那么this引用就会从上层作用域中找到对应的this

          var obj = {
            name:"obj",
            foo:()=>{
              var bar = ()=>{
                console.log(("bar",this))//指向window
              }
              return bar
            }
          }
          var fn = obj.foo()
          var obj = {
            name:"obj",
            foo:function(){
              var bar = ()=>{
                console.log(("bar",this))//指向obj
              }
              return bar
            }
          }
           var fn = obj.foo()
posted @ 2024-10-20 00:37  韩德才  阅读(9)  评论(0编辑  收藏  举报