阅读 178

ES6:箭头函数(胖函数)

这是我参与更文挑战的第11天

之前在看Vue2.0的时候,就被很多的箭头函数困扰,一直不知道是怎么回事,虽然箭头函数四个字在我耳边一直转圈,是时候去记录一下啦。

1.ES5中函数的声明方式

console.log(sum(4,5)) // 9

function sum(x,y){
    return x + y
}


let sum = function(x,y){
    return x + y
}
console.log(sum(4,5)) // 9
复制代码

代码备注:对于上面的两种方式,主要区别在于let关键字声明函数的时候,不存在变量提升的问题。

2.ES6中的箭头函数

主要就是把function去掉,在参数和函数体之间用箭头分割

let sum = (x,y) => {
    return x+y
}
console.log(sum(3,4)) // 7
复制代码

对于函数体只有一行代码的时候,上面代码可以简化为以下代码

let sum = (x,y) => x + y
复制代码

对于返回值,可以省略return关键字并用圆括号扩起来

function addStr(str1,str2){
    return str1+str2
}

const addStr = (str1,str2) => (str1+str2)
// 以上两个函数功能是一样的,只是箭头函数在箭头右侧,省略了关键字return,并且在外面添加圆括号
复制代码

3.箭头函数和普通函数之间的区别

1.this指向定义时所属的对象,而不是调用时所属的对象(箭头函数中没有this,this指向的是父级的this)

<html>
  <body>
    <button id="btn">点我</button>
    <script>
      let oBtn = document.querySelector("#btn")
        oBtn.addEventListener("click",function(){
            console.log(this) // <button id="btn">点我</button>
        })
    </script>
  </body>
</html>
复制代码
<html>
  <body>
    <button id="btn">点我</button>
    <script>
      let oBtn = document.querySelector("#btn")
      oBtn.addEventListener("click",function(){
            setTimeout(function(){
                // call apply bind改变this指向                 
               console.log(this) // Window
            },1000)
            
      })
	</script>
  </body>
</html>
复制代码

通过bind改变this指向

<html>
  <body>
    <button id="btn">点我</button>
    <script>
      let oBtn = document.querySelector("#btn")
      oBtn.addEventListener("click",function(){
            setTimeout(function(){
                console.log(this) // <button id="btn">点我</button>
            }.bind(this),1000)
        })
</script>
  </body>
</html>
复制代码

箭头函数中的this指向

<html>
  <body>
    <button id="btn">点我</button>
    <script>
      let oBtn = document.querySelector("#btn")
      oBtn.addEventListener("click",function(){
            setTimeout(() => { // **箭头函数中没有this**,this指向的是父级的this
                console.log(this) // <button id="btn">点我</button>
            },1000)
        })
</script>
  </body>
</html>
复制代码

2.不可以作为构造函数

function People(name,age){
    console.log(this) // People{}
    this.name = name
    this.age = age
}

let p1 = People("lilei",34)
console.log(p1) // People{name:"lilei",age:34}
let People = (name,age) => {
    this.name = name
    this.age = age
}

let p1 = People("lilei",34)
console.log(p1) // 报错 People is not a constrator
复制代码

3.不可以使用arguments对象

let foo = function(){
    console.log(arguments)
}
console.log(foo(1,2,3)) // Arguments[1,2,3]

let foo = () => {
    console.log(arguments)
}
console.log(foo(1,2,3)) // Arguments is not defined
复制代码

箭头函数兼容类似ES5中arguments对象:通过rest参数

let foo = (...args) => {
    console.log(args)
}
console.log(foo(1,2,3)) // [1,2,3]
复制代码
文章分类
前端
文章标签