javascript - 对闭包中的这种 javascript 行为感到困惑

Question

更多地了解 Javascript 和 OO 编程，但我不理解这里的这种行为为什么我的 ojbect(myUser 无法访问属性 this.first_name 作为“jon”而是未定义(在屏幕截图中以红色突出显示在底部)。这是有问题的代码片段:

function User(first_name, last_name){
    this.first_name=first_name;
    this.last_name=last_name;
}

// left in for completeness
User.prototype = {
    constructor: User,
    sayName: function(){
        console.log("My Name: " + this.first_name + " and " + this.last_name);
    }

}

User.prototype.whoWhat = function(){
    console.log(this.first_name + " I want to tell you now " + Math.random());
}

var myUser=new User('jon', 'johnson');
myUser.sayName();
myUser.whoWhat();
setInterval(myUser.whoWhat, 3000);

这是控制台输出:

Answer 1

问题是您的 setInterval() 回调失去了与您构建的对象的关联。当属性值用于进行函数调用时，函数与对象的关联作为属性值仅会影响this。在这里，您只是引用该值(即，获取对函数的引用)。当系统调用该函数时，this 将是 undefined(或 window 对象，具体取决于“严格”模态)。

您可以使用包装函数确保this 是正确的值:

  setInterval(function() { myUser.whoWhat(); }, 3000);

在较新的浏览器中，您可以使用函数原型(prototype)中名为 bind() 的方法:

  setInterval(myUser.whoWhat.bind(myUser), 3000);

虽然 bind() 也可以做其他事情，但它(对于您的目的)具有相同的效果。

要记住的关键是，在 JavaScript 中，函数和对象之间没有长期关系。对函数的引用只是普通值，不会因为函数恰好被定义为原型(prototype)对象或对象字面量的属性而发生任何特殊情况。唯一重要的是实际调用函数的方式。