【JS进阶】JavaScript 中 this 值的确定规则

JavaScript 中 this 值的确定规则

1. 默认绑定（独立函数调用）

当函数作为普通函数调用时，this 指向全局对象（浏览器中是 window，Node.js 中是 global），严格模式下是 undefined。

function showThis() {
  console.log(this);
}

showThis(); // 浏览器中: window / 严格模式下: undefined

2. 隐式绑定（方法调用）

当函数作为对象的方法调用时，this 指向调用该方法的对象。

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}`);
  }
};

obj.greet(); // "Hello, Alice" - this 指向 obj

3. 显式绑定（call/apply/bind）

使用 call(), apply() 或 bind() 可以显式设置 this 的值。

function greet() {
  console.log(`Hello, ${this.name}`);
}

const person = { name: 'Bob' };

greet.call(person); // "Hello, Bob"
greet.apply(person); // "Hello, Bob"

const boundGreet = greet.bind(person);
boundGreet(); // "Hello, Bob"

4. new 绑定（构造函数调用）

使用 new 调用函数时，this 指向新创建的对象。

function Person(name) {
  this.name = name;
}

const alice = new Person('Alice');
console.log(alice.name); // "Alice"

5. 箭头函数

箭头函数没有自己的 this，它会捕获所在上下文的 this 值。

const obj = {
  name: 'Charlie',
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 100);
  }
};

obj.greet(); // "Hello, Charlie" - this 来自 obj

6. 事件处理函数

在 DOM 事件处理函数中，this 通常指向触发事件的元素。

button.addEventListener('click', function() {
  console.log(this); // 指向 button 元素
});

优先级总结

1. new 绑定
2. 显式绑定（call/apply/bind）
3. 隐式绑定（方法调用）
4. 默认绑定

箭头函数的 this 由外层作用域决定，不受上述规则影响。