普通函数的this在运行时根据调用方式动态绑定，遵循默认、隐式、显式和new绑定规则；箭头函数没有自己的this，继承外层作用域的this，且无法通过call、apply、bind改变，也不能作为构造函数使用。
JavaScript 中的 this 绑定在箭头函数和普通函数中存在本质区别，主要体现在作用域和绑定方式上。
普通函数有自己的 this 绑定
普通函数在执行时会根据调用方式动态确定 this 的值，遵循以下四种绑定规则：
默认绑定：独立调用时，非严格模式下指向全局对象（浏览器中是 window），严格模式下为 undefined 隐式绑定：通过对象调用时，this 指向该对象 显式绑定：使用 call、apply 或 bind 可以手动指定 this 值 new 绑定：构造函数调用时，this 指向新创建的实例
这意味着普通函数的 this 是在运行时决定的，容易受到调用上下文的影响。
箭头函数没有自己的 this，继承外层作用域
箭头函数不会创建自己的 this 上下文，而是继承外层函数或全局作用域的 this 值。这种机制称为“词法 this”。
立即学习“Java免费学习笔记（深入）”；
由于箭头函数的 this 是定义时确定的，而不是运行时绑定的，因此它不受调用方式影响，也无法通过 call、apply 或 bind 修改 this 指向。
例如：
const obj = { name: ‘Alice’, normalFunc: function() { console.log(this.name); // 输出 Alice }, arrowFunc: () => { console.log(this.name); // 输出 undefined（继承的是全局的 this） }};
实际应用中的差异
在对象方法或事件回调中，这种差异尤为明显：
使用普通函数时，需注意 this 可能丢失，尤其是在异步操作或嵌套函数中 箭头函数常用于解决 this 指向问题，比如在 setTimeout、数组方法（map、filter）中保持外层 this 不能将箭头函数用作构造函数，因为它没有自己的 this，调用 new 会报错
基本上就这些。箭头函数简化了 this 的处理，但在需要动态绑定 this 的场景下，普通函数更合适。理解两者的差异有助于写出更可靠的代码。
以上就是JavaScript 中的 this 绑定规则在箭头函数和普通函数中有何不同？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/45317.html
微信扫一扫 
支付宝扫一扫 
