javascript - 理解原型(prototype)和这个

Question

这个问题已经有答案了:

How does JavaScript .prototype work? (26 个回答)

已关闭 9 年前。

据我所知，“this”应该保存实际用“this”触发函数的对象的属性和函数。但在下面的例子中它还包含构造函数“foo”的属性，为什么？

function foo(id)
{
   var self = this;
   this.foo = "foo";
   this.element = document.getElementById(id);
   this.element.addEventListener("keyup", function(){self.bar();}, false);
}

foo.prototype.bar = function()
{
   console.log(this.element.value);
};
new foo("anyInputElement");

Answer 1

在 JavaScript 中，关键在于您是实例化函数还是仅仅调用函数。仅在前者的情况下它才是构造函数。您可能已经知道，区别在于 new 是否关键字用在函数引用之前。

它控制构造函数中的那些属性是的属性。

因此，在您的情况下，它们不是构造函数的属性(这是一种无益的思考方式)；相反，它们是实例的属性。

调用的函数在 window 中执行作用域，因此如果您仅调用函数，this.foo等将在window上设置属性.

但是，如果实例化该函数，它们将成为实例的属性，因为实例是从实例化而不是调用的函数(构造函数)隐式返回的。所以:

调用:属性在默认上下文 window 上设置:

function static_func() { this.foo = 'bar'; }
static_func();
window.foo; //'bar'

实例化:在返回的实例上设置属性

function constructor(val) { this.foo = val; }
var instance = new constructor('bar');
window.foo; //undefined
instance.foo; //'bar'