JS中的圣杯模式

圣杯模式是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; ???????} ???})();

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

JS中的圣杯模式

原文地址：https://www.cnblogs.com/60late/p/9309517.html