解开this混乱之谜，让指向明明白白！

2023-11-08 06:32:35

场景一：构造函数中的this

function Person(name) {
  this.name = name;
  
  setTimeout(() => {
    console.log(this.name); // 输出: undefined
  }, 4000);
}

const a1 = new Person('John');
a1.show(); // 输出: John

在这个例子中，当我们使用new创建Person对象时，this指向新创建的对象a1，因此a1.show()输出"John"。然而，当我们在构造函数中添加一个定时器，让它在4秒后调用this.show()时，输出却变成了"undefined"。

这是因为在箭头函数中，this指向的是其定义时的上下文，而不是调用时的上下文。因此，在定时器回调函数中，this指向的是全局对象（通常是window对象），而不是Person实例。

为了解决这个问题，我们可以使用普通函数来代替箭头函数，或者使用bind()方法来显式绑定this值。

function Person(name) {
  this.name = name;
  
  setTimeout(function() {
    console.log(this.name); // 输出: John
  }.bind(this), 4000);
}

const a1 = new Person('John');
a1.show(); // 输出: John

场景二：原型方法中的this

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

Person.prototype.show = function() {
  console.log(this.name); // 输出: undefined
};

const a1 = new Person('John');
a1.show(); // 输出: John

在这个例子中，当我们通过Person.prototype.show调用show()方法时，this指向的是当前窗口对象（通常是window对象），而不是Person实例。

这是因为在原型方法中，this指向的是调用方法的对象，而不是定义方法的对象。因此，当我们直接调用Person.prototype.show()时，this指向的是全局对象。

为了解决这个问题，我们可以使用箭头函数来代替普通函数，或者使用call()或apply()方法来显式绑定this值。

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

Person.prototype.show = () => {
  console.log(this.name); // 输出: John
};

const a1 = new Person('John');
a1.show(); // 输出: John