javascript - 对 js proto 和分配新属性感到困惑

Question

我有一个简单的对象(实际上是 Sencha Touch 中的一个按钮)。它位于一个名为“something.aButton()”的对象中；

此对象包含名为“view”的属性，其值为“home”；

现在我想将其分配给一个变量，分配一些新属性并将其传递。

我也是这样的:

var c = something.aButton();

现在我分配更多的东西:

c.id = 4;
c.class = 'class';

现在的问题是 c.view 是未定义的，除非我这样做:

c.view = c.view;

这 - 来自 PHP 世界让我感到困惑。我了解原型(prototype)的基础知识，但不明白如何简单地将我的对象分配给一个变量以便于使用和工作。我也不知道所有原始属性，因此在我的代码中不可能像这样重新分配它，而且我不知何故怀疑这是正确的方法。

如果我将“c”转储到我的控制台，我会看到:

Ext.Object.classify.objectClass
class: "class"
id: 4
__proto__: Object
  view: 'home'
  ....

Answer 1

Now I assign some more stuff:

c.id = 4;
c.class = 'class';

我会避免使用标识符class。它是 JavaScript 第 3 版中的保留字，在第 5 版中是“松散”(非严格)代码。

Now the problem is that c.view is undefined unless I do:

c.view = c.view;

它不是未定义的。您要更改的是 c 拥有 自己的 view 属性的副本。如果您只是执行了 console.log(c.view)，即使没有执行上面的分配，您也会在控制台中看到它的值。

原型(prototype)在 JavaScript 中的工作方式是对象以实时方式由原型(prototype)备份。因此，如果您从 c 中获取 view 的值，而 c 没有它的 own 属性 view，检查其原型(prototype)链。但是，如果您分配一个值给 c 上的 view，那么 c 会获得它自己的一个属性 使用该名称，您会在对象转储等中看到它。

所以这是一个简化的例子:

function Foo() {
}
Foo.prototype.bar = "42";

var f = new Foo();
console.log(f.bar); // "42"

目前，我们的对象图如下所示:

+-----------+      +---------------+|     f     |----->| Foo.prototype ||-----------|      |---------------||           |      | bar: "42"     |+-----------+      +---------------+

So there we have f, which is backed by the prototype Foo.prototype. When we ask f for the property bar, since f doesn't have a property of its own by that name, the JavaScript engine looks to its prototype to see if it does. If so, that value is used. (And this continues if the prototype has a prototype, etc.)

Now suppose we do this:

f.bar = "43";
console.log(f.bar); // "43"

因为 f 现在有其自己的 bar 属性，JavaScript 引擎使用该属性的值。现在我们的图表看起来像这样:

+-----------+      +---------------+|     f     |----->| Foo.prototype ||-----------|      |---------------|| bar: "43" |      | bar: "42"     |+-----------+      +---------------+

We can remove f's property:

delete f.bar;       // `delete` removes "own" properties from objects
console.log(f.bar); // "42"

...因此从 f 中检索 bar 再次查看原型(prototype)，因为 f 没有名为 栏。我们回到原来的对象图:

+-----------+      +---------------+|     f     |----->| Foo.prototype ||-----------|      |---------------||           |      | bar: "42"     |+-----------+      +---------------+

Now the fun bit: Suppose we change the prototype's property?

Foo.prototype.bar = "baz";
console.log(f.bar); // "baz"

因为 f 没有 bar 属性，引擎会查看原型(prototype)。这就是我所说的实时系统的意思。