Object.getPrototypeOf() 混淆

Posted 2023-02-22

【中文标题】Object.getPrototypeOf() 混淆

【英文标题】：Object.getPrototypeOf() confusion

【发布时间】：2012-04-18 07:18:02

【问题描述】：

Object.getPrototypeOf(obj) 是如何工作的？

根据定义 Object.getPrototypeOf(obj) 应该返回 Object 的原型属性，或者以另一种方式它与 obj.constructor.prototype 相同。

使用 new 创建的对象使用其构造函数的原型属性值作为其原型。

举个例子：

>element = document.getElementById("test")

>a = Object.getPrototypeOf(element)
htmlDivElement

假设 HTMLDivElement 是元素的原型。

>a.constructor.prototype
HTMLDivElement

所以 a.constructor.prototype 是 HTMLDivElement 所以 Object.getPrototypeOf(a) 应该返回 HTMLDivElement 但它返回 HTMLElement。我完全对 getPrototypeOf() 的定义感到困惑。

>b = Object.getPrototypeOf(a)

HTMLElement ----> 为什么？ a.constructor.prototype 是 HTMLDivElement

其实是返回prototype的proto属性，按照getPrototypeOf()的定义是不是错了？

>a.constructor.prototype.__proto__
 HTMLElement

【参考方案1】：

var elem =  document.getElementsByTagName("div")[0],
a = Object.getPrototypeOf ( elem );
console.log( elem.__proto__ ); //HTMLDivElement
console.log( a ); // HTMLDivElement
console.log( a.__proto__ ); //HTMLElement
console.log( Object.getPrototypeOf ( a ) ); //HTMLElement

所以Object.getPrototypeOf返回object.__proto__（object.constructor.prototype）

【讨论】：

object.__proto__ 和 object.constructor.prototype 绝对不一样..所以我没有得到你逻辑的任何部分。

【参考方案2】：

引用https://developer.mozilla.org/en/Core_javascript_1.5_Guide/Inheritance_Revisited

对于来自 Java 或 C++ 的开发人员来说，JavaScript 有点令人困惑， 因为它都是动态的，都是运行时的，而且它根本没有类。它是 所有只是实例（对象）。甚至我们模拟的“类”也只是 一个函数对象。

---

注意原型也是一个对象，所以它也可以有自己独特的原型

所以让你感到困惑的代码看起来像这样

a = Object.getPrototypeOf(element)
b = Object.getPrototypeOf(a)

可以翻译成这样

a = element.__proto__
b = element.__ptoto__.__proto__ 

我认为现在很清楚a != b

---

1) JavaScript 中的每个对象都有一个原型，您可以通过__proto__ 属性访问它

2) Function也是Javascript中的object

3) 函数也有一个prototype 属性

4) 我们可以在 JavaScript 中通过使用关键字new 调用函数来创建对象

4) 函数prototype 是初始 __proto__ 用于由它们创建的任何对象

---

要创建新对象，我们可以这样写

//here we define a function
function SomeFunctionThatCreateObject() 
    this.someStringProperty = "blablabla";
 

var obj = new SomeFunctionThatCreateObject(); //we create new object with function

var p = Object.getPrototypeOf(obj);

这段代码等于这个

var SomeFunctionThatCreateObject = function(@this) 
    @this.someStringProperty = "blablabla";
    return @this;
;

SomeFunctionThatCreateObject.prototype = ; //note that prototype is also an object

var obj = ;

obj = SomeFunctionThatCreateObject(obj);

obj.constructor = SomeFunctionThatCreateObject;

obj.__proto__ = SomeFunctionThatCreateObject.prototype;

var p = obj.__proto__;

---

PS：也读过这个 https://***.com/a/9220317/474290 和这个 https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Inheritance_Revisited