this: 函数的执行主体

2023-11-14 10:20:45

this的概念

this作为函数的执行主体，是指函数所属的对象。在JavaScript中，this的含义取决于函数的调用方式和上下文。函数可以以以下四种方式调用：

作为对象的方法调用 ：当函数作为对象的方法调用时，this指向调用函数的对象。例如：

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

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

作为独立函数调用 ：当函数作为独立函数调用时，this指向全局对象（在浏览器中是window对象）。例如：

function greet() {
  console.log(`Hello, world!`);
}

greet(); // 输出：Hello, world!

使用箭头函数调用 ：当函数作为箭头函数调用时，this指向其外层函数的this。例如：

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

person.greet(); // 输出：Hello, my name is undefined.

使用call、apply或bind改变this的指向 ：可以使用call、apply或bind方法来改变函数的this指向。例如：

const person = {
  name: "John"
};

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

greet.call(person, "Hello"); // 输出：Hello, my name is John.
greet.apply(person, ["Hello"]); // 输出：Hello, my name is John.
const boundGreet = greet.bind(person);
boundGreet("Hello"); // 输出：Hello, my name is John.

this的应用

this在JavaScript中有很多应用，包括：

事件绑定 ：当事件发生时，this指向触发事件的元素。例如：

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log(`The button with ID ${this.id} was clicked.`);
});

函数执行 ：当函数执行时，this指向调用函数的对象。例如：

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

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

箭头函数的上下文中没有this ：箭头函数没有自己的this，它继承外层函数的this。例如：

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

person.greet(); // 输出：Hello, my name is undefined.

构造函数时的this ：当构造函数被调用时，this指向新创建的对象。例如：

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

const person = new Person("John");

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

基于call、apply和bind改变this的指向 ：可以使用call、apply或bind方法来改变函数的this指向。例如：

const person = {
  name: "John"
};

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

greet.call(person, "Hello"); // 输出：Hello, my name is John.
greet.apply(person, ["Hello"]); // 输出：Hello, my name is John.
const boundGreet = greet.bind(person);
boundGreet("Hello"); // 输出：Hello, my name is John.