本文共 2358 字，大约阅读时间需要 7 分钟。

ES6中的箭头函数，是JS中增强函数性能的一部分措施。

基本语法

普通的函数定义方式：

var add = function (x, y) {
           return x + y;    }        var sum = add(1, 2);   	console.log(sum);//3

箭头函数：

var add = (x, y) => x + y;    var sum = add(1, 2);   	console.log(sum);//3

以箭头函数方式定义函数无变量提升。如果参数为一个，则可以省略小括号；如果函数体中只有一句返回值，像上面的return x + y，没有其他的语句，那么可以省略花括号。

this指向问题

箭头函数除了拉风，装杯意外，还有一个重要的特性，this指向不会根据调用者变化。

普通方式定义函数：

var uname = 'window';    console.log(this);    var obj = {
           uname: 'zed',        sayName: function () {
               console.log(this.uname);        }    }    obj.sayName();//zed

箭头方式定义函数:

var uname = 'window';    console.log(this);//window    var obj = {
           uname: 'zed',        sayName: () => console.log(this.uname)    }    obj.sayName();//window

这里的this并没有指向obj，而是指向了全局对象window，obj对象外上一行的this指向window，二者指向相同。

var btn = document.querySelector('button');    console.log(this)//window    btn.onclick =  () =>{
           console.log(this)//window    }

在网页中添加了一个按钮，点击按钮时，输出点击事件中的this指向。结果表明指向为window，没有受函数调用者btn的影响。在点击事件的上一行，this指向为window，二者相同。

再看这段代码，以普通函数方式定义：

var btn = document.querySelector('button');    btn.onclick = function () {
           setInterval(function () {
               this.innerText = Math.random();            console.log(this);//window        }, 1000)    }

btn的点击事件中，添加了一个定时器，每隔1秒钟生成一个随机数并且赋值给btn的文本内容。

然而，这样写是不正确的。我们知道，计时器方法中的this指向为window，故不会给btn的文本内容赋值。

那么，在上面代码中，如何让计时器中的this指向调用者btn呢？

第一种方式：

btn.onclick = function () {
           let that = this;        setInterval(function () {
               that.innerText = Math.random();            console.log(that);//随机数        }, 1000)    }

定义一个变量that接收一下点击事件内的this，that也指向了btn，结果显示成功。

第二种方式：

btn.onclick = function () {
           setInterval(function () {
               this.innerText = Math.random();            console.log(this);//随机数        }.bind(this), 1000)    }

使用bind方法改变计时器的this指向，这种方法较第一种更为优雅，结果显示成功。

第三种方式：

btn.onclick = function () {
           console.log(this);//随机数                setInterval(() => {
               this.innerText = Math.random();            console.log(this);//随机数        }, 1000)    }

使用箭头方式声明计时器中的回调函数，回调函数中的this指向不会受调用者window影响，此块代码的this指向为btn，故回调函数的this也指向btn，结果显示成功。

小技巧

• 使用箭头方式定义函数：
  • 若函数在对象的内部，则this指向与该对象外的上一行this指向相同。
  • 定义在计时器，事件，或者其他函数的内部，则this指向与该函数外部的上一行this指向相同。
  • 不是那么严谨，只是平常自己悟出来的小技巧，慎用。
  • 2020/12/30补充内容：this指向，向外层作用域中，一层层查找this，直到有this的定义
  • 待补充…

转载地址：http://ahozi.baihongyu.com/