JavaScript中的原型对象继承

Question

So I have this example that I have created and I have a question about why my child object is behaving the way it is. I am creating a Cat object and creating an instance of that object names Kat. I am then using the object() method below to extend Kat to create an object called Poe .

function object(o) {
    function f() {};
    f.prototype = o;
    return new f();
}

My question is why does Poe seem to share private instance var and methods with Kat, even when Poe's public vars have been overwritten? Also, these public methods work fine with the prototype public methods.

http://jsfiddle.net/ka_tee_jean/5aPT2/

Answer 1

Setting the prototype will cause the new object to delegate to the one passed in for properties not defined in it. The constructor doesn't run for the child object, so it will initially have some undefined variables:

function object(o) {
    function f() {};
    f.prototype = o;
    return new f();
}

var object1 = { a: 1 };
var object2 = object(object1);

object1.a = 2
console.log(object2.a); // 2

If you want independent properties, then you need to copy them like:

function object(o) {
    var newObj = {};
    for(var key in o) {
        newObj[key] = o[key];
    }
    return newObj;
}

But the private instance variables are being accessed from a closure. Any copy of the same function will use the same private variable. You would need use something like that.is_bored = 0 to define the variables instead.

Answer 2

You may also want to look into changing your current Cat function into an true object. By having it as a function you are blending classical inheritance with prototypical. Remember your current prototypical clone function (which you've labeled object) will create a new Class for you, hence the

return new f();

Here is an example of how I would rewrite this to better follow prototypical inheritance design patterns.

http://jsfiddle.net/scottcarlson/Dfnn3/2/