2.箭头函数

箭头函数

写法灵活

const numbers = [2, 4, 7, 89, 234];

const double = numbers.map(function (number) {
    return number * 2;
});

const double2 = numbers.map((number) => {
    return number * 2;
});

console.log(double2);

以上,两种语法, doubledouble2 结果一样。

简而言之:

  • 删掉 function 关键字
  • 加上一个 => 箭头
  • 没有参数加 ()
  • 一个参数可选择加 ()
  • 多个参数 , 分隔

隐式返回

显示返回就是 return 关键字加上后面返回的内容

箭头函数中的隐士返回就是可以把 renturn 省略掉,去掉花括号 {}

const double2 = numbers.map(number => number * 2);

this

const Dp = {
    name: 'Dp',
    hobbies: ['Coding', 'Sleeping', 'Reading'],
    printHobbies: function () {
        this.hobbies.map(function (hobby) {
            console.log(`${this.name} loves ${hobby}`);
        });
    }
}
Dp.printHobbies();

以上,结果是

undefined loves Coding
undefined loves Sleeping
undefined loves Reading

原因 this 是在运行的时候绑定的,在以上 map 方法中的回调函数是一个独立的函数,当一个函数独立运行的时候,不是被作为对象的方法调用,也没有通过当没有 apply , bind , call 改变 this 值的话,这时候的 this 指向window`。

所以我们可以改写

var self = this;
this.hobbies.map(function (hobby) {
    console.log(`${self.name} loves ${hobby}`);
});

达到想要的效果。

我们还可以利用箭头函数的便利

this.hobbies.map(hobby => console.log(`${this.name} loves ${hobby}`));

这是因为箭头函数没有自己的 this 值,他的 this 值是继承父级作用域的,与我们之前接触的 this 值是在执行时动态指定的不同,箭头函数的 this 值是词法作用域,也就是在定义的时候就指定的,而且以后也不会随调用方法的改变而改变。

不适用场景

  • 作为构造函数,一个方法需要绑定到对象
  • 当你真的需要this的时候
  • 需要使用arguments对象的

推荐阅读更多精彩内容