JavaScript 中 this 核心概念-CSDN博客

本文链接：https://blog.csdn.net/weixin_74183307/article/details/148309128

以下是关于 JavaScript 中 this 的完整解析，涵盖不同场景下的默认值、动态指定方法及注意事项：

一、`this` 的默认取值规则

1. 普通函数调用

function sayHi() {
  console.log(this);
}
sayHi(); // this → window (浏览器环境) / undefined (严格模式)

规则：普通函数调用时，this 指向全局对象（浏览器中为 window），严格模式下为 undefined。
例外：若函数是对象方法，调用方式决定 this。

2. 对象方法调用

const user = {
  name: '小明',
  walk: function () {
    console.log(this); // this → user 对象
  }
};
user.walk(); // 调用方式决定 this 指向 user

规则：函数作为对象方法调用时，this 指向调用该方法的对象。
注意：若函数被赋值给其他变量后调用，则 this 会丢失：
```
const fn = user.walk;
fn(); // this → window / undefined
```

3. 构造函数调用

function Person(name) {
  this.name = name;
}
const p = new Person('小明');
console.log(p.name); // 小明

规则：使用 new 调用函数时，this 指向新创建的实例对象。

4. 事件处理函数

const btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
  console.log(this); // this → DOM 元素 btn
});

规则：事件回调函数中，this 默认指向触发事件的 DOM 元素。

5. 定时器回调

setTimeout(function () {
  console.log(this); // this → window
}, 1000);

规则：定时器回调中的 this 指向全局对象（浏览器中为 window）。

二、箭头函数中的 `this`

1. 基本特性

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

const user = {
  name: '小明',
  walk: () => {
    console.log(this); // this → window (继承全局作用域)
  }
};
user.walk();

2. 事件处理与原型方法中的问题

事件处理函数：

btn.addEventListener('click', () => {
  console.log(this); // this → window (错误)
});

解决：使用普通函数或手动绑定 this：

btn.addEventListener('click', function () {
  console.log(this); // this → DOM 元素
});

原型方法：

function Person() {}
Person.prototype.walk = () => {
  console.log(this); // this → window
};
const p = new Person();
p.walk();

解决：避免在原型中使用箭头函数。

三、动态指定 `this` 的方法

1. `call` 方法

语法：func.call(context, arg1, arg2, ...)
特点：立即调用函数，参数逐个传递。

function sayHi(age) {
  console.log(this.name, age);
}
const user = { name: '小明' };
sayHi.call(user, 18); // 输出：小明 18

2. `apply` 方法

语法：func.apply(context, [args])
特点：立即调用函数，参数以数组传递。

function counter(x, y) {
  return x + y;
}
const result = counter.apply(null, [5, 10]); // result = 15

3. `bind` 方法

语法：func.bind(context, arg1, arg2, ...)
特点：返回一个新函数，不立即执行。

function sayHi() {
  console.log(this.name);
}
const user = { name: '小明' };
const sayHello = sayHi.bind(user);
sayHello(); // 输出：小明

四、对比与适用场景

方法	是否立即执行	参数传递方式	适用场景
`call`	✅	逐个传递	需要立即调用并指定 `this`
`apply`	✅	数组传递	参数数量不确定时（如 `Math.max`）
`bind`	❌	逐个传递（可部分）	创建绑定 `this` 的新函数

五、常见陷阱与解决方案

1. 回调函数中丢失 `this`

const user = {
  name: '小明',
  greet: function () {
    setTimeout(function () {
      console.log(this.name); // this → window
    }, 1000);
  }
};
user.greet();

解决：

使用箭头函数继承外层 this：

setTimeout(() => {
  console.log(this.name); // this → user
}, 1000);

使用 bind 绑定 this：

setTimeout(function () {
  console.log(this.name);
}.bind(this), 1000);

2. 事件处理中的 `this`

错误示例：

btn.addEventListener('click', () => {
  console.log(this); // this → window
});

正确示例：

btn.addEventListener('click', function () {
  console.log(this); // this → DOM 元素
});

六、总结

场景	`this` 指向
普通函数调用	全局对象（`window`）或 `undefined`
对象方法调用	调用方法的对象
构造函数调用	新创建的实例对象
事件处理函数	触发事件的 DOM 元素
定时器回调	全局对象（`window`）
箭头函数	外层作用域的 `this`