React学习手册 2.2箭头函数

2.2.4 箭头函数和作用域

        常规的函数不限定this的作用域。

        以下述代码为例，在setTimeou回调中，this变成了别的东西，不再是play1对象。

  const paly1 = {
    mount:['a','b','c'],
    print:function(delay = 1000){
      setTimeout(function(){
        console.log(this.mount.join(','))
      },delay)
    }
  }

  paly1.print(); //Uncaugh TypeError:Cannot read property 'join' of undefined

        出现这个错误的原因在于视图在this上调用.join方法。在控制台中输出this，可以看到她引用的是Window对象。

        如果函数前面没有对象去调用，那么指向window，但是ES5新增的严格模式除外，因为在严格模式下this指向undefined。

        未解决这个问题，我们可以使用箭头函数句法保全this的作用域。

  const paly1 = {
    mount:['a','b','c'],
    print:function(delay = 1000){
      setTimeout(() => {
        console.log(this.mount.join(','))
      }, delay);
    }
  }
  paly1.print(); //a,b,c

        现在正常了，我们可以使用逗号把几个字母连接在一起。务必时刻考虑作用域。

事件处理函数，自定义对象里面的方法的this指向，根据谁调用函数this指向谁的特性，这里的this都指向当前操作的对象。

        箭头函数不限定this的作用域。

  const paly2 = {
    mount: ['a', 'b', 'c'],
    print: (delay = 1000) => {
      setTimeout(() => {
        console.log(this.mount.join(','))
      }, delay);
    }
  }
  paly2.print(); //Uncaugh TypeError:Cannot read property 'join' of undefined

把print函数改成箭头函数后，this引用就是window了。