用JavaScript制作原型拼图

我无法理解为什么下面的代码生成“Smith”作为输出，而不是“Smith Foo”。你能解释一下为什么会这样吗？我无法理解原型链中的

childFoo

属性查找是如何找到child原型的

var parent = {};
var child = Object.create(parent); 
Object.getPrototypeOf(parent).Surname = 'Smith';  

var parentFoo = function parentFoo() {};
var childFoo = new parentFoo(); //Object.create(parentFoo);   
Object.getPrototypeOf(parentFoo).Surname = 'Smith Foo';   

console.log(childFoo.Surname);
// this outputs 'Smith' only.

---

我认为，这里混乱的根源是

getPrototypeOf（a）

和

a.prototype

之间的差异

• a.prototype

  是用于创建

  a

  实例的原型，如

  newa（）

• Object.getPrototypeOf（a）

  返回用于创建

  a

  的原型，如

  a=new AClass（）

因此，当您执行

a=new AClass（）

时，

对象.getPrototypeOf（a）

等于

AClass.prototype

，即用于创建

a

的原型

Object.getPrototypeOf(parent).Surname = 'Smith';

这里，

getPrototypeOf

返回用于创建

{}

的原型，即

Object.prototype

。这一行相当于

Object.prototype.Surname='Smith'

Object.getPrototypeOf(parentFoo).Surname = 'Smith Foo';

这里，

getPrototypeOf

返回用于创建

parentFoo

的原型，这是一个

函数（）{}

：返回值为

函数.prototype

。这一行相当于

Function.prototype.Surname='Smith Foo'

console.log(childFoo.Surname);

childFoo

是

parentFoo

的实例，但未修改

parentFoo.prototype

，因此它是一个空对象（内置对象除外）。因此，

childFoo.name

进入原型链，最后到达

Object.prototype

——所有JS对象继承的根。在这里，它可以找到您先前定义的

姓氏

属性，

'Smith'

Object.getPrototypeOf(parentFoo).Surname = 'Smith Foo';

如果您使用

（function（）{}）.namite

，您将看到

'Smith Foo'

字符串，因为它是在

function.prototype

上定义的

---

（这可能是JS中非常棘手的一部分，因此我希望这是有意义的！）

您确实使用以下代码行更改了每个对象继承的对象的原型（除非明确指定）：

Object.getPrototypeOf(parent).Surname = 'Smith';  

这里我们可以看到devtools，它显示您在对象原型上使用了一个值为Smith的属性姓氏

然后使用以下代码行：

Object.getPrototypeOf(parentFoo).Surname = 'Smith Foo'; 

您将字符串“Smith Foo”作为函数原型的姓氏属性。以下是chrome开发工具中的外观：

以下是您应该采取的措施，以获得所需的结果：

var-parent={}；
var child=Object.create（父级）；
Object.getPrototypeOf（父类）。姓氏='Smith'；
var parentFoo=函数parentFoo（）{}；
var childFoo=新的parentFoo（）//创建（parentFoo）；
//将parentFoo更改为childFoo
Object.getPrototypeOf（childFoo）.姓氏='smithfoo'；
console.log（childFoo.姓氏）以下是最终答案：


函数parentFoo（）{}；
var childFoo=新的parentFoo（）//创建（parentFoo）；
parentFoo.uuu proto_uuuu.姓氏='Smith Foo'；
console.log（childFoo.姓氏）；
console.log（parentFoo.\uuuu proto\uuu）；
parentFoo.uuu proto_uuu.uuuu proto_uuu.姓氏='Smith Foo'；
console.log（childFoo.姓氏）；
console.log（parentFoo.\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu）
您更改了
parentFoo
的原型而不是
childFoo
是，但我使用新的parentFoo（）创建了childFoo。childFoo的根原型也是parentFoo的根原型，这不是和普通对象一样吗？更糟糕的是，我无法通过Object.getPrototypeOf（）函数找到child和childFoo的任何通用原型。是的，我正在试图解释为什么您要这样做：p
new parentFoo
与
Object.create（parentFoo）
做的事情完全不同？！为什么在示例中使用
Object.getPrototypeOf
？特别是因为
Object.getPrototypeOf（parent）
是
Object.prototype
，您绝对不应该修改它。