箭头函数的this
时间: 2023-07-18 14:13:31 浏览: 161
箭头函数的 `this` 指向在创建该箭头函数时所处的上下文的 `this` 值,而不是在调用该箭头函数时的 `this` 值。
在普通函数中,`this` 的指向是由函数的调用方式决定的,即由调用该函数的对象来决定。如:
```javascript
const obj = {
name: 'Alice',
sayName() {
console.log(this.name);
}
};
obj.sayName(); // 输出:Alice
```
而在箭头函数中,`this` 的指向是由箭头函数所在的上下文来决定的,如:
```javascript
const obj = {
name: 'Alice',
sayName: () => {
console.log(this.name);
}
};
obj.sayName(); // 输出:undefined
```
上述代码中,箭头函数 `sayName` 中的 `this` 指向的是全局对象,因为箭头函数是在定义时绑定的。而全局对象中并没有 `name` 属性,因此输出 `undefined`。
需要注意的是,箭头函数不适用于所有情况。如果需要在函数内部使用 `this`,并且希望 `this` 的指向能够根据函数的调用方式来动态确定,那么最好使用普通函数。
相关问题
箭头函数 this
箭头函数是一种比较新的 JavaScript 函数语法,它与传统的函数语法有些不同。在箭头函数中,this 的值由定义时外部的上下文决定,而不是函数被调用时的上下文。
具体来说,箭头函数的 this 值指向了定义时的上下文,也就是说,箭头函数内部的 this 值与外部的 this 值相同。这个特性使得箭头函数很适合用来定义回调函数,因为它可以避免经常出现的 this 混淆问题。
举个例子,假设我们有一个对象 obj,它有一个方法 foo,用箭头函数来定义这个方法的话,它的 this 值就是 obj,不会受到调用 foo 方法时的上下文影响:
```
const obj = {
name: 'Alice',
foo: () => {
console.log(this.name);
}
}
obj.foo(); // 输出 undefined
```
而如果我们用普通函数语法定义 foo 方法,调用时 this 的值就会变成调用时的上下文:
```
const obj = {
name: 'Alice',
foo: function() {
console.log(this.name);
}
}
obj.foo(); // 输出 Alice
```
因此,在使用箭头函数时需要注意 this 的值是否符合预期,避免出现不必要的错误。
箭头函数 this指向
箭头函数的this指向是继承而来的,并且指向在定义它时所处的对象,即父级作用域,而不是执行时的对象。这意味着箭头函数内部的this的值不会受到函数调用方式的影响,而是固定指向外层代码块的this。这种特性让箭头函数在使用setTimeout、setInterval等场景下更加方便地使用this。所以,无论箭头函数在哪里被调用,它的this都指向定义它的外层代码块的this,而不是调用时的对象。这与传统的函数的运行机制不同,传统的函数中的this是动态绑定的,它的值会根据函数的调用方式来决定。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [箭头函数this的指向](https://blog.csdn.net/weixin_57959921/article/details/129439200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [关于箭头函数中的this的指向](https://blog.csdn.net/xu4321083/article/details/79753800)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [箭头函数及其this的指向](https://blog.csdn.net/qq_53841687/article/details/125770647)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
阅读全文