ホームページ  >  記事  >  ウェブフロントエンド  >  js聖杯パターン解説

js聖杯パターン解説

小云云
小云云オリジナル
2018-03-27 17:04:263230ブラウズ

Holy Grail パターンは、既存のプロトタイプ オブジェクト (A.prototype) のメンバー (主にパブリック メソッド) を継承し、同時にプロトタイプ オブジェクト (A.prototype) を独自のニーズに応じて変更してコンストラクター B をカスタマイズするために存在します。要件を満たしている場合、この変更は既存のインスタンス (a1、a2、...) には影響しません。

変数を共有するための通常の継承

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();// 显然我们对已存在的原型对象修改,对别人使用的的或者说以前构建的对象产生了影响

聖杯パターンは問題を解決します

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();

結論

  1. 聖杯パターンは、既存のコンストラクター (Factory) を通じてインスタンス オブジェクト (P) を構築し、次にコンストラクター ( C )、このコンストラクター (C) のプロトタイプ属性がこのインスタンス オブジェクト (P) (一時コンストラクターのインスタンス オブジェクト) を指すようにします。これにより、カスタマイズされたコンストラクター (C) のプロトタイプ属性を変更するとき、唯一のことは変更されるのは、インスタンス オブジェクト (P) 内の単なる属性メンバーです。プロトタイプ チェーン アクセスの原則は、まず現在のオブジェクトにメンバーが存在するかどうかを調べ、存在しない場合は直接アクセスします。そのプロトタイプオブジェクト...プロトタイプ チェーンを通過しない場合は、未定義が返されます。

  2. インスタンスはプロトタイプ オブジェクトの属性メンバーにアクセスできますが、プロトタイプ オブジェクトのメンバーを

    変更することはできません。 Instance.member は、現在のインスタンスに属性メンバーを追加して値を割り当てることと同等です。

以上がjs聖杯パターン解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。