JS中的圣杯模式

Posted 2020-12-04 60late

圣杯模式是javascript中用来实现继承的一种方法，它的简单形式如下所示

    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

这种圣杯模式的本质在于，中间生成了一个对象，起到了隔离的作用，今后为Son.prototype添加属性时，全部都会加在这个对象里面,所以不会对父级产生影响。而向上查找是沿着__proto__查找，可以顺利查找到父级的属性，实现继承。

下面来具体分析是如何进行继承的

首先inherit 函数中定义了一个function F ，F用来充当中间层的函数

之后F.prototype=Origin.prototype; 这一步表示，让F和Father的prototype指向同一地址，即Father.prototype

下一步Target.prototype=new F(); 表示，通过函数F生成一个对象（这里把这个对象成为objF），让Son函数的prototype指向这个对象objF，到这一步实际上就已经实现了继承。

下方代码中，生成了son和father对象之后，对函数Son的prototype增加了一个sex属性，而Son函数的prototype是指向对象objF的，因此这个sex属性会加到objF之上，因此下方打印son.sex时就会出现male。

而对于son.lastName而言，首先查找Son函数内部是否有lastName属性，很明显没有。因此就沿着__proto__(即原型链）往上找， 即在函数F中找是否存在该属性，之前提到了F和Father的prototype都是指向Father.prototype的，而在Father.prototype中存在该属性，因此son.lastName的打印结果为Jack。

最后，由于有中间层F的存在，因此Father的prototype自始至终都没有受到影响，所以father.sex的打印结果为undefined。

一般在使用圣杯模式时还会加上另外两句话

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

此外，还有另外一种写法，利用闭包将F作为一个私有化变量,完整代码如下：

//方法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;
        }
    })();

才疏学浅，如有错误敬请指出。