Explication détaillée du prototype et de l'héritage parasite en JS (exemple de code)

Cet article vous apporte une explication détaillée (exemple de code) de l'héritage prototypique et parasitaire dans JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos : J'ai récemment lu Javascript Advanced Programming. Pour moi, la version chinoise du livre a des traductions insatisfaisantes à de nombreux endroits, j'essaie donc de l'interpréter en utilisant ce que je comprends. S'il y a des erreurs ou des omissions, nous vous serions très reconnaissants de les signaler. La plupart du contenu de cet article est tiré de « JavaScript Advanced Programming, Third Edition ».

Héritage prototypique

Douglas Crawford a écrit un article en 2006 intitulé Héritage prototypique en JavaScript (Héritage prototypique en JavaScript).

Dans cet article, il présente une méthode d'implémentation de l'héritage qui n'utilise pas de constructeurs au sens strict.

L'idée est d'utiliser des prototypes pour créer de nouveaux objets basés sur des objets existants sans avoir à créer des types personnalisés.

Afin d'atteindre cet objectif, il a donné la fonction suivante.

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

Dans la fonction object(), un constructeur temporaire est d'abord créé, puis l'objet transmis est utilisé comme prototype de ce constructeur, et enfin un nouvel objet instance de ce type temporaire est renvoyé.

Essentiellement, object() effectue une copie superficielle de l'objet transmis.

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

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}

var person1 = object(person);

/*
person1 = function object(person){
    function F(){};
    F.prototype = person1;
    return new F();
}()

person1 = function object({
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}){
    function F(){};
    F.prototype = {
        name: "Shaw",
        friends: ["Sharon", "Sandy", "Van"]
    }
    return {
    }
}

person1 = {

};

{}.__proto__ = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}
*/

person1.name = "Roc";
person1.friends.push("Roster");

var person2 = object(person);

person2.name = "Linda";
person2.friends.push("Jobs");

console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]

L'héritage prototypique prôné par Crockford exige que vous ayez un objet pouvant servir de base à un autre objet.

S'il existe un tel objet, vous pouvez le transmettre à la fonction object(), puis modifier l'objet obtenu en fonction de besoins spécifiques.

ECMAscript5 standardise l'héritage prototypique via la nouvelle méthode Object.create().
Cette méthode accepte deux paramètres : un objet à utiliser comme prototype du nouvel objet et (éventuellement) un objet pour définir des propriétés supplémentaires pour le nouvel objet.

Les méthodes Object.create() et object() se comportent de la même manière lors du passage d'un paramètre.

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Van"]
}

var person1 = Object.create(person);
person1.name = "Roc";
person1.friends.push("Roster");

var person2 = Object.create(person);
person2.name = "Linda";
person2.friends.push("Messi");

console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]

Le deuxième paramètre de la méthode Object.create() a le même format que le deuxième paramètre de la méthode Object.defienProperties() :

Chaque propriété est passée par sa propre caractère de description défini.

Toute propriété spécifiée de cette manière remplacera la propriété du même nom sur l'objet prototype.

var person = {
    name: "Shaw",
    friends: ["Sharon", "Sandy", "Selina"]
}

var person1 = Object.create(person, {
    name: {
        value: "Roc"
    }
})

console.log(person1.name); //"Roc"

Les navigateurs qui prennent en charge la méthode Object.create() sont IE9+, Firefox 4+, Opera 12+ et Chrome.

Scénarios applicables :

Lorsqu'il n'est pas nécessaire de créer un constructeur, mais que vous souhaitez simplement conserver un objet similaire à un autre objet, l'héritage prototypique est tout à fait possible.

Il est important de se rappeler que les propriétés contenant des valeurs de type référence partageront toujours la valeur correspondante, tout comme l'utilisation du modèle prototype.

Héritage parasitaire

L'héritage parasitaire est une idée étroitement liée à l'héritage prototype, et il a également été popularisé par le grand dieu Crockerford.

L'idée de l'héritage parasite est similaire au constructeur parasite et au modèle d'usine.

Créez une fonction qui encapsule simplement le processus d'héritage, améliore en interne l'objet d'une manière ou d'une autre et renvoie l'objet comme s'il faisait réellement tout le travail.

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

function createAnother(original) {
    var clone = object(original); //通过调用函数创建一个新对象
    clone.sayHi = function(){ //以某种方式来增强这个对象
        console.log("hi");
    }
    return clone; //返回这个对象
}

Dans cet exemple, la fonction createAnother() reçoit un paramètre différent, qui est l'objet qui sera utilisé comme base pour le nouvel objet.
Ensuite, transmettez le paramètre objet (original) à la fonction object() et attribuez le résultat renvoyé au clone.

Ajoutez une nouvelle méthode sayHi() à l'objet clone, et enfin renvoyez l'objet clone.

Vous pouvez utiliser la fonction createAnother() comme ceci :

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

function createAnother(original) {
    var clone = object(original); //通过调用函数创建一个新对象
    clone.sayHi = function(){ //以某种方式来增强这个对象
        console.log("hi");
    }
    return clone; //返回这个对象
}

var person = {
    name: "Shaw",
    friends: ["Sandy", "Sharon", "Van"]
}

var anotherPerson = createAnother(person);

anotherPerson.sayHi(); //"hi"

Le code de cet exemple renvoie un nouvel objet basé sur la personne - anotherPerson. Le nouvel objet possède non seulement toutes les propriétés et méthodes de person, mais possède également sa propre méthode sayHi().

L'héritage parasite est également un modèle utile lorsque la principale préoccupation concerne les objets plutôt que les types et constructeurs personnalisés.

La fonction object() utilisée dans la démonstration précédente du mode héritage n'est pas nécessaire. Toute fonction pouvant renvoyer un nouvel objet convient à ce mode.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!