JavaScript Extension De La Classe

Mise à jour ci-dessous pour ES6

Mars 2013 et ES5

Ce MDN document décrit l'extension de classes bien:

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

En particulier, voici maintenant qu'ils ne l'utilisent:

//define the Person Class
function Person() {}

Person.prototype.walk = function(){
  alert ('I am walking!');
};
Person.prototype.sayHello = function(){
  alert ('hello');
};

//define the Student class
function Student() {
  //Call the parent constructor
  Person.call(this);
}

//inherit Person
Student.prototype = Object.create(Person.prototype);

//correct the constructor pointer because it points to Person
Student.prototype.constructor = Student;

//replace the sayHello method
Student.prototype.sayHello = function(){
  alert('hi, I am a student');
}

//add sayGoodBye method
Student.prototype.sayGoodBye = function(){
  alert('goodBye');
}

var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();

//check inheritance
alert(student1 instanceof Person); //true 
alert(student1 instanceof Student); //true

Noter que de l'Objet.créer() est pas pris en charge dans certains anciens navigateurs, y compris IE8:

Si vous êtes dans la position d'avoir besoin à l'appui de ces, liés MDN document suggère d'utiliser un polyfill, ou l'approximation suivante:

function createObject(proto) {
    function ctor() { }
    ctor.prototype = proto;
    return new ctor();
}

L'utilisation de ce comme Student.prototype = createObject(Person.prototype) est préférable à l'utilisation new Person() en ce qu'il évite l'appel de la mère de la fonction constructeur lorsque vous héritez le prototype, et appelle le constructeur parent lorsque l'héritier du constructeur est appelé.

Mai 2017 et ES6

Heureusement, le JavaScript, les concepteurs ont entendu nos appels à l'aide et ont adopté une mesure plus appropriée pour aborder cette question.

MDN a un autre excellent exemple sur ES6 l'héritage de classe, mais je vais vous montrer exactement le même jeu de classes comme ci-dessus reproduit dans l'ES6:

class Person {
    sayHello() {
        alert('hello');
    }

    walk() {
        alert('I am walking!');
    }
}

class Student extends Person {
    sayGoodBye() {
        alert('goodBye');
    }

    sayHello() {
        alert('hi, I am a student');
    }
}

var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();

//check inheritance
alert(student1 instanceof Person); //true 
alert(student1 instanceof Student); //true

Propre et compréhensible, tout comme nous le voulons tous. Gardez à l'esprit que, bien que ES6 est assez commun, c'est pas pris en charge partout:

Essayez ceci:

Function.prototype.extends = function(parent) {
  this.prototype = Object.create(parent.prototype);
};

Monkey.extends(Monster);
function Monkey() {
  Monster.apply(this, arguments); //call super
}

Edit: j'ai mis une rapide démo ici http://jsbin.com/anekew/1/edit. Notez que extends est un mot réservé en JS et vous pouvez obtenir des avertissements lorsque peluchage votre code, vous pouvez simplement le nom il inherits, c'est ce que je fais d'habitude.

Avec ce helper en place et l'utilisation d'un objet props comme seul paramètre, l'héritage en JS devient un peu plus simple:

Function.prototype.inherits = function(parent) {
  this.prototype = Object.create(parent.prototype);
};

function Monster(props) {
  this.health = props.health || 100;
}

Monster.prototype = {
  growl: function() {
    return 'Grrrrr';
  }
};

Monkey.inherits(Monster);
function Monkey() {
  Monster.apply(this, arguments);
}

var monkey = new Monkey({ health: 200 });

console.log(monkey.health); //=> 200
console.log(monkey.growl()); //=> "Grrrr"

Je peux proposer une variante, il suffit d'avoir lu dans le livre, il semble que le plus simple:

function Parent() { 
  this.name = 'default name';
};

function Child() {
  this.address = '11 street';
};

Child.prototype = new Parent();      //child class inherits from Parent
Child.prototype.constructor = Child; //constructor alignment

var a = new Child(); 

console.log(a.name);                //"default name" trying to reach property of inherited class

Traditionnelles de l'extension, vous pouvez simplement écrire comme constructeur de la superclasse de la fonction,
et ensuite appliquer ce constructeur de votre classe héritée.

     function AbstractClass() {
      this.superclass_method = function(message) {
          //do something
        };
     }

     function Child() {
         AbstractClass.apply(this);
         //Now Child will have superclass_method()
     }

Exemple sur angularjs:

http://plnkr.co/edit/eFixlsgF3nJ1LeWUJKsd?p=preview

app.service('noisyThing', 
  ['notify',function(notify){
    this._constructor = function() {
      this.scream = function(message) {
          message = message + " by " + this.get_mouth();
          notify(message); 
          console.log(message);
        };

      this.get_mouth = function(){
        return 'abstract mouth';
      }
    }
  }])
  .service('cat',
  ['noisyThing', function(noisyThing){
    noisyThing._constructor.apply(this)
    this.meow = function() {
      this.scream('meooooow');
    }
    this.get_mouth = function(){
      return 'fluffy mouth';
    }
  }])
  .service('bird',
  ['noisyThing', function(noisyThing){
    noisyThing._constructor.apply(this)
    this.twit = function() {
      this.scream('fuuuuuuck');
    }
  }])

Résumé:

Il existe de nombreuses façons qui peuvent résoudre le problème de l'extension de la fonction constructeur avec un prototype en Javascript. Laquelle de ces méthodes est la "meilleure" solution opinion fondée. Cependant, ici, sont deux méthodes fréquemment utilisées afin de prolonger un constructeur de prototype de fonction.

ES 2015 Classes:

JS:

class Monster {
  constructor(health) {
    this.health = health
  }
  
  growl () {
  console.log("Grr!");
  }
  
}


class Monkey extends Monster {
  constructor (health) {
    super(health) //call super to execute the constructor function of Monster 
    this.bananaCount = 5;
  }
}

const monkey = new Monkey(50);

console.log(typeof Monster);
console.log(monkey);

L'approche ci-dessus de l'aide ES 2015 classes est rien de plus que du sucre syntaxique sur les prototypes de motif d'héritage en javascript. Voici le premier journal où nous évaluons typeof Monster nous pouvons observer que c'est la fonction. C'est parce que les classes sont juste des constructeur fonctions sous le capot. Néanmoins, vous aimerez cette façon de la mise en œuvre de prototypes héritage et définitivement devraient l'apprendre. Il est utilisé dans les grands cadres comme ReactJS et Angular2+.

Usine de fonction à l'aide de Object.create():

JS:

function makeMonkey (bananaCount) {
  
  //here we define the prototype
  const Monster = {
  health: 100,
  growl: function() {
  console.log("Grr!");}
  }
  
  const monkey = Object.create(Monster);
  monkey.bananaCount = bananaCount;

  return monkey;
}


const chimp = makeMonkey(30);

chimp.growl();
console.log(chimp.bananaCount);

Cette méthode utilise la Object.create() méthode qui prend un objet qui sera le prototype de l'objet nouvellement créé il retourne. Par conséquent, nous avons d'abord créer l'objet prototype de cette fonction, et ensuite appeler Object.create() qui retourne un objet vide avec le __proto__ ensemble de propriétés pour le Monstre de l'objet. Après cela, nous pouvons initialiser toutes les propriétés de l'objet, dans cet exemple, nous attribuons au bananacount de l'objet nouvellement créé.