为什么使用原型添加新方法无法按预期工作

Question

所以我是自学开发人员。我学到了很多php，并开始做javascript。我被介绍给javascript一流的函数等等。我了解到您可以通过原型将新属性(var 或函数(添加到类中，原型来自我的理解对象，该对象具有所有其他对象(如变量、函数(。在尝试原型时，我遇到了以下代码问题：

function Fox(color) {
this.color = color;
}
Fox.prototype.speak = function() {
console.log('I am ' + this.color);
};
var myFox = new Fox('blue');
window.setTimeout(myFox.speak, 1000);

在这种情况下，this.color是未定义的，我很难理解为什么。它像这样工作，但没有时间延迟。我认为 setTimeout 无法正常工作是因为它是如何工作的，将函数(第一类(作为参数而不是执行函数(就像你输入 (( 一样(。再次不知道为什么这会返回值蓝色。

/* This works but with no time delay: */
window.setTimeout(myFox.speak(), 1000);
/* returns blue */

Answer 1

你的问题 - 如果是第一种情况：你失去了上下文 试试吧：

function Fox(color) {
this.color = color;
}
Fox.prototype.speak = function() {
console.log('I am ' + this.color);
};
var myFox = new Fox('blue');
setTimeout(myFox.speak.bind(myFox), 1000);

您也可以在方法中使用回调：

function Fox(color) {
this.color = color;
}
Fox.prototype.speak = function() {
console.log('I am ' + this.color);
};
var myFox = new Fox('blue');
setTimeout(function(){myFox.speak()}, 1000);