Js(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"