javascript - 了解这段 javascript 代码的输出

Question

在使用 C/C++、Java 进行编程后，我发现很难理解以下程序的输出。

http://jsfiddle.net/iamrohitbanga/nubgw/

var foo = function() {}
foo.prototype.out = function() {
    console.log(this.num);
}
var bar = function() {};

var f = new foo();
f.num = 1;
var b = new bar();
b.num = 2;

console.log(this);           // 1
f.out();                     // 2
foo.prototype.out.call(b);   // 3
foo.prototype.out.call(bar); // 4

我看到以下输出

Window
1
2
undefined

我已经用 javascript 编码有一段时间了，可以理解一些概念，但并不是所有事情都对我来说很清楚。

我有一个粗略的了解。我觉得在全局空间中，这指向窗口，因此第一行输出是清晰的。对于第二行，我认为由于函数 out 是在 f 上调用的，因此 out 中的 this 值是 f。对于第三个，我的感觉是，通过调用输入为 b 的函数，-this 的值设置为 b。对于第四个 bar 是一个全局对象，其字典中没有名为“num”的成员。

我的理解正确吗？有人可以解释“这个”和“原型(prototype)”在这个程序中的作用吗？我发现原型(prototype)的语法有点晦涩。同样在 Chrome 中，当我在 Gmail 窗口中按 F12 并将程序粘贴到那里时。第三行输出是未定义的，不是2。但是在jsfiddle中它是2。这看起来有点令人毛骨悚然。为什么不一样？

Answer 1

<小时/>

console.log(this)

你的假设是正确的。您的程序在全局范围内运行，在浏览器中是窗口。

<小时/>

f.out();

我不确定 C/C++ 或 Java 中是否存在原型(prototype)的概念。本质上，对象构造函数的原型(prototype)是对象可以继承的东西。向 foo 的原型(prototype)添加函数使其可用于 foo 的所有实例。

在本例中，您在程序的前面创建了一个名为 f 的 foo 实例。然后，将 f 的一个名为 num 的属性设置为 1。

out，通过 foo 原型(prototype) console.log 的扩展可用于 f 的函数正在调用其上下文的对象的 num 属性(在本例中为 f)。

因此，f.out(); 打印 1。

<小时/>

foo.prototype.out.call(b);

call 是 Function 对象原型(prototype)上的函数。 call 在第一个参数的上下文中调用函数。本质上，这一行 (foo.prototype.out.call(b);) 与将 b.out(); 作为 b 执行相同作为上下文参数传递。

此行输出的其余解释与最后一行的全部解释相同

<小时/>

foo.prototype.out.call(bar);

在最后一行中，您将在 bar 上调用 out。 bar 是一个 Function 对象。 bar 没有 num 属性，因此 bar.num 是 未定义。

这并不是说您不能像使用 f 和 b 那样向 bar 添加属性。函数也是对象。因此，您可以按照与 f 和 b 完全相同的方式向 bar 添加属性。添加 bar.num = 3 将产生您想要的结果。或者至少我希望你认为它会......