Maison > interface Web > js tutoriel > le corps du texte

js Explication du modèle du Saint Graal

小云云
Libérer: 2018-03-27 17:04:26
original
3249 Les gens l'ont consulté

Le modèle Holy Graal existe pour hériter des membres (principalement des méthodes publiques) dans l'objet prototype existant (A.prototype), et en même temps modifier l'objet prototype (A.prototype) en fonction de vos propres besoins pour personnaliser le structure qui répond à nos exigences Fonction B, cette modification n’affectera pas les instances existantes (a1, a2,...).

Héritage normal pour partager des variables

var Person =  function () {};
Person.prototype.sayHello = function () {
    console.log('hello');
};// 假设 person 原型属性上有很多方法和变量我们需要拿来使用,比如: spell这个方法我们要拿来继续使用Person.prototype.spell = function () {
    console.log('i can spell!');
};var personA = new Person();var personB = new Person();var personC = new Person();var personD = new Person();var personE = new Person();var personF = new Person();var personG = new Person();var personH = new Person();
personA.sayHello();
personA.spell();
personB.sayHello();
personB.spell();// ...// 之前应项目需求 实例化了很多对象, 现在需要 实例化 n 个说中文的对象,同时要具备之前的 spell相同能力 Person.prototype.sayHello = function () {
    console.log('你好');
};var chinaPersonA = new Person();var chinaPersonB = new Person();var chinaPersonC = new Person();var chinaPersonD = new Person();var chinaPersonE = new Person();
chinaPersonA.sayHello();
chinaPersonA.spell();
chinaPersonB.sayHello();
chinaPersonB.spell();// ...// 之前的对象还能说英文 hello 吗? 显然不能了personA.sayHello(); // 你好personA.spell();
personB.sayHello(); // 你好personB.spell();// 显然我们对已存在的原型对象修改,对别人使用的的或者说以前构建的对象产生了影响
Copier après la connexion

Le modèle du Saint Graal résout les problèmes

var Person = function () {}
Person.prototype.sayHello = function () {
    console.log('hello');
};
Person.prototype.spell = function () {
    console.log('i can spell!');
};var personA = new Person();var personB = new Person();
personA.sayHello();
personA.spell();var grailMode = (function () {
    return function (Origin, Target) {
        var Temp = function () {};// 临时构造函数
        Temp.prototype = Origin.prototype;
        Target.prototype = new Temp();  // 这里不是明白,为什么要加个临时构造函数
        Target.prototype.constructor = Target; // 目标构造函数原型属性constructor指向 目标构造函数
        Target.prototype.ancestor = Origin; // target 的生父
    }
})();// 我们定制的构造函数var ChinaPerson = function () {}
grailMode(Person, ChinaPerson);

ChinaPerson.prototype.sayHello = function () {
    console.log('你好');
}var ChinaPersonA = new ChinaPerson();
ChinaPersonA.sayHello();
ChinaPersonA.spell();

personA.sayHello();
personA.spell();
Copier après la connexion

Conclusion

  1. Le Saint Le modèle du Graal est obtenu grâce au constructeur existant (Factory) qui construit un objet instance (P), puis nous personnalisons un constructeur (C) de sorte que l'attribut prototype de ce constructeur (C) pointe vers l'objet instance (P) (l'instance objet du constructeur temporaire), de cette façon, lorsque nous modifions le membre d'attribut de l'attribut prototype du constructeur personnalisé (C), ce qui change en réalité, c'est juste le membre d'attribut

  2. accès à la chaîne de prototype dans l'objet instance (P) Le principe est : parcourir d'abord si le membre existe dans l'objet courant, s'il existe, y accéder directement, s'il n'existe pas, accéder à son objet prototype... Si la chaîne de prototypes n'est pas parcourue, undefined sera renvoyé.

  3. Les instances peuvent accéder aux membres d'attribut dans l'objet prototype, mais elles ne peuvent pas 实例.成员 = value modifier les membres dans l'objet prototype Instance.member équivaut à ajouter un membre d'attribut à l'objet prototype actuel. instance et affectation.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal