The Holy Grail mode in JS

The Grail pattern is a way to implement inheritance in JavaScript, and its simple form is as follows

    function Father(){}    function Son(){}    Father.prototype.lastName=‘Jack‘;    //圣杯模式    function inherit(Target,Origin){        function F(){};        F.prototype=Origin.prototype;        Target.prototype=new F();    }    inherit(Son,Father);    var son=new Son();    var father=new Father();     Son.prototype.sex=‘male‘;    console.log(son.lastName);//Jack    console.log(son.sex);//male    console.log(father.sex);//undefined

The essence of this grail pattern is that an object is created in the middle, which acts as an isolation, and all will be added to this object in the future when adding attributes to the son.prototype, so there is no effect on the parent. While the up lookup is found along the __proto__, you can successfully find the parent property to implement inheritance.

The following is a detailed analysis of how the inheritance

First inherit , the function defines a function F function f to act as the middle tier.

F.prototype=Origin.prototype;This step then indicates that the prototype of F and Father point to the same address, i.e. Father.prototype

The next step is to Target.prototype=new F(); generate an object through function f (This object is OBJF), so that the prototype of the son function points to the object OBJF, which in fact has been inherited.

In the code below, after the son and father objects have been generated, a sex attribute is added to the prototype of the function son, and the prototype of the son function is directed to the object OBJF, so this sex attribute is added to the OBJF. As a result, male will appear when printing son.sex below.

For Son.lastname, it is obvious that there is a LastName attribute inside the son function first. So just look up along the __proto__ (that is, the prototype chain) and find out if the property exists in function F. As mentioned earlier, the prototype of F and father are all pointing to Father.prototype, and this property exists in Father.prototype, so son.lastname prints the result jack.

Finally, because of the existence of the middle layer F, the prototype of father has not been affected from beginning to end, so the father.sex print result is undefined.

In general, there are two other words when using the Grail mode.

Target.prototype.constructor=Target;//由于Target.prototype指向的是objF,因此并没有constructor这一属性，沿着__proto__向上查找，发现constructor指向的是Father，因此这里可以进行归位，让它的constructor重新指向它自己Target.prototype.uber=Origin.prototype;//uber是超类的意思，这里主要用来储存这个目标到底继承自谁，可写可不写

In addition, there is another way to use the closure of the F as a privatization variable, the complete code is as follows:

//方法1    function Father(){}    function Son(){}    Father.prototype.lastName=‘Jack‘;    function inherit(Target,Origin){        function F(){};        F.prototype=Origin.prototype;        Target.prototype=new F();        Target.prototype.constructor=Target;        Target.prototype.uber=Origin.prototype;    }    inherit(Son,Father);    var son=new Son();    var father=new Father();     Son.prototype.sex=‘male‘;    console.log(son.lastName);//Jack    console.log(son.sex);//male    console.log(father.sex);//undefined//方法2,利用闭包将F作为一个私有化变量    var inherit=(function(){        var F=function F(){};        return function(){            F.prototype=Origin.prototype;            Target.prototype=new F();            Target.prototype.constructor=Target;            Target.prototype.uber=Origin.prototype;        }    })();

Caishuxueqian, please note if there are any errors.

The Holy Grail mode in JS