箭头函数详解及this指向

注意事项

• 只有匿名函数才可以改写为箭头函数。

• => 这个读“胖箭头”

• 不能用作构造函数

• 不能使用arguments

• 不能作为对象的方法调用，因为还是指向上下文，而不是调用的对象

• 如果需要this操作，不能用作addEventListener里传的参数

普通函数转化箭头函数步骤：

• function去掉

• 加上一个箭头

• 如果只有一个参数，() 可以省略；

• 如果只有一个return语句（只有一行代码），return和{ } 可以省略，。

• 下面两个例子的化简过程详细地表现了其省略的规则：

• // let show = function (a){
  //     return 2*a;
  // };
  
  // let show = (a)=>{
  //     return 2*a;
  // };
  
  // let show = a=>{
  //     return 2*a;
  // };
          
  let show = a=>2*a;   //默认在这一行代码前加 return。所以如果你再加个return，就会报错。
  alert(show);

函数内this指向

普通函数

• 普通函数的this在声明时指向window，在调用时指向调用它的对象，如果直接调用，也指向window

function b() {
　　function a(){

　　　　console.log(this)

　　}
　　let c = function() {

　　　　a()

　　}
　　let obj2 = {a,c}
　　obj2.a()//打印出obj2,打印出调用时的对象obj2
　　obj2.c()//打印出window,打印出直接调用时的对象window
}
let obj = {b}
obj.b()//使函数b内上下文this为obj

箭头函数

• 箭头函数的this在声明时指向window，在调用时指向声明时所在的上下文this

• function b() {
      let a = () => console.log(this)
      let c = function() {a()}
      let obj2 = {a,c}
      obj2.a()//打印出obj,打印出声明时的上下文,而不是调用它的对象
      obj2.c()//打印出obj,打印出声明时的上下文，而不是调用时的上下文
  }
  let obj = {b}
  obj.b()//使函数b内上下文this为obj