Object.getPrototypeOf()混淆

时间:2012-04-04 14:45:57

标签: javascript dom

Object.getPrototypeOf(obj)如何工作?

根据定义,Object.getPrototypeOf(obj)应该返回Object的prototype属性,或者以其他方式与obj.constructor.prototype相同。

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

让我们举一个例子:

>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

实际上它正在返回原型的 proto 属性,根据getPrototypeOf()的定义是不是错了?

>a.constructor.prototype.__proto__
 HTMLElement

2 个答案:

答案 0 :(得分:11)

引自https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Inheritance_Revisited

  

JavaScript对于来自Java或C ++的开发人员来说有点混乱,   因为它全部是动态的,所有运行时,它根本没有类。它' S   所有只是实例(对象)。即使是"类"我们模拟的只是   一个功能对象。


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

所以让你混淆的代码看起来像这样

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

可以翻译成这个

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

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


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

访问它

2)功能在Javascript中也是对象

3)函数也有prototype属性

4)我们可以通过使用关键字new

调用函数来在JavaScript中创建对象

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://stackoverflow.com/a/9220317/474290 还有这个 https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Inheritance_Revisited

答案 1 :(得分:0)

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