ES6特性之:箭头函数

最新推荐:《Vue3.0抢先学》系列学习教程

在ES6的所有新特性中,箭头函数(Arrow Fucntion)算是我用的最频繁的特性之一了。

它是函数

那什么是箭头函数呢?首先,它得有“函数”的功能。我们平时定义一个函数,大致是这种样子的:

function greeting(name) {
  return "Hello," + name;
}

我们可以使用箭头函数来定义一个与它大致等价的函数:

const greeting = (name) => {
  return "Hello," + name;
}

更进一步,这个箭头函数还可以简化,在箭头后面只使用一个表达式:

const greeting = (name) => "Hello," + name;

我们还可以在使用匿名函数的场景使用箭头函数,比如:

[1, 2, 3].map((item) => item * item);
//结果:[1, 4, 9]

它没有自己的this绑定

我们来看一个我们经常会遇到的问题:

var person = {

    _name: "Kevin",

    intro: function () {
        console.log(this._name);   // Kevin

        var getMyIntro = function () {
          console.log(this._name);  // undefined

          return "My name is " + this._name;
        };

        return getMyIntro();
    }
};

person.intro(); //My name is undefined

在这段代码中,我们期望的结果是:My name is Kevin,但是它的结果却是:My name is undefined。在一个对象的成员函数中的内嵌函数,它的this对象并不是指向成员函数所指向的this对象(也就是这个例子中的person对象),而是指向当前执行上下文的顶层对象(在浏览器中运行的话,就是Window对象)。

在ES6之前,我们怎么来解决这个问题呢?我们可以像如下代码一样,在成员函数中定义一个变量,把成员函数的this缓存下来,然后在内嵌函数中使用成员函数中的这个变量,这样就达到成员函数和内嵌函数中拿到的数据都是一样的:

var person = {

    _name: "Kevin",

    intro: function () {
        var that = this;  //缓存this

        console.log(that._name);   // Kevin

        var getMyIntro = function () {
          console.log(that._name);  // Kevin

          return "My name is " + that._name;
        };

        return getMyIntro();
    }
};

person.intro(); //My name is Kevin

在ES6中,我们也可以通过箭头函数来轻松解决这个问题:

var person = {

    _name: "Kevin",

    intro: function () {
        console.log(this._name);   // Kevin

        var getMyIntro = () => {
          console.log(this._name);  // Kevin

          return "My name is " + this._name;
        };

        return getMyIntro();
    }
};

person.intro(); //My name is Kevin

可以看到,我们将内嵌函数getMyIntro定义成了一个箭头函数,这样的话,箭头函数中的this是和当前上下文中的this是一致的了。

你可能感兴趣的:(ES6特性之:箭头函数)