JavaScript中this指向由调用上下文决定,遵循四条绑定规则:new绑定>显式绑定>隐式绑定>默认绑定;隐式绑定易因函数提取而丢失this;bind绑定可被new覆盖;箭头函数无this,继承外层词法作用域;默认绑定在严格模式下为undefined。

JavaScript 中的 this 指向谁,不取决于函数定义的位置,而取决于**函数调用时的上下文**。它有四条核心绑定规则,优先级从高到低是:new 绑定 > 显式绑定(call/apply/bind)> 隐式绑定(对象方法调用)> 默认绑定(独立调用)。容易出错的地方,往往就藏在这几条规则的交界或特殊场景里。
隐式绑定失效:丢失 this 的常见操作
当一个本该作为对象方法被调用的函数,被“提取”出来单独使用时,this 就会丢失,退回到默认绑定(非严格模式下是全局对象,严格模式下是 undefined)。
典型场景:把对象方法赋值给变量、传入回调(如 setTimeout、addEventListener)、解构赋值 例子:const obj = { name: 'Alice', say() { console.log(this.name); } }; const fn = obj.say; fn(); // undefined(严格模式) 解决办法:用箭头函数包裹、用 bind 固定、改写为 obj.say() 直接调用、或用 class 字段语法 + 箭头函数(React 常见)
显式绑定被 new 覆盖:bind 后还能被 new 吗?
用 Function.prototype.bind 创建的绑定函数,如果被 new 调用,会忽略 bind 时指定的 this,转而构造新实例——此时 this 指向新生成的对象。这是很多人没意识到的“例外”。
例如:const bound = originalFunc.bind({x: 1}); const inst = new bound(); // this 在 originalFunc 内指向 inst,不是 {x: 1}
bind 返回的函数内部做了判断:如果是 new 调用,就用新对象;否则才用绑定的 this 所以 bind 并不能完全“锁定”this,在构造函数场景下会被覆盖 想彻底禁止 new 调用,得手动在函数内检测 this instanceof originalFunc
箭头函数没有自己的 this:它继承外层作用域
箭头函数不遵循上述四条绑定规则,它没有自己的 this,而是沿作用域链向上查找,捕获定义时所在函数的 this 值(词法绑定)。这既是优势,也是陷阱。
立即学习“Java免费学习笔记(深入)”;
好处:天然解决事件回调、定时器中 this 丢失问题(不用 bind 或 _this = this) 陷阱:不能用 call/apply/bind 改变它的 this;也不能作为构造函数(会报错);在对象字面量方法中写箭头函数,this 不指向该对象,而是外层(比如模块顶层的 this 是 module.exports) 例子:const obj = { name: 'Bob', log: () => console.log(this.name) }; obj.log(); // undefined(因为外层 this 不是 obj)
默认绑定的“静默失败”:严格模式 vs 非严格模式
函数独立调用(如 foo())时,若没被任何规则捕获,就进入默认绑定。这个行为在两种模式下完全不同:
非严格模式下,this 指向全局对象(浏览器是 window,Node 是 global)——看似“正常”,实则容易掩盖 bug 严格模式下,this 是 undefined,一访问属性就立即报错(如 this.name → Cannot read property ‘name’ of undefined) 现代项目基本都开启严格模式(模块默认严格),所以看到 undefined 更常见,也更安全
基本上就这些。掌握这四条规则和它们的冲突点,再配合 Chrome DevTools 的 debugger 和 console.log(this),就能稳住 this 的指向。不复杂但容易忽略细节。
以上就是javascript的this指向谁_它的绑定规则有哪些容易混淆的地方?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1543761.html
微信扫一扫
支付宝扫一扫