一文详解js中如何改变this指向

1.this指向

什么是this指向？

在 Ja vaScript 中，this到底指向谁，不看你在哪里写的代码，看的是你怎么调用的。这句话是理解 this 的关键。

1.1 常见的this指向

1. 独立函数调用

当函数被独立、直接调用时，this 指向的是全局对象。在浏览器里是 window，在 Node.js 环境下就是 global。来看一个例子：

function show() {  console.log(this); // window（非严格模式）}show();

不过，一旦开启了严格模式，情况就变了，this 会是 undefined。

function show() {  "use strict"  console.log(this); // undefined}show(); // 如果通过 window.show() 调用，this 指向的又是 window

2. 作为对象的方法调用

函数作为对象的一个方法被调用时，this 指向的是调用它的那个对象。这很直观：

const user = {  name: "Alice",  greet() {    console.log(`Hello, ${this.name}!`); // Hello, Alice!  }};user.greet();

但需要警惕的是，如果把方法单独拿出来调用，this 就会丢失。

const func = user.greet;func(); // ❌ 错误：this 丢失（指向 window/undefined）

3. 箭头函数

箭头函数有点特殊，它没有自己的 this。它的 this 是在定义函数时继承来的，继承的是它外层作用域的 this。简单说，箭头函数里的 this 就是箭头函数外面的那个 this。

const obj = {  name: "Da ve",  regularFunc: function() {      console.log(this.name); // Da ve（隐式绑定）  },  arrowFunc: () => {      console.log(this.name); // 空（继承外层 this）window上没有name  }};obj.regularFunc();obj.arrowFunc();

再看一个例子，能更清楚地看到箭头函数和普通函数在 this 上的区别：

let name = "123";let person = {  name: "456",  fn1: function() {      // 这里的 this 和下面的 setTimeout 箭头函数中的 this 是同一个      let that = this;      setTimeout(() => {          console.log(this.name, that === this); // '456' true      }, 0);  },  fn2: function() {      // 这里的 this 和下面的 setTimeout 普通函数中的 this 就不一样      let that = this;      setTimeout(function() {          console.log(this.name, that === this); // '123' false      }, 0);  },};person.fn1(); // '456' trueperson.fn2(); // '123' false

4. DOM 事件处理

在非严格模式下，事件处理函数中的 this 指向触发事件的 DOM 元素。

                          变色      

在严格模式下，情况一样，this 仍然指向触发事件的 DOM 元素，这是事件处理函数的一个特点。

                          变色      

5. 内联事件函数

当代码直接以内联方式写在 HTML 标签的事件属性中时，this 指向的是监听器所在的 DOM 元素，这个行为不区分严格模式。

点击测试 

如果代码被包在一个函数内部，那么 this 的指向就等同于这个函数被直接调用，非严格模式下指向 window。

点击测试 

严格模式下，函数内部的 this 就是 undefined。

点击测试 

6. 构造函数

当一个函数被用作构造函数，通过 new 关键字调用时，this 指向新创建的那个实例对象，也就是 Person{}。

function Person(name) {  this.name = name;}const charlie = new Person("金小子");console.log(charlie.name); // 金小子

new 背后做的事情，可以理解为下面这几步：

// 伪代码展示 new 的操作流程const charlie = new Person("金小子");// 实际发生的步骤：// 1. 创建新对象const tempObj = {};// 2. 设置原型链tempObj.__proto__ = Person.prototype;// 3. 将 this 绑定到新对象并执行构造函数Person.call(tempObj, "金小子"); // 此时构造函数内的 this = tempObj// 4. 返回新对象const charlie = tempObj;

以上便是 Ja vaScript 中最常见的几种 this 指向场景。接下来，我们看看如何主动改变 this 的指向。

2. call、apply、bind

Ja vaScript 的 call、apply 和 bind 这三个方法，都是用来显式地绑定函数执行时的 this 指向的。

它们三个的核心区别，可以总结为：

• call：立即执行函数，参数一个一个地传
• apply：立即执行函数，参数通过数组形式传递
• bind：不立即执行，而是返回一个绑定了 this 和部分参数的新函数，可以后续调用

2.1 call

语法很简单：

func.call(thisArg, arg1, arg2, ...)  

看个例子就明白了：

function greet(message) {  console.log(`${message}, ${this.name}!`);}const person = { name: "Alice" };// 将 greet 的 this 指向 person，并逐个传递参数  greet.call(person, "Hello"); // 输出: "Hello, Alice!"

这里，greet 函数原本的 this 指向全局（比如 window），通过 call 方法，我们明确地把 this 绑定到了 person 对象上，然后把 "Hello" 作为参数传进去。

2.2 apply

apply 和 call 基本一样，唯一的区别是参数传递方式不同：

func.apply(thisArg, [argsArray])  

示例：

function introduce(age, job) {  console.log(`${this.name} is ${age} years old and works as a ${job}.`);}const person = { name: "Bob" };// 将 introduce 的 this 指向 person，参数通过数组传递  introduce.apply(person, [30, "developer"]); // 输出: "Bob is 30 years old and works as a developer."

当参数不确定或者已经在数组里时，用 apply 特别方便。

2.3 bind

bind 和前两个不同，它不会立即执行函数，而是创建一个永久绑定了 this 的新函数。

const newFunc = func.bind(thisArg, arg1, arg2, ...)  newFunc()

示例：

function logHobby(hobby1, hobby2) {  console.log(`${this.name} likes ${hobby1} and ${hobby2}.`);}const person = { name: "Charlie" };// 创建新函数，永久绑定 this 和部分参数  const boundFunc = logHobby.bind(person, "hiking");// 调用新函数时只需传入剩余参数  boundFunc("reading"); // 输出: "Charlie likes hiking and reading."

bind 返回的新函数 boundFunc，其 this 被永久绑定为 person，并且 "hiking" 已经被预设为第一个参数，调用时只需要传入剩下的参数即可。

总结

核心总结

this 指向是 Ja vaScript 中一个核心且容易混淆的知识点，其本质遵循「谁调用，指向谁」的原则（箭头函数是个例外）：

• 普通函数：this 指向调用它的对象，独立调用时指向全局（严格模式下为 undefined）；
• 箭头函数：没有自己的 this，继承定义时外层作用域的 this；
• 构造函数 / 事件处理：this 分别指向新创建的实例对象、触发事件的 DOM 元素；
• 显式绑定：call/apply/bind 可以强制修改 this 指向，它们的区别仅在于「执行时机」和「参数形式」。

实践建议

日常开发中，可以优先通过「对象方法调用」「箭头函数」「bind 绑定」来明确 this 的指向，尽量避免全局 this 带来的问题。处理动态参数时用 apply，需要预设参数或延迟执行时用 bind，简单传参优先用 call。在严格模式下，要特别注意独立函数调用时的 this 指向（会变成 undefined），避免意外报错。

记忆口诀

this 指向可以这样记：「谁调用，指向谁；箭头函数，找外层；构造/new，指实例；显式绑定，听 call/apply/bind」。至于绑定三兄弟：「call 逐个传，apply 数组传，bind 绑完等调用」。