对象的javascript原型(prototype)

Question

原型(prototype)如何工作？为什么不能从 e 对象访问“xc”？

请看代码，看评论，我在chorme中测试它

var x={a:"xa",b:"xb",c:"xc"};
var e={a:"ea",b:"eb"};
console.log(Object.prototype); // this is {} why? i am expecting it to be null
console.log(e.prototype);
e.prototype=x;
console.log(e.prototype);
console.log(x.c);
console.log(e.c);//this is undefined , why?  i am expecting it to be "xc"
console.log(e.a);
console.log(e.b);
console.log(e.prototype.a);
console.log(e.prototype.b);

我首先认为它在 css 合并中很有用，后来我认为解决依赖关系，然后重新编写 css 更合理，但是知识是真实的。非常感谢。

var css={

    'classSelectorExpressionIDOnly1':{
        css_Ruls_name1:xxxx,
        css_Rulss_name2:xxxx

    }

    'classSelectorExpressionIDOnlyX':{
        css_Ruls_name1:xxxx,
        css_Rulss_name9:xxxx

    }

    'classSelectorExpressionIDOnly2':{ '()inherit':["classSelectorExpressionIDOnly1","classSelectorExpressionIDOnlyX"]
        css_Ruls_name3:xxxx,
        css_Rulss_name5:xxxx

    }


}


var mergeResult = Object.create(css.classSelectorExpressionIDOnly2);
for(var entry in mergeResult){
    mergeResult[entry]= mergeResult[entry];
}
mergeResult.__proto__=css.classSelectorExpressionIDOnly1;
for(var entry in mergeResult){
    mergeResult[entry]= mergeResult[entry];
}
mergeResult.__proto__=css.classSelectorExpressionIDOnlyX;
for(var entry in mergeResult){
    mergeResult[entry]= mergeResult[entry];
}

------依赖重写--------

.classSelectorExpressionIDOnly1,.classSelectorExpressionIDOnly2{
        css_Ruls_name1:xxxx,
        css_Rulss_name2:xxxx
}
.classSelectorExpressionIDOnlyX,.classSelectorExpressionIDOnly2{
        css_Ruls_name1:xxxx,
        css_Rulss_name9:xxxx
}
.classSelectorExpressionIDOnly2{
        css_Ruls_name3:xxxx,
        css_Rulss_name5:xxxx
}

Answer 1

这不是 .prototype属性(property)是为了。 尽管有这个名字，.prototype函数的属性实际上并不是您习惯使用的对象的原型(prototype)。 这是关于 JavaScript 最难理解的事情之一 ，所以不只是你。

理解 JavaScript 原型(prototype)系统的关键是 new运算符创建两个对象，而不是一个 .我将从四个变量的 Angular 来讨论这个问题:

[[我的原型(prototype)]]
对象的原型(prototype)。每个对象理论上都有一个(尽管对于某些对象，它可能是未定义的)。
[[构造函数]]
使用 New 运算符调用的函数
[[新对象]]
最终将被返回的对象
[[新原型(prototype)]]
将成为 [[newObject]].[[myPrototype]] 的对象

请注意，这些不是有效的 JavaScript 名称(事实上，它们在大多数编程语言中都不是有效的名称)。所有这些都发生在幕后，大多数实现也不使用这些名称。我这样做是为了表明您通常看不到这些物体。

当您使用 new运算符，JavaScript 大致执行以下步骤。

创建一个对象 [[newPrototype]]。

将 [[newPrototype]].[[myPrototype]] 设置为 [[Constructor]].prototype

创建一个对象 [[newObject]]。

将 [[newObject]].[[myPrototype]] 设置为 [[newPrototype]]

将 [[newObject]].[[myPrototype]].constructor 设置为 [[Constructor]]

调用 [[Constructor]]，将 [[newObject]] 作为“this”。

请注意，[[newObject]].[[myPrototype]] 不是 [[newObject]] 或 [[Constructor]].prototype 的完美匹配。这就是为什么我们需要它们之间的第三个对象:它携带您想要继承的信息(通过 [[newPrototype]].[[myPrototype]])，但它也携带特定于您正在创建的对象的信息(在 [[新对象]].构造函数)。

所以我们得到了 .prototype功能是为了。它不是函数的 [[myPrototype]]，也不是您使用 new 创建的对象的 [[myPrototype]] .它实际上是原型(prototype)链中的两个级别，而不是一个。

我希望这个解释可以帮助你理解 .prototype功能是为了。这不是简单的事情，也不是每个解释都适合每个人。这就是为什么我们在这里有这么多解释的部分原因。

首次创建对象时，可以直接用Object.create()设置其原型(prototype) .此功能适用于 IE9 及更高版本(以及所有其他现代浏览器)，如果您需要使用旧版浏览器，可以使用 polyfill。 要稍后查看该原型(prototype)，请使用 Object.getPrototypeOf() ，它也有不错的浏览器支持(尽管 IE 仅在版本 9 和更高版本中支持它)。仅使用这两个函数，您可以像这样创建对象:

var x = {a:"xa",b:"xb",c:"xc"};
var e = Object.create(x);
x.a = "ea";
x.b = "eb";
console.log(Object.getPrototypeOf(Object));
console.log(Object.getPrototypeOf(e));
console.log(x.c);
console.log(e.c);//this is undefined , why?  i am expecting it to be "xc"
console.log(e.a);
console.log(e.b);
console.log(Object.getPrototypeOf(e).a);
console.log(Object.getPrototypeOf(e).b);    

一旦创建了一个对象，还没有一个标准的方法来重置它的原型(prototype) . ECMAScript 6 定义了一个(Object.setPrototypeOf() 函数)，但到目前为止只有 Chrome 和 Firefox 支持它:IE 和 Safari 不支持。不过，如果没关系，您可以执行以下操作:

var x = {a:"xa",b:"xb",c:"xc"};
var e = {a:"ea",b:"eb"};
console.log(Object.getPrototypeOf(object));
console.log(Object.getPrototypeOf(e));
Object.setPrototypeOf(e, x);
console.log(Object.getPrototypeOf(e));
console.log(x.c);
console.log(e.c);
console.log(e.a);
console.log(e.b);
console.log(Object.getPrototypeOf(e).a);
console.log(Object.getPrototypeOf(e).b);

有一种非标准的方法可以重置现有对象的原型(prototype)，现在它甚至享有良好的浏览器支持 .为此，您设置 .__proto__任何标准对象的属性。你可以像这样使用它:

var x = {a:"xa",b:"xb",c:"xc"};
var e = {a:"ea",b:"eb"};
console.log(object.__proto__);
console.log(e.__proto__);
e.__proto__ = x;
console.log(e.__proto__);
console.log(x.c);
console.log(e.c);
console.log(e.a);
console.log(e.b);
console.log(e.__proto__.a);
console.log(e.__proto__.b);

现在，关于你的最后一个问题:为什么是 Object.prototype等于{}，而不是未定义？因为 Object构造函数有 .prototype属性，它成为通过它创建的所有对象的默认原型(prototype)。规范将此对象称为 [[ObjectPrototype]]，它是 .hasOwnProperty() 之类的地方。功能直播。