Héritage JavaScript: Object.create vs new

En JavaScript, quelle est la différence entre ces deux exemples:

Prérequis:

function SomeBaseClass(){
}

SomeBaseClass.prototype = {
    doThis : function(){
    },

    doThat : function(){
    }
}

Exemple d'héritage A utilisant Object.create:

function MyClass(){
}

MyClass.prototype = Object.create(SomeBaseClass.prototype);

Exemple d'héritage B utilisant le nouveau mot-clé

function MyClass(){
}

MyClass.prototype = new SomeBaseClass();

Les deux exemples semblent faire la même chose. Quand choisiriez-vous l'un plutôt que l'autre?

Une question supplémentaire: considérez le code dans le lien ci-dessous (ligne 15), où une référence au propre constructeur de la fonction est stockée dans le prototype. Pourquoi est-ce utile?

https://github.com/mrdoob/three.js/blob/master/src/loaders/ImageLoader.js

Extrait (si vous ne souhaitez pas ouvrir le lien):

THREE.ImageLoader.prototype = {

    constructor: THREE.ImageLoader
}

Dans votre question, vous avez mentionné que Both examples seem to do the same thingce n'est pas vrai du tout, car

Votre premier exemple

function SomeBaseClass(){...}
SomeBaseClass.prototype = {
    doThis : function(){...},
    doThat : function(){...}
}
function MyClass(){...}
MyClass.prototype = Object.create(SomeBaseClass.prototype);

Dans cet exemple, vous héritez juste SomeBaseClass' prototypemais que faire si vous avez une propriété dans votre SomeBaseClassgenre

function SomeBaseClass(){ 
    this.publicProperty='SomeValue'; 
}

et si vous l'utilisez comme

var obj=new MyClass();
console.log(obj.publicProperty); // undefined
​console.log(obj);​

L' objobjet n'aura pas de publicPropertypropriété comme dans cet exemple .

Votre deuxième exemple

MyClass.prototype = new SomeBaseClass();

Il exécute la constructorfonction, crée une instance SomeBaseClasset hérite de tout l' SomeBaseClassobjet. Donc, si vous utilisez

    var obj=new MyClass();
    console.log(obj.publicProperty); // SomeValue
    console.log(obj);​

Dans ce cas, sa publicPropertypropriété est également disponible pour l' objobjet comme dans cet exemple .

Comme le Object.createn'est pas disponible dans certains anciens navigateurs, dans ce cas, vous pouvez utiliser

if(!Object.create)
{
    Object.create=function(o){
        function F(){}
        F.prototype=o;
        return new F();
    }
}

Le code ci-dessus ajoute simplement une Object.createfonction s'il n'est pas disponible afin que vous puissiez utiliser la Object.createfonction et je pense que le code ci-dessus décrit ce que Object.createfait réellement. J'espère que cela aidera d'une certaine manière.

Les deux exemples semblent faire la même chose.

C'est vrai dans votre cas.

Quand choisiriez-vous l'un plutôt que l'autre?

Quand SomeBaseClassa un corps de fonction, cela serait exécuté avec le newmot - clé. Ce n'est généralement pas prévu - vous souhaitez uniquement configurer la chaîne de prototypes. Dans certains cas, cela peut même causer de graves problèmes car vous instanciez en fait un objet, dont les variables de portée privée sont partagées par toutes les MyClassinstances car elles héritent des mêmes méthodes privilégiées. D'autres effets secondaires sont imaginables.

Donc, vous devriez généralement préférer Object.create. Pourtant, il n'est pas pris en charge dans certains navigateurs hérités; c'est la raison pour laquelle vous voyez l' newapproche beaucoup trop fréquente car elle ne fait souvent aucun mal (évident). Jetez également un œil à cette réponse .

La différence devient évidente si vous utilisez Object.create()comme prévu. En fait, il cache entièrement le prototypemot de votre code, il fera le travail sous le capot. En utilisant Object.create(), nous pouvons aller comme

var base =  {
    doThis : function(){
    },

    doThat : function(){
    }
};

Et puis nous pouvons étendre / hériter d'autres objets de ce

var myObject = Object.create( base );
// myObject will now link to "base" via the prototype chain internally

C'est donc un autre concept, une manière d'hériter plus "orientée objet". Il n'y a pas de "fonction constructeur" prête à l'emploi en utilisant Object.create()par exemple. Mais bien sûr, vous pouvez simplement créer et appeler une fonction de constructeur auto-définie dans ces objets.

Un argument pour utiliser Object.create()est qu'il peut sembler plus naturel de mélanger / * hériter * d'autres objets que d'utiliser la méthode par défaut de Javascripts .

Je ne suis pas un expert en script java mais voici un exemple simple pour comprendre la différence entre "Object.create" et "new" ..

étape 1: créez la fonction parent avec quelques propriétés et actions.

function Person() {

this.name = 'venkat';

this.address = 'dallas';

this.mobile='xxxxxxxxxx'

}

Person.prototype.func1 = function () {

    return this.name + this.address;
}

étape 2: créez une fonction enfant (PersonSalary) qui s'étend au-dessus de la fonction Person à l'aide du nouveau mot clé.

function PersonSalary() {
    Person.call(this);
}
PersonSalary.prototype = new Person();

PersonSalary();

étape 3: créez une deuxième fonction enfant (PersonLeaves) qui s'étend au-dessus de la fonction Person en utilisant le mot-clé Object.create .

function PersonLeaves() {
 Person.call(this);
}
PersonLeaves.prototype = Object.create(Person.prototype);


PersonLeaves();

// Vérifiez maintenant les deux prototypes de fonctions enfants.

PersonSalary.prototype
PersonLeaves.prototype

ces deux fonctions enfants seront liées au prototype Person (fonction parent) et pourront accéder à ses méthodes, mais si vous créez une fonction enfant en utilisant new, elle renverra un tout nouvel objet avec toutes les propriétés parent dont nous n'avons pas besoin et aussi lorsque vous en créez objet ou fonction utilisant "New" cette fonction parent est exécutée ce que nous ne voulons pas être.

Voici les plats à emporter

si vous voulez simplement déléguer à certaines méthodes dans la fonction parent et ne voulez pas qu'un nouvel objet soit créé, utiliser Object.create est le meilleur moyen.