JavaScript中的 this 是一个非常重要的概念,它指向当前执行上下文的对象。由于JavaScript是一门动态语言,this 的指向在运行时才能确定,可能会因为调用方式和执行环境的不同而有所变化。

this 的指向可以通过四种调用方式来决定:

  • 作为函数调用时,this 指向全局对象(浏览器中为window对象,Node.js中为 global 对象)。
  • 作为方法调用时,this 指向调用该方法的对象。
  • 使用 call()apply() 方法调用时,this指向第一个参数传入的对象。
  • 使用new关键字调用构造函数时,this指向新创建的对象。

除了上述四种方式,还有一些特殊情况需要注意,例如箭头函数中的 this 指向是定义函数时的上下文,不会随着调用环境的改变而改变。

总之,JavaScript中的this是一个非常灵活和有用的概念,可以根据不同的调用方式来决定其指向,需要开发者在实际开发中灵活应用。

举一个具体的例子,假设有一个对象 person,它有两个方法 sayHellointroduce

const person = {
    name: "Quintion",
    age: 32,
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    },
    introduce() {
        console.log(`I'm ${this.age} years old.`);
    },
};

如果以方法调用的方式调用 sayHello()introduce()

person.sayHello(); // Hello, my name is Quintion
person.introduce(); // I'm 32 years old.

此时 this 分别指向 person 对象,因为这两个方法是在 person 对象中定义的。

如果以函数调用的方式调用 sayHello()introduce()

const sayHello = person.sayHello;
const introduce = person.introduce;

sayHello(); // Hello, my name is undefined
introduce(); // I'm undefined years old.

此时 this 指向全局对象,因为函数调用是在全局上下文中执行的。由于全局对象并没有 nameage 属性,所以输出结果为 undefined

如果将上面的函数使用 call() 方法来调用,如下:

const sayHello = person.sayHello;
const introduce = person.introduce;

sayHello.call(person); // Hello, my name is Quintion
introduce.call(person); // I'm 32 years old.

此时 this 指向 person 对象,因为在 call() 方法的第一个参数中传入了 person 对象。

需要注意的是,如果在严格模式下使用函数调用方式,this 指向的是 undefined,而非全局对象。