JavaScript this指向问题详解与场景案例

this指向核心规则总结

在JavaScript中，this的值取决于函数的调用方式而非定义位置。主要规则如下：

• 全局环境：在非严格模式下指向 window（浏览器端），严格模式下为 undefined。
• 普通函数：非严格模式下指向全局对象（或 window）；严格模式下指向 undefined。
• 构造函数：使用 new 调用时，指向创建的实例对象。
• 箭头函数：没有自己的 this，继承外层执行上下文中定义的 this。
• 对象的方法：当作为对象属性调用时，指向该对象本身。
• 显式绑定：call()、apply()、bind() 可将 this 强制绑定到指定参数。

第1步：全局环境中的this指向

在全局脚本中直接访问 this，其指向全局对象。需要注意的是，即使在 'use strict' 严格模式下，顶层作用域的 this 依然指向 window（仅函数内部的严格模式会改变其值）。

// 非严格模式
console.log(this === window); // true

// 严格模式
'use strict';
console.log(this === window); // true

第2步：普通函数中的this行为

普通函数被独立调用时，其 this 的行为受严格模式影响显著。

2.1 非严格模式

默认情况下，全局范围内调用的普通函数中 this 指向 window。

function test() {
  return this === window;
}
console.log(test()); // true

2.2 严格模式

若在函数内部启用严格模式，this 将变为 undefined，这是防止意外污染全局对象的保护机制。

'use strict';
function test() {
  return this === undefined;
}
console.log(test()); // true

第3步：构造函数中的this实例化

当使用 new 关键字调用函数时，JavaScript 会创建一个新对象，并将函数内部的 this 指向这个新实例。实例可以访问构造函数内设置的属性。

function Test() {
  this.number = 1;
}
let test1 = new Test();
console.log(test1.number); // 1

第4步：箭头函数的词法this

箭头函数不绑定自己的 this。它捕获其所在上下文（定义时）的 this 值。这意味着无论何时调用箭头函数，this 都保持不变。

以下示例展示了箭头函数在外层作用域为全局对象时，指向全局 window。

let test = () => {
  return this === window;
};
console.log(test()); // true

若外层上下文已绑定特定对象，箭头函数则继承该绑定：

let obj = { number: 1 };
function foo() {
  // 这里的 this 指向 foo 被调用时的上下文
  return () => {
    return this.number;
  };
}
// 使用 call 改变 foo 的 this 为 obj
let test = foo.call(obj);
console.log(test()); // 1

第5步：对象方法的动态绑定

当函数作为对象的一个属性（即方法）被调用时，this 指向调用该方法的对象。

let obj = {
  number: 1,
  getNumber() {
    return this.number;
  }
};
console.log(obj.getNumber()); // 1

第6步：使用call、apply和bind进行显式绑定

可以通过内置方法强制指定函数运行时的 this 对象。这三者的主要区别在于参数的传递方式和返回值的形式。

• call(thisArg, arg1, arg2, ...)：立即执行函数，参数逐个列出。
• apply(thisArg, [argsArray])：立即执行函数，参数以数组形式传入。
• bind(thisArg, arg1, arg2, ...)：返回一个新函数，需手动调用执行。

let obj = { number: 1 };
function test(num) {
  return this.number + num;
}

// 使用 call，第一个参数是 this，后续是独立参数
console.log(test.call(obj, 1)); // 2 (1 + 1)

// 使用 apply，第二个参数必须是数组
console.log(test.apply(obj, [2])); // 3 (1 + 2)

// 使用 bind，返回新函数
let foo = test.bind(obj, 3);
console.log(foo()); // 4 (1 + 3)

以上就是JavaScript中this指向问题的详细内容，更多关于JavaScript中this规则的资料请关注本站其它相关文章！