1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 10:22:23 +00:00

docs(function): edit arrow function

This commit is contained in:
ruanyf 2020-12-17 15:49:41 +08:00
parent d04189323a
commit cc2420e644

View File

@ -869,6 +869,35 @@ const cat = {
上面代码中,`cat.jumps()`方法是一个箭头函数,这是错误的。调用`cat.jumps()`时,如果是普通函数,该方法内部的`this`指向`cat`;如果写成上面那样的箭头函数,使得`this`指向全局对象,因此不会得到预期结果。这是因为对象不构成单独的作用域,导致`jumps`箭头函数定义时的作用域就是全局作用域。
再看一个例子。
```javascript
globalThis.s = 21;
const obj = {
s: 42,
m: () => console.log(this.s)
};
obj.m() // 21
```
上面例子中,`obj.m()`使用箭头函数定义。JavaScript 引擎的处理方法是,先在全局空间生成这个箭头函数,然后赋值给`obj.m`,这导致箭头函数内部的`this`指向全局对象,所以`obj.m()`输出的是全局空间的`21`,而不是对象内部的`42`。上面的代码实际上等同于下面的代码。
```javascript
globalThis.s = 21;
globalThis.m = () => console.log(this.s);
const obj = {
s: 42,
m: globalThis.m
};
obj.m() // 21
```
由于上面这个原因,对象的属性建议使用传统的写法定义,不要用箭头函数定义。
第二个场合是需要动态`this`的时候,也不应使用箭头函数。
```javascript