深入剖析JS函数调用中this的指向问题

2023-09-28 03:20:27

this的指向问题

在JavaScript函数中，this指向当前执行函数的对象。如果函数是在对象的方法中调用的，那么this指向该对象。如果函数是在函数中调用的，那么this指向该函数的调用者。如果函数是在构造器中调用的，那么this指向新创建的对象。

为了更好地理解this的指向问题，我们来看一些例子：

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

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

const person = new Person("John");

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

在这个例子中，this指向Person对象的实例person，因此this.name等于"John"。

const greet = function() {
  console.log("Hello, my name is " + this.name);
};

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

在这个例子中，greet函数是在全局作用域中调用的，因此this指向全局对象window，this.name等于undefined。

const obj = {
  name: "John",

  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

const greet = obj.greet;

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

在这个例子中，greet函数是在对象obj中调用的，因此this指向obj对象，this.name等于"John"。但是，greet函数被赋给了一个新的变量greet，然后在全局作用域中调用。此时，this指向全局对象window，this.name等于undefined。

方法调用模式

在方法调用模式中，this指向当前执行函数的对象。这是最常见的调用模式。

例如：

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

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

const person = new Person("John");

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

在这个例子中，greet函数是在对象person的方法中调用的，因此this指向person对象。

函数调用模式

在函数调用模式中，this指向全局对象window。这是默认的调用模式。

例如：

function greet() {
  console.log("Hello, my name is " + this.name);
}

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

在这个例子中，greet函数是在全局作用域中调用的，因此this指向全局对象window，this.name等于undefined。

构造器调用模式

在构造器调用模式中，this指向新创建的对象。这是在使用new关键字调用函数时使用的调用模式。

例如：

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

const person = new Person("John");

console.log(person.name); // John

在这个例子中，Person函数是在new关键字的作用下调用的，因此this指向新创建的对象person。

apply调用模式

在apply调用模式中，this指向第一个参数所指定的对象。apply方法接受两个参数：第一个参数是this指向的对象，第二个参数是一个数组，包含要传递给函数的参数。

例如：

function greet(name) {
  console.log("Hello, my name is " + name);
}

const person = {
  name: "John"
};

greet.apply(person, ["John"]); // Hello, my name is John

在这个例子中，greet函数使用apply方法调用，第一个参数是person对象，第二个参数是一个包含"John"的数组。因此，this指向person对象，greet函数被调用时，name参数等于"John"。