高维度解析 JavaScript 当中的 this 指向

2023-12-15 20:10:09

全局上下文中的 this

在全局上下文中，this 等于 window 对象。这意味着在全局上下文中，你可以直接使用 this 来访问 window 对象的属性和方法。例如：

console.log(this.location); // 输出当前窗口的地址
this.alert('Hello World!'); // 弹出一个警报框，显示 "Hello World!"

函数中的 this

在函数中，this 的指向取决于函数的调用方式。如果函数是以普通函数的方式调用，那么 this 等于全局对象 window。例如：

function sayHello() {
  console.log(this); // 输出 window 对象
}

sayHello(); // 输出 window 对象

如果函数是以方法的方式调用，那么 this 等于该方法所属的对象。例如：

const person = {
  name: 'John',
  sayHello: function() {
    console.log(this); // 输出 person 对象
  }
};

person.sayHello(); // 输出 person 对象

箭头函数中的 this

箭头函数中的 this 总是等于其外层函数的 this。这意味着箭头函数不能改变 this 的指向。例如：

const person = {
  name: 'John',
  sayHello: () => {
    console.log(this); // 输出 person 对象
  }
};

person.sayHello(); // 输出 person 对象

类中的 this

在类中，this 等于该类的实例。这意味着在类的方法中，你可以使用 this 来访问该实例的属性和方法。例如：

class Person {
  constructor(name) {
    this.name = name;
  }

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

const john = new Person('John');
john.sayHello(); // 输出 "Hello, my name is John"

方法中的 this

在方法中，this 等于该方法所属的对象。这意味着在方法中，你可以使用 this 来访问该对象的属性和方法。例如：

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

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

实例中的 this

在实例中，this 等于该实例本身。这意味着在实例中，你可以使用 this 来访问该实例的属性和方法。例如：

class Person {
  constructor(name) {
    this.name = name;
  }

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

const john = new Person('John');
console.log(john.name); // 输出 "John"
john.sayHello(); // 输出 "Hello, my name is John"

原型中的 this

在原型中，this 等于该原型的实例。这意味着在原型中，你可以使用 this 来访问该原型的实例的属性和方法。例如：

class Person {
  constructor(name) {
    this.name = name;
  }

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

const person = new Person('John');
console.log(person.name); // 输出 "John"
person.sayHello(); // 输出 "Hello, my name is John"

console.log(Person.prototype.name); // 输出 undefined
Person.prototype.sayHello(); // TypeError: Person.prototype.sayHello is not a function