javascript如何理解this关键字_它的绑定规则是什么【教程】_网络技术

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

JavaScript 中的 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 上下文。

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

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

箭头函数不绑定 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 > 显式绑定（bind/call） > 隐式绑定（对象方法） > 默认绑定（普通调用）。而箭头函数根本不在这个链条里，它从定义时就“抄了作业”。