javascript的this指向谁_它的绑定规则有哪些容易混淆的地方？

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 值（词法绑定）。这既是优势，也是陷阱。

HoloPix AI

87

查看详情

立即学习“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指向谁_它的绑定规则有哪些容易混淆的地方？的详细内容，更多请关注php中文网其它相关文章！