JavaScript中this的用法与绑定规则解析

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript中this的含义及绑定规则详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

JavaScript中this调用时绑定：普通调用非严格模式指向全局对象、严格模式为undefined；对象方法调用指向该对象；箭头函数继承外层this；new调用指向新实例；绑定优先级为new＞显式绑定＞隐式绑定＞默认绑定。

JavaScript 中的 this 不是定义时绑定，而是调用时绑定——它永远指向函数被调用时的“执行上下文对象”，和函数在哪定义、怎么声明完全无关。

普通函数调用时，this 指向什么

在非严格模式下，直接调用函数（如 foo()），this 指向全局对象（浏览器中是 window，Node.js 中是 global）；严格模式下则为 undefined。

常见错误现象：在回调、定时器或事件处理中直接传入普通函数，this 丢失：

const obj = {
  name: 'Alice',
  say: function() { console.log(this.name); }
};
setTimeout(obj.say, 100); // 输出 undefined（严格模式）或 window.name

原因：这里 obj.say 被取出来单独调用，等价于 const fn = obj.say; fn();，已脱离 obj 上下文。

• 修复方式：用 bind、箭头函数、或改写为 setTimeout(() => obj.say(), 100)
• 注意：call/apply 可显式指定 this，但只影响当次执行，不改变函数本身

对象方法调用时，this 绑定的是谁

当函数作为对象属性被调用（即 obj.method() 形式），this 指向该对象（obj），这是最直观也最容易依赖的绑定场景。

但要注意“隐式丢失”边界：

• const fn = obj.method; → 后续 fn() 已不是对象方法调用，this 不再是 obj
• 嵌套对象中，只有最后一层点号决定 this：obj.nested.method() 的 this 是 obj.nested，不是 obj
• 原型链上的方法，this 仍指向调用时的实际对象（不是定义它的原型）

箭头函数没有自己的 this，它继承外层作用域

箭头函数不绑定 this，它会沿作用域链向上查找最近的非箭头函数的 this 值，并固定住——无法用 call、apply、bind 改变。

典型使用场景：避免回调中 this 丢失，比如事件监听或 Promise 链：

const obj = {
  name: 'Bob',
  init() {
    document.addEventListener('click', () => {
      console.log(this.name); // 正确输出 'Bob'
    });
  }
};

但这也意味着：箭头函数不能用作构造函数（无 this 实例），也不适合需要动态 this 的场景（如 Vue 或 React 类组件中的事件处理器若需访问实例，有时反而要避免箭头函数）。

new 调用时，this 指向新创建的实例

用 new 调用函数时，引擎会创建空对象，将其设为 this，并隐式返回该对象（除非显式返回其他对象）。

关键点：

• 必须是函数表达式或函数声明，不能是箭头函数（new 箭头函数会报 TypeError: xxx is not a constructor）
• 构造函数内部若返回一个对象，则以该对象为准；返回原始值（string/number/etc）会被忽略
• class 语法本质是函数加语法糖，constructor 内的 this 就是即将返回的实例

真正容易被忽略的是：所有绑定规则优先级有明确顺序——new > 显式绑定（bind/call） > 隐式绑定（对象方法） > 默认绑定（普通调用）。而箭头函数根本不在这个链条里，它从定义时就“抄了作业”。

本篇关于《JavaScript中this的用法与绑定规则解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！