问题背景
最近在学习前段开发,react框架,笔者本身是c/c++语系的软件从业人员,学习js是为了做跨端开发,学习的时候并没有选择先学习语法,而是选择大概的预览了一遍语法,然后开始框架的学习,为了提高学习的速度,当然是因为有之前语言的功底才敢这样子,在学习react的时候看到了js的箭头函数。之前没有了解过,所以特地的学习记录一下。
箭头函数
箭头函数表达式是传统函数表达式的紧凑替代方案,但受到限制且不能在所有情况下使用。
箭头函数和传统函数有区别,限制主要有:
- 箭头函数没有自己的 this、arguments 或 super 绑定,不应该用作方法。
- 箭头函数无权访问 new.target 关键字。
- 箭头函数不适用于调用、应用和绑定方法,这些方法通常依赖于建立作用域。
- 箭头函数不能用作构造函数。
- 箭头函数不能在其体内使用 yield。
传统js
函数和箭头函数
对比
// Traditional Anonymous Function
(function (a) {
return a + 100;
})
// Arrow Function Break Down
// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
return a + 100;
}
// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;
// 3. Remove the argument parentheses
a => a + 100;
箭头函数的 函数体: {}
参数列表: ()
都是在可选的。
语法:
// 1.
param => expression
// 2.
(param1, paramN) => expression
// 3.
(param1, paramN) => {
const a = 1;
return a + param1 + paramN;
}
- 特殊语法
// 无限参数个数
(a, b, ...r) => expression
// 默认值
(a=400, b=20, c) => expression
// 某人构造参数
([a, b] = [10, 20]) => a + b; // result is 30
({ a, b } = { a: 10, b: 20 }) => a + b; // result is 30
如前所述,箭头函数表达式最适合非方法函数。让我们看看当我们尝试将它们用作方法时会发生什么:
'use strict';
const obj = { // does not create a new scope
i: 10,
b: () => console.log(this.i, this),
c: function () {
console.log(this.i, this);
},
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}
箭头函数没有自己的 this:
const obj = {
a: 10,
};
Object.defineProperty(obj, 'b', {
get: () => {
console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object)
return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
},
});
因为类的主体具有 this 上下文,箭头函数作为类字段关闭在类的 this 上下文上,并且箭头函数主体内的 this 将正确指向实例(或类本身,对于静态字段)。但是,因为它是一个闭包,而不是函数自己的绑定,所以 this 的值不会根据执行上下文而改变。
箭头函数属性通常被称为“自动绑定方法”,因为与普通方法等效的是:
class C {
a = 1;
constructor() {
this.method = this.method.bind(this);
}
method() {
console.log(this.a);
}
}
call、apply 和 bind 方法不适合用作箭头函数——因为它们被设计为允许方法在不同的范围内执行——因为箭头函数是根据定义箭头函数的范围来建立 this 的。
b