ES6学习（4）箭头函数

1. ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义。
2. 箭头函数的this是静态的，始终指向声明该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。
3. 箭头函数不能作为构造函数进行实例化。
4. 不能使用 arguments；
5. 普通函数，谁调用，this就指向谁

var name = 'window'; // 其实是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 输出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

6. 改为箭头函数

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}

A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

7. 如何指向A呢，外面包一层函数

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

8. 外层函数写成箭头函数，则this也变成了window

ad.addEventListener("click", function(){
    // ES6写法
    // 定时器：参数1：回调函数；参数2：时间；
    // 这个this才是ad
    setTimeout(() => this.style.background = 'pink',2000);
    }
)
//错误写法
ad.addEventListener("click", () => {
    setTimeout(() => this.style.background = 'pink',2000);
 })
//不使用箭头函数错误写法
ad.addEventListener("click", function(){
    setTimeout(function(){this.style.background = 'pink';},2000);
});
// 不使用箭头函数正常写法
ad.addEventListener("click", function(){
    let _this = this;
    setTimeout(function(){
        _this.style.background = 'pink';
    },2000);
});

9. apply(),bind(),call()

• 这三个方法的主要作用是改变函数中的this指向。
• apply 、 call 、bind 三者第一个参数都是this要指向的对象。
• apply 、 call 、bind 三者都可以利用后续参数传参。
• bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。
• apply和call只是传参不一样，apply是参数是数组，call的参数需要逐个列举出来。
  参考：https://zhuanlan.zhihu.com/p/57204184