1-7 箭头函数

我们一起来学一下ES6 里面很重要的概念叫做箭头函数

我们先来看一下，在ES5中函数的定义方式以及两种定义函数的方式有什么区别呢？

function sum(x, y){
  return x + y
}
console.log(sum(4, 5))
// --------------------
let sum = function(x, y){
  return x + y
}
console.log(sum(4, 5))

• 第一种函数定义的时候存在函数的预定义，所以先调用还是先定义都不会有问题
• 第二种相当于把一个方法赋值给一个变量，变量在调用的时候存在变量提升的问题，let 并不存在变量提升，会直接报错，如果是var 的话，则返回undefined

在ES6 中怎么写呢？

箭头函数

左边是参数右边是函数体

let sum = (x, y) => {
  return x + y
}
console.log(sum(3, 4))

// 如果只有一行代码，可以简写
let sum = (x, y) => x + y

下面我们在实例中来演示一下

<div id='btn'></div>
let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click',function(){
  console.log(this) // <div id='btn'></div>
})

我们看到当前this 指向的是我们拿到的div

如果我们想让这个事件延迟一秒执行呢

oBtn.addEventListener('click',function(){
  setTimeout(function(){
    console.log(this)  // window
  }, 1000)
})

• 我们看到在这个时候输出结果是 window
• setTimeout 方法属于 window。 window.setTimeout()

在ES5里面有三个方法可以改变this指向分别是，call apply bind

• call apply 会马上执行
• bind 不会立即执行

oBtn.addEventListener('click',function(){
  setTimeout(function(){
    console.log(this)  // <div id='btn'></div>
  }.bind(this), 1000)
})

我们使用箭头函数怎么写呢？

oBtn.addEventListener('click',function(){
  setTimeout(() => {
    console.log(this)  // <div id='btn'></div>
  }1000)
})

• this指向定义时所在的对象，而不是调用时所在的对象
• 在箭头函数里面其实并没有this，他的this是继承了父一层的this （外面一层执行上下文里面的this）

不可以当作构造函数

在ES5里面我们如何定义一个类

function People(name, age){
  this.name = name
  this.age = age
}
let p1 = new People('xiaobai', 4)
console.log(p1)

用箭头函数试一下

let People = (name, age)=> {
  this.name = name
  this.age = age
}
let p1 = new People('xiaobai', 4)
console.log(p1)  //报错 

• 箭头函数不可以当作构造函数去使用，这个也是箭头函数跟普通函数的第二个差别

不可使用arguments对象

let foo = function(){
  conosle.log(arguments)  // [1, 2, 3]
}
foo(1, 2, 3)
// ----------------------------
let foo = (...args) => {
  conosle.log(arguments)  // 报错 
  conosle.log(args)  // [1, 2, 3]
}
foo(1, 2, 3)

• 在箭头函数里面不可以使用arguments对象
• 如果想使用箭头函数，可以使用扩展运算符去代替arguments 的作用