JavaScript Inheritance

Question

This is an extended feature from Javascript Design Templates.

function extend(subClass, superClass) {
    var F = function() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
    subClass.superclass = superClass.prototype;
    if(superClass.prototype.constructor == Object.prototype.constructor) {
       superClass.prototype.constructor = superClass;
    }
}

I have problems with the first three lines ... It creates an empty function and then sets F.prototype to superClass.prototype, which means (for two new constructor functions like foo, bar and foo extends bar) that F.prototype will have a constructor property: bar and proto : object or not? And on line 3: subClass.prototype = new F (); something that I can’t understand is happening .. Why does inheritance happen here when F [[Prototype]] is an object?

---

What is the difference between the first three lines and

subClass.prototype = new superClass();

when is the code executed? I mean, how the first does the same as the second.

---

superClass subClass. "className".superclass.constructor.call(this);

Answer 1

:

F, Super Sub.

F, Super Sub, .

. f = new F, super = new Super, sub = new Sub

f.__proto__ === super.__proto__ === Super.prototype 2

3 , sub.__proto__ === f sub.__proto__.__proto__ === Super.prototype

Sub.superClass === Super.prototype 5.

4 6 , sub.constructor === Sub super.constructor === Super

, new F , 3, 7, 7 ​​

f.__proto__.constructor === Super as f.constructor Sub. 7 Super Sub , .__proto__.constructor .

explicity Super , , , Sub, Super.prototype .

Answer 2

function extend(subClass, superClass) {

    // create a new empty function
    var F = function() {}; 

    // set the prototype of that function to prototype object of the superclass
    F.prototype = superClass.prototype;

    // now set the prototype of the subClass to a new instance of F
    // this is done so that subClass.prototype.foo = does not affect
    // superClass.prototype.foo
    // if you don't do this, changes to one subClass will affect superClass and all
    // other subClasses of superClass
    subClass.prototype = new F();

: subClass.prototype = new superClass() . , superClass ( ).

    // set the constructor, this indicates that 'subClass' is a function
    subClass.prototype.constructor = subClass;

    // add a property to indicate what the superClass is
    // this way one can call super methods via this.superclass.something
    subClass.superclass = superClass.prototype;

    // in case the superClass was an object...
    if(superClass.prototype.constructor == Object.prototype.constructor) {

       // change the constructor?
       // no idea why they do this here
       // this introduces a side effect to the function
       superClass.prototype.constructor = superClass;
    }
}

Answer 3

javascript. .

Javascript Library

.

var Animal = Class.create({
  initialize: function(name, sound) {
    this.name  = name;
    this.sound = sound;
  },

  speak: function() {
    alert(this.name + " says: " + this.sound + "!");
  }
});

// subclassing Animal
var Snake = Class.create(Animal, {
  initialize: function($super, name) {
    $super(name, 'hissssssssss');
  }
});

var ringneck = new Snake("Ringneck");
ringneck.speak();
//-> alerts "Ringneck says: hissssssssss!"

var rattlesnake = new Snake("Rattler");
rattlesnake.speak();
//-> alerts "Rattler says: hissssssssss!"