javascript原型 [英] javascript prototype

问题描述

我试图了解js prototype属性：我的示例代码

I AM trying to understand js prototype property: my sample code

function Container(param) {
    this.member = param;
}

var newc = new Container('abc');


Container.prototype.stamp = function (string) {
    return this.member + string;
}

document.write(newc.stamp('def'));

function Box() {
    this.color = "red";
    this.member = "why";
}

Container.prototype = new Box();
Box.prototype.test = "whatever";
var b = new Box();

document.write(newc.test);

此处最后一行未定义 - 即使Container的原型是Box，Box的原型也有属性测试，为什么在Box中测试的newc不起作用？任何人都可以解释'Prototype'在我的上下文中是如何工作的。

here the last line is undefined - even though Container's prototype is a Box and Box's prototype has a property test, why is the newc which refers to test in Box doesnt work? can any one please explain how the 'Prototype' works in my above context.

谢谢......

推荐答案

如果您想知道为什么它的行为方式，而不仅仅是修复代码。所以这就是发生了什么。

If sounds like you want to know WHY it is behaving the way it is, and not just "fix" the code. So here's what's going on.

如您所见，如果您更改容器的原型，您实际上将更改已实例化的新对象和对象的属性。所以：

As you saw, if you change the prototype of "Container", you will actually change the properties for new objects AND objects already instantiated. So:

function Container(param) {
    this.member = param;
}

var newc = new Container('abc');

// setting a new property of the prototype, after newc instantiated.
Container.prototype.stamp = function (string) {
    return this.member + string;
}

// This already-instantiated object can access the stamp function
document.write(newc.stamp('123')); // output: abc123

所以上面没有问题，只要你不打电话在定义之前的新方法。现在是下一点。将其添加到上面：

So there's no problem with the above, as long as you don't call the new method before it's defined. Now the next point. Add this to the above:

// Our Box object
function Box() {
    this.color = "red";
    this.member = "why";
}

Container.prototype = new Box();
var newd = new Container('fgh');
document.write(newd.stamp('456')); // output: ERROR

错误！但这是有道理的，对吧？你完全消灭了容器原型并用Box中的那个取代了它，它没有印章功能。

Error! But that makes sense, right? You totally wiped out the "Container" prototype and replaced it with the one from "Box", which has no "stamp" function.

我会假设你想要的盒子继承自容器。从命名约定来看，这是合乎逻辑的。如果你想这样做，用这个替换上一节：

I am going to assume you want "Box" to inherit from "Container". That would be logical from the naming convention. If you want to do that, replace the previous section with this:

// Our Box object
function Box() {
    this.color = "red";
    this.member = "why";
}

// This inherits from Container. Note that we can
//   do this before or after we declare "Box"
Box.prototype = new Container();

Box.prototype.test = "Whatever";
var b = new Box("jkl"); // note: "jkl" is ignored because "Box" sets "member" to "why"

document.write(b.test); // output: Whatever
document.write("<br>");
document.write(b.stamp("345")); // output: why345

所以现在我们有了一个可以调用自己的方法和参数的Box ，并且还从它的父容器中调用它们。

So now we have a "Box" that can call its own methods and parameters, and also call them from its parent "Container".

所以大局观是一个对象将查看它自己的原型以获取方法或其他东西，如果它在那里找不到它会看到它继承的东西的原型，等等。另一个重点是在原型中设置某些东西使它在该对象的所有未来AND当前实例中立即可用。

So the big picture is that an object will look at its own prototype for a method or something, and if it doesn't find it there it will look in the prototype of the thing it inherited from, and so on. The other big point is that setting something in the prototype makes it immediately available in all future AND current instances of that object.

这篇关于javascript原型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！