继承模式(下)

本是古典何须时尚 2022-05-26 04:55 123阅读 0赞

# Javascript继承模式（下） #

# 圣杯模式 #

--------------------

上篇文章说到，在共享原型的基础上，自己修改原型也不会影响到使用这个原型的其他构造函数。

此时的Son的原型是继承的Father的原型，所以控制套操作`Son.prototype`输出的是Father\{...\}；

但是修改原型的时候不会影响到使用这个原型的构造函数。

例如：`Son.prototype.name = demo;`然后输出son.name的值为demo，输出father的值为undefined，不会影响到其他构造函数。

--------------------

每个原型都有一个constructor查看构造函数的系统自带属性

### 那么问题来了，现在son的构造函数是什么？ ###

此时son的构造函数理应是`function Son () { }`

但是son.constructor输出的是`function Father () {}`

Why？![eat.jpg][]

分析：

constructor是原型里才有的一个属性，对象里是没有constructor这个属性的，所以找的constuctor是原型里的。

son的原型为new Lk()---->new Lk()为对象，里面没有constructor，所以找new Lk()的原型---->new Lk()的原型为Father\{...\}。

所以找到最后，son的构造函数是找的Father里面的constructor，所以son.constructor输出的是

`function Father () {}`

--------------------

So..

要把圣杯模式完善一点

son的构造函数理应是`function Son () { }`，所以要把它要改过来

此时的Son的构造函数就改回自身了，控制台操作 son.constructor 输出的是`function Son () { }`

扩展（可有可无）：

希望自己创建的对象能找到自己的超类(最终继承原型）。uber：自定义名称。

Target.prototype.uber = Origin.prototype;

--------------------

以下这就是圣杯模式最终的一个形式，可以直接调用这个方法传参就可以。

function inherit(Target, Origin) {
    
     function Lk() {};
    
      Lk.prototype = Origin.prototype;
    
      Target.prototype = new Lk();
    
      Target.prototype.constructor = Target;//使目标的构造函数等于目标
    
      Target.prototype.uber = Origin.prototype;//有需要可以调用出目标的最终继承原型
    
            }

--------------------

本节重点：

雅虎YUI3库里有一个封装好的功能inherit，一种非常高大上的继承模式。

建议使用这种操作。

[eat.jpg]: http://blog.mobaii.com/Public/Uploads/2018-03-06/5a9df88d8bd94.jpg