通过原型继承JavaScript

Question

There is the most popular JavaScript method for inheritance:

function extend(Child, Parent) {
    var F = function() { }
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.superclass = Parent.prototype;
}

I'm learning JS now, but I have a lot of Java experience and this inheritance model seems some diffucult for me. Why I can't do the following thing:

function extend(Child, Parent) {
    Child.prototype = Parent.prototype; 
    Child.prototype.constructor = Child;
}

I think I don't know/understand some things, but F object is useless in my opinion. Please, clarify the situation. Thanks.

Answer 1

  Child.prototype = Parent.prototype; 

Now Child.prototype and Parent.prototype are the same object .

Adding methods to Child.prototype will add them to Parent.prototype , which is not how classic OOP inheritance works.

Answer 2

The most important thing to realize is that JavaScript does not have classical inheritance built in natively. It is not like Java so you'll want to throw all your Java inheritance ideas right out the window if you want to work with JavaScript's prototypes.

The idea of a prototype is that you have a single object connected to a constructor function. That's your prototype object. You use the constructor function to generate new objects that will all have access to the methods contained in the constructor's prototype. The trick is that if you ever modify the prototype attached to the constructor, the method you changed will now be changed for all child objects created by the constructor. It works like this:

function Cat(name) {
    this.name = name;
}

Cat.prototype = {
  furColor: function () {
    return 'gray';
  }
};

var kitty1 = new Cat('Bob');
//=> {name: 'Bob'}

kitty1.furColor();
//=> 'gray'

Cat.prototype.furColor = function () {
  return 'white';
}

var kitty2 = new Cat('Sally');
//=> {name: 'Sally'}

kitty2.furColor();
//=> 'white'

kitty1.furColor();
//=> 'white'

So if you want to build classical inheritance off of this model you can, but just remember, this is what you get with prototypes in JavaScript.

There's a pretty popular classical inheritance plugin that gives you some nice OO JavaScript called klass you might want to try instead of rolling your own.

Answer 3

I believe that a javascript prototype is an actual instance of an object, and if you do something like:

Child.prototype = Parent.prototype; 
Child.prototype.constructor = Child;

you'll also be changing the Parent 's prototype too, because they're the same instance of an object.