js Holy Grail Pattern Explanation

The Holy Grail pattern exists to inherit the members (mainly public methods) of the existing prototype object (A.prototype), and at the same time modify the prototype object (A.prototype) according to your own needs to customize the structure that meets our requirements. Function B, this modification will not affect existing instances (a1, a2,...).

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

Holy Grail pattern solves problems

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

Conclusion

1. The Holy Grail pattern is through an existing construct The function (Factory) builds an instance object (P), and then we customize a constructor (C) so that the prototype attribute of this constructor (C) points to this instance object (P) (the instance object of the temporary constructor), so that we When changing the attribute members of the prototype attribute of the customized constructor (C), what is actually changed is only the attribute members in the instance object (P)

2. The principle of prototype chain access is: First traverse whether the member exists in the current object. If it exists, access it directly. If it does not exist, access its prototype object... If the prototype chain is not traversed, undefined will be returned.

3. Instances can access attribute members in the prototype object, but they cannot Instance.member = value to modify members in the prototype object. Instance.member is equivalent to Add a property member to the current instance and assign a value.

The above is the detailed content of js Holy Grail Pattern Explanation. For more information, please follow other related articles on the PHP Chinese website!