在 JavaScript 中,this 关键字是一个非常重要且功能多样的部分,它的值取决于函数的调用方式。理解 this 在不同上下文中的行为对于掌握 JavaScript 非常关键。深入理解 JavaScript 函数调用、事件处理和面向对象编程的基础。由于 this 的值是在运行时基于函数的调用方式动态确定的,因此它在不同的上下文中可能会有不同的值。

1、 全局上下文

在全局执行环境中(在任何函数体外部),this 引用全局对象。在浏览器中,全局对象是 window。

console.log(this === window); // 在浏览器中,这将输出 true
this.a = 37;
console.log(window.a); // 输出 37

2、函数上下文

1)普通函数调用

在非严格模式下,非方法的函数调用中,this 通常指向全局对象。在严格模式下 ("use strict"),this 将是 undefined。

 function f1() {
  return this;
}

console.log(f1() === window);  // 在非严格模式下为 true

2)方法调用

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

const obj = {
  method: function() {
    return this;
  }
};

console.log(obj.method() === obj);  // true

3)构造函数

在构造函数中,this 指向一个新创建的对象。

function MyConstructor() {
  this.a = 11;
}

let obj = new MyConstructor();
console.log(obj.a); // 输出 11

3、显式设置上下文

使用 call、apply 或 bind 方法可以显式地设置 this 的值。

参考文档:Js(Javascript)中的apply方法的使用

1)call 和 apply

这两个方法在调用函数的同时允许你绑定 this 的值。call 接受一个参数列表,而 apply 接受一个参数数组。

function sayHello() {
  return "Hello, " + this.name;
}

const user = { name: 'CJavaPY' };
console.log(sayHello.call(user));  // 使用 call 设置 this
console.log(sayHello.apply(user)); // 使用 apply 设置 this

2)bind

bind 方法创建一个新函数,this 被绑定到指定的对象。

const greet = function(greeting) {
  return greeting + ', ' + this.name;
};

const user = { name: 'CJavaPY' };
const greetEmily = greet.bind(user); console.log(greetEmily('Hello')); // 输出: "Hello, CJavaPY"