JavaScript中的this指向谁？

2023-09-09 01:41:31

JavaScript中的this

在JavaScript中，this是一个，它代表函数内部的当前对象。this的指向可以通过以下几种方式确定：

全局环境中的函数调用：
- 在全局环境中，如果函数没有被任何对象调用，那么this指向全局对象（在浏览器中为window对象，在Node环境中为global对象）。
- 在非严格模式下，如果函数在全局环境中被调用，并且没有使用箭头函数，那么this指向全局对象。
- 在严格模式下，如果函数在全局环境中被调用，无论是否使用箭头函数，this都指向undefined。
对象方法的调用：
- 当函数作为对象的方法被调用时，this指向调用该方法的对象。
- 例如，以下代码中，当调用person对象的方法sayHello时，this指向person对象：

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // 输出：Hello, my name is John

构造函数的调用：
- 当函数作为构造函数被调用时，this指向新创建的对象。
- 例如，以下代码中，当调用Person构造函数时，this指向新创建的person对象：

function Person(name) {
  this.name = name;
}

const person = new Person('John');

console.log(person.name); // 输出：John

箭头函数的调用：
- 箭头函数没有自己的this，它继承外层函数的this。
- 例如，以下代码中，箭头函数sayHello继承了person对象的方法sayHello的this，因此this指向person对象：

const person = {
  name: 'John',
  sayHello: function() {
    const sayHello = () => {
      console.log(`Hello, my name is ${this.name}`);
    };

    sayHello();
  }
};

person.sayHello(); // 输出：Hello, my name is John

严格模式下的this

在严格模式下，this的指向更加严格。在全局环境中调用函数，无论是否使用箭头函数，this都指向undefined。例如，以下代码在严格模式下会报错：

"use strict";

function sayHello() {
  console.log(`Hello, my name is ${this.name}`);
}

sayHello(); // 报错：TypeError: Cannot read properties of undefined (reading 'name')