箭头函数 this指向

时间: 2023-09-04 19:14:20 浏览: 120

JavaScript箭头函数中的this详解

JavaScript中的箭头函数是ES6引入的一种新的函数定义方式，它在语法上比传统的`function`关键字更加简洁。然而，箭头函数与普通函数在处理`this`上下文时有显著的区别，这也是本文的重点。 `this`在JavaScript中是一个特殊的关键词，它通常指向函数调用时所在的对象。在非箭头函数中，`this`的值取决于函数的调用方式：全局上下文中`this`指向全局对象（浏览器环境下为`window`），作为对象方法调用时`this`指向调用该方法的对象，而在函数内部（非方法）`this`则可能根据严格模式和非严格模式有所不同。然而，箭头函数改变了`this`的规则。箭头函数并没有自己的`this`，它会从外层（父级）作用域继承`this`值。这意味着箭头函数不会创建自己的执行上下文，而是使用封闭作用域中的`this`，这通常是定义箭头函数时所在的作用域。例如： ```javascript let obj = { name: 'John', sayName: function() { console.log(this.name); }, arrowSayName: () => { console.log(this.name); } }; obj.sayName(); // 输出 "John" obj.arrowSayName(); // 在非严格模式下，输出 "undefined"，因为在箭头函数内部，`this`继承自全局对象 ``` 在上面的例子中，`sayName`是一个普通函数，其`this`指向`obj`对象，所以能正确输出名字。但`arrowSayName`是一个箭头函数，它的`this`继承自外部作用域，即全局作用域，在浏览器中就是`window`对象，因此在非严格模式下，`this.name`是未定义的。对于在对象方法中嵌套的箭头函数，由于箭头函数不创建自己的`this`，所以它会捕获外部函数的`this`值。这解决了传统函数中使用临时变量如`self`或`that`来保存`this`值的问题： ```javascript let circle = { radius: 10, getRadius: function() { console.log(this.radius); }, outerDiameter: function() { const innerDiameter = () => { console.log(2 * this.radius); }; innerDiameter(); } }; circle.outerDiameter(); // 在非箭头函数中，输出 "20" ``` 在这个例子中，`outerDiameter`内的箭头函数`innerDiameter`能正确访问到`this.radius`，因为它继承了`outerDiameter`的`this`。 JavaScript箭头函数的`this`值是固定的，它不会像普通函数那样根据调用方式动态改变。这种特性使得箭头函数在某些场景下更易于理解和使用，但也需要注意它可能导致的`this`行为差异，尤其是在涉及到对象方法和事件处理程序等场景时。因此，理解箭头函数的`this`行为是掌握JavaScript高级特性的关键。

箭头函数的this指向是继承而来的，并且指向在定义它时所处的对象，即父级作用域，而不是执行时的对象。这意味着箭头函数内部的this的值不会受到函数调用方式的影响，而是固定指向外层代码块的this。这种特性让箭头函数在使用setTimeout、setInterval等场景下更加方便地使用this。所以，无论箭头函数在哪里被调用，它的this都指向定义它的外层代码块的this，而不是调用时的对象。这与传统的函数的运行机制不同，传统的函数中的this是动态绑定的，它的值会根据函数的调用方式来决定。123 #### 引用[.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 ]

阅读全文

箭头函数 this指向

相关推荐

关于ES6箭头函数中的this问题

JavaScript高级-this绑定规则+箭头函数

箭头函数this指向

箭头函数this指向问题的的面试题

箭头函数this指向问题，箭头函数与普通函数的区别？

箭头函数改变this指向

箭头函数this的指向

箭头函数外部this指向

箭头函数的this指向

js中箭头函数this的指向

箭头函数的this指向谁

箭头函数和普通函数的this指向

箭头函数 this

箭头函数内部this 和外部this指向

js箭头函数里的this指向哪里

构造函数this指向

箭头函数中的this指向的什么

箭头函数里面如果是回调函数this指向

箭头函数和普通函数的this指向举例

最新推荐

ta-lib-0.5.1-cp312-cp312-win32.whl

在线实时的斗兽棋游戏，时间赶，粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip课程设计

MATLAB实现小波阈值去噪：Visushrink硬软算法对比

管理建模和仿真的文件

【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征

c语言从链式队列 中获取头部元素并返回其状态的函数怎么写

易语言实现画板图像缩放功能教程

"互动学习：行动中的多样性与论文攻读经历"

【交互特征：优化与调试的艺术】：实战技巧，提升回归模型与分类模型的性能

用IDEA写一个高速收费系统框架附带代码

c语言从链式队列中获取头部元素并返回其状态的函数怎么写