javascript Class中的箭头函数和普通函数

本文最后更新于:几秒前

前言

本篇文章记录ES6 class类中的箭头函数方法和普通函数方法的区别,以及proposal-class-fields提案带来的一些变化。

ES6的Class中 箭头函数方法和普通函数方法的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class DemoClass {
constructor() {
this.name = 'yrPang';
this.getNameArrow = () => {
console.log(this.name);
};
this.getNameFunc = function() {
console.log(this.name);
};
}

getName() {
console.log(this.name);
}
}

let o = new DemoClass();
o.getNameArrow(); // 'yrPang'
o.getNameFunc(); // 'yrPang'
o.getName(); // 'yrPang'

let a = o.getNameArrow;
let b = o.getNameFunc;
let c = o.getName;
a(); // 'yrPang'
b(); // TypeError: Cannot read property 'name' of undefined
c(); // TypeError: Cannot read property 'name' of undefined

从上面的代码可以看出,箭头函数方法中的this不受调用时上下文的影响,而普通函数方法会收到影响。

原因理解

  1. 箭头函数没有上下文,箭头函数内部的this指向箭头函数定义时所在函数的上下文;

  2. 这可以很好的应用在类似 clc.addEventListener('click', button.click); 这样的场景下,免去使用 bind()的麻烦;

  3. 另外箭头函数中的this指向的是实例而不是原型对象,因为在使用new进行实例化的时候会先将构造函数内的this指向新对象再执行构造函数内的代码。

其它

在上面的定义中,类块中的方法属于原型对象,构造函数中的方法属于实例。此外,不允许在类块中给原型添加原始值或对象,而下面的提案带来的变化。

proposal-class-fields提案带来的一些变化

1
2
3
4
5
6
7
8
9
10
11
12
class DemoClass {
constructor() {
this.name = 'yrPang';
}

// 新东西
x;
y = 22;
getName = () => {
console.log(this.name);
}
}

这个提案中允许了像上面那样在类块中定义变量,这样也就允许了我们在类块中使用箭头函数定义方法。不过,这样定义的方法和属性依然是属于实例的,箭头函数中的this也和上文有同样的表现。

参考资料

  1. JavaScript之class中的箭头函数和普通函数

  2. ES6 Class Methods 定义方式的差异


本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!