this的那些事儿

2023-12-10 08:02:27

this是什么？

在JavaScript中，this是一个特殊的，它指向正在执行的代码所在的上下文。this的值可以是对象、函数或全局对象。

this与执行上下文的关系

每个JavaScript函数都有自己的执行上下文，执行上下文是一个包含变量对象、作用域链和this值的容器。当一个函数被调用时，就会创建一个新的执行上下文，该执行上下文的作用域链是指向父执行上下文的指针。this的值就是当前执行上下文的this值。

this的用法

this可以在JavaScript中用于以下几种情况：

访问对象属性和方法
调用对象方法
构造函数调用
事件处理程序

this的指向

this的指向取决于函数的调用方式。以下是一些this指向的不同情况：

当一个函数作为对象的方法被调用时，this指向该对象。
当一个函数作为函数被调用时，this指向全局对象。
当一个函数作为构造函数被调用时，this指向新创建的对象。
当一个函数作为事件处理程序被调用时，this指向事件的目标元素。

this的示例

以下是一些this的示例：

// 作为对象方法调用
const person = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

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

// 作为函数调用
function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // Hello, my name is undefined.

// 作为构造函数调用
function Person(name) {
  this.name = name;

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

const person1 = new Person("John");
person1.greet(); // Hello, my name is John.

// 作为事件处理程序调用
const button = document.getElementById("button");

button.addEventListener("click", function() {
  console.log(`Hello, my name is ${this.name}.`);
});

button.click(); // Hello, my name is undefined.