JS学习44：一个标准继承

爱被打了一巴掌 2022-07-15 11:15 178阅读 0赞

# 1、标准继承 #

关于继承的文章，前面已经写过不少了（详见：[http://qianduanblog.com/search/%E7%BB%A7%E6%89%BF/][http_qianduanblog.com_search_E7_BB_A7_E6_89_BF]）。前面的文章介绍了如何实现继承以及各种继承的方法、特点。

## 1.1、引子：共享原型的原型继承 ##

javascript中通过原型链来实现共享属性和方法做法来实现共享继承。如：

// People
       function People(){}
       People.prototype.constructor = People;
       People.prototype.type = 'people';
       People.prototype.isPeople = true;
       
       
       // Father
       function Father(){}
       Father.prototype = People.prototype;
       Father.prototype.constructor = Father;
       Father.prototype.type = 'father';
       Father.prototype.isFather = true;
       
       
       // Child
       function Child(){}
       Child.prototype = Father.prototype;
       Child.prototype.constructor = Child;
       Child.prototype.type = 'child';
       Child.prototype.isChild = true

如上代码实现了 `Child -> Father -> People` 的继承关系，在chrome控制台打印出 `Child.prototype` 即可明显看出：

![20140816134235607005933604.png][]

`Child`的原型中同时拥有了`People`、`Father`和`Child`自身的所有原型属性，而原型是个被所有实例所共享的对象，因此`Child`的所有实例都具有了`People`和`Father`所有的原型属性、方法。接下来看看 `Father.prototype` 和 `People.prototype`：

![20140816134817447844726327.png][]

由图可知，通过共享原型链是达到了继承的目的，但同时也带来了负面的影响，`Father`的`type`本来是为`father`，结果为`child`，`People`的`type`本来是`people`，结果为`child`。因为`People`、`Father`和`Child`共享了同一个原型对象，因此也额外的实现了`Father`继承了`Child`、`People`继承了`Father`的结果，可想而知不是我们想要的。这种结果相当于丰富并改写了`People`的原型链，只有多了几个同等性质的构造函数而已，即：

// People
       function People(name){ 
           this.name = name || 'unknow';
       }
       People.prototype.constructor = People;
       People.prototype.type = 'people';
       People.prototype.isPeople = true;
       
       
       // Father
       People.prototype.type = 'father';
       People.prototype.isFather = true;
       var Father = People;
       
       
       
       // Child 
       People.prototype.type = 'child';
       People.prototype.isChild = true;
       var Child = Father;

在控制台打印它们之间的原型关系：

![20140816135731623020154680.png][]

可见，此时的结果与上述结果一致。

## 1.2、标准：引用实例化的原型继承 ##

我们知道，虽然构造函数的原型链是共享的，但构造函数的实例是与构造函数和其他实例之间是相互独立的，并且构造函数的实例具备了构造函数的所有原型属性和方法。如：

function People(name){ 
           this.name = name || 'unknow';
       }
       
       People.prototype.say = function(){ 
           console.log('我叫' + this.name + '今年' + (this.age || '20') + '岁');
       };
       
       
       // 实例化2个对象
       var zhang = new People('zhang');
       var song = new People('song');
       
       
       zhang.say();
       // => 我叫zhang今年20岁 
       
       song.say();
       // => 我叫song今年20岁 
       
       
       // 改写 zhang 的内置属性
       zhang.name = 'zhangsan';
       // 改写 zhang 的原型属性
       zhang.age = 99;
       zhang.say();
       // => 我叫zhangsan今年99岁 
       
       
       // 看看 song 的原型属性
       song.say();
       // => 我叫song今年20岁
       
       
       // 看看 People 的内置属性
       console.log(People.prototype.name);
       // => undefined
       // 看看 People 的原型属性
       console.log(People.prototype.age);
       // => undefined

可见，实例化对象与构造函数是相对独立的，并且实例对象上有构造函数的所有内置属性、方法和原型属性、方法。因此可以将继承构造函数的原型对象赋值为被继承构造函数的实例化对象，又因为原型对象是一个对象，我们先来看看实例化对象的类型是否为一个对象。

![20140816142438843241872202.png][]

由上可知，实例化对象确实一个对象，因此可以作为构造函数的原型，但又因此这个对象有初始值，因此需要实例化一个空参数的对象：

![20140816142757439836528994.png][]

由上图可知，`empty`对象与普通的字面量对象是无异的，只是由不同的构造函数实例化出来而已，`empty`是由`People`实例化出来的，而`object`是由`Object`实例化出来的。总结后的产物：

function People(name){ 
           this.name = name || 'unknow';
       }
       
       People.prototype.say = function(){ 
           console.log('我叫' + this.name + '今年' + (this.age || '20') + '岁');
       };
       
       
       function Father(){}
       Father.prototype = new People();
       Father.prototype.constructor = Father;
       Father.prototype.sex = 'man';

查看他们之间的原型关系：

![20140816143350282680924629.png][]

`Father.prototype`与`People.prototype`互不影响，并且`Father`继承到了`People`的原型属性和方法，达到目的。并且：

![20140816143605088486051735.png][]

`Father.prototype`继承了`People.prototype`动态添加的属性和方法，而`People.protype`并没有继承`Father.prototype`动态添加的属性和方法，究其原因是`Father.prototype`指向的是`People`的实例，而实例具备构造函数的所有原型属性和方法，并且是独立存在的，这个过程是单向的，也算是一种另类的继承。

是不是到此，我们的标准独立继承就已经研究完了？

## 1.3、标准：内置属性和方法的继承 ##

先看例子：

function People(name){ 
           this.name = name || 'unknow';
       }
       
       function Father(){}
       Father.prototype = new People();
       Father.prototype.constructor = Father;
       
       var father = new Father('张三');
       console.log(father.name);
       // => unknow

`Father.prototype`继承了`People.prototype`，但`People`的内置属性怎么办？我们可以在`Father`实例化的时候走一遍`People`。即：

function People(name){ 
           this.name = name || 'unknow';
       }
       
       function Father(){ 
           // 走一遍 People 构造函数
           People.apply(this, arguments);
       }
       Father.prototype = new People();
       Father.prototype.constructor = Father;
       
       var father = new Father('张三');
       console.log(father.name);
       // => 张三

## 1.4、总结    ##

以上1.2和1.3主要做了两件事：

1.  实例化被继承构造函数的实例作为继承构造函数的原型；
2.  继承构造函数先运行一次被继承构造函数。

# 2、标准继承方法 #

## 2.1、方法    ##

/**
        * 标准原型继承，参考自 nodejs 的 util.inherits
        * @param  {Function} constructor      继承函数
        * @param  {Function} superConstructor 被继承函数
        */
       function inherits(constructor, superConstructor){ 
           constructor.prototype = new superConstructor();
           constructor.prototype.constructor = constructor;
           // 备用操作：自身的静态属性 super_ 指向被继承函数
           constructor.super_ = superConstructor;
       }
       
       function People(name){ 
           this.name = name || 'unknow';
           this.type = 'people';
           this.isPeople = true;
       }
       
       function Father(){ 
           // 1. 执行一次被继承构造函数
           People.apply(this, arguments);
           this.type = 'father';
           this.isFather = true;
       }
       
       // 2. 进行标准原型继承
       inherits(Father, People);
       
       // 3. 添加自己的原型
       // 不能直接赋值: Father.prototype = {};
       Father.prototype.say = function(){ 
           console.log('我叫' + this.name + '今年' + (this.age || '20') + '岁');
       };
       
       
       // 实例化 People
       var people = new People('张三');
       people.age = 99;
       
       console.log(people.type);
       // => father
       
       console.log(people.isPeople);
       // => true
       
       console.log(people.isFather);
       // => undefined
       
       try{ 
           people.say();
       }catch(err){ 
           console.log('%s: %s', err.name, err.message);
           // => TypeError: Object #<People> has no method 'say'
       }
       
       
       // 实例化 Father
       var father = new Father('李四');
       father.age = 99;
       
       console.log(father.type);
       // => father
       
       console.log(father.isPeople);
       // => true
       
       console.log(father.isFather);
       // => true
       
       father.say();
       // => 我叫李四今年99岁

## 2.2、如何为何继承关系链 ##

先看一段比较长的继承关系：

function People(){}
       
       function Father(){ 
           People.apply(this, arguments);
       }
       inherits(Father, People);
       
       function Child(){ 
           Father.apply(this, arguments);
       }
       inherits(Child, Father);
       
       function Man(){ 
           Child.apply(this, arguments);
       }
       inherits(Man, Child);
       
       function Body(){ 
           Man.apply(this, arguments);
       }
       inherits(Body, Man);

如上，`Body -> Man -> Child -> Father -> People`，这是一条关系，是谁在维护这条关系呢？见下图：

![20140816151400285682428163.png][]

通过原型上的`__proto__`指向被继承的构造函数原型来维持这段原型链条关系，`__proto__`是个隐藏的属性，它是非标准的属性。平时我们不需要用到，链接的终点是`Object`的原型，因此`Object.prototype.__proto__===null`。

在2.1里的`inherits`方法里，添加了继承构造函数的`super_`静态属性，可以清楚的知道它的被继承构造函数。

![20140816153104863260895739.png][]

通常判断一个构造函数是否继承自另外一个构造函数，如果继承构造函数的原型是被继承构造函数的实例，那么就可以这样判断：

![20140816153511189586574117.png][]

而如果是通过复制拷贝被继承构造函数原型的话，那么就没法如上检测到被继承构造函数了，因此为什么说这样是标准的。

# 3、特殊用例 #

## 3.1、尝试继承Error ##

如上正常的写法：

function CustomError(){ 
           Error.apply(this, Error);
           this.name = 'CustomError';
       }
       inherits(CustomError, Error);
       
       try{ 
           throw new CustomError('呃……');
       }catch(err){ 
           console.log('%s: %s', err.name, err.message);
           console.log(err.stack);
       }

在控制台打印出：

![20140816163500986383434757.png][]

这里有以下3个特殊的地方：

1.  报错的行号是224，但这里的错误并没有在控制台抛出，而是被捕获住了。
2.  抛出错误的行号是227，而捕获到错误堆栈最后错误行号是224。
3.  错误堆栈中额外多出了一行，即继承方法里的121行。

那我们来看看原生的`Error`是怎样的：

try{ 
           throw new Error('呃……');
       }catch(err){ 
           console.log('%s: %s', err.name, err.message);
           console.log(err.stack);
       }

![20140816163014346744373296.png][]

错误信息和错误行号是完全正确的。

先来看看`Error`对象有哪些静态属性和方法、原型属性和方法。

console.log(Object.getOwnPropertyNames(Error));
       // => ["length", "name", "arguments", "caller", "prototype", 
       // "captureStackTrace", "stackTraceLimit"]
       // Error是个Function的实例，因此"length", "name", "arguments", 
       // "caller", "prototype" 是 Function 的原型属性；
       // 只有 "captureStackTrace", "stackTraceLimit" 是自身的静态属性。
       
       
       console.log(Object.getOwnPropertyNames(Error.prototype));
       // => ["constructor", "name", "message", "toString"]
       // Error.prototype是Object的实例，因此"constructor", "toString"
       // 是Object的原型属性；
       // 只有 "name", "message" 是自身的原型属性。

我们尝试删除掉`Error`对象原型上的`name`和`message`两个属性，看看实例化之后是否还有两个属性出现。

console.log(Object.getOwnPropertyNames(Error.prototype));
       delete(Error.prototype.name);
       delete(Error.prototype.message);
       try{ 
           throw new Error('呃……');
       }catch(err){ 
           console.log('err.name: %s', err.name);
           console.log('err.message: %s', err.message);
           console.log('err.stack: %s', err.stack);
       }
       console.log(Object.getOwnPropertyNames(Error.prototype));

控制台：

![20140816180508937334065232.png][]

最后的`err`对象里，没有`name`属性，但有`message`和`stack`两个属性，说明`name`属性读取的是原型上的，而`message`和`stack`是运行到错误错动态添加上的。

并且从3.1开头的图示里可以看到，错误的源头指向的是实例化`Error`的那一行，因此我们不能以实例化被继承构造函数的方式来实现继承。

并且，不同的浏览器内核实现的`Error`也不尽相同，因此继承一个`Error`需要另辟蹊径：

## 3.2、继承Error方法——直接伪继承 ##

function CustomError(name, message){ 
           if(arguments.length < 2){ 
               message = name;
           }
       
           var err = new Error();
           
           if(err.stack){ 
               this.stack = err.stack;
           }
       
           this.name = name || 'CustomError';
           this.message = message || 'CustomError message';
       }
       
       var err = new CustomError('(⊙o⊙)…');
       console.log(err.stack);
       // 正确stack
       console.log(err instanceof CustomError);
       // => true
       console.log(err instanceof Error);
       // => false

以上是为了照顾需要Error的stack属性而做的，如果不计较这些，可以直接用`inherits`方法。

# 3.3、native构造函数的继承 #

内置的native构造函数与日常的书写方式都不一样，因此直接使用inherits方法继承的话，都会出错，这里就不一一举例了，仅表Error的继承作抛钻引玉之用。而在我们的业务逻辑中继承native构造函数情况最多的就是Error，其他如`Array`、`Date`、`Math`、`Object`这些东西都不必去继承它，也没有必要。

本文的重心部分在介绍标准的继承方式，用于业务、框架逻辑上。

# 4、参考资料 #

*  [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Error][https_developer.mozilla.org_en-US_docs_Web_JavaScript_Reference_Global_Objects_Error]
 *  [http://msdn.microsoft.com/en-us/library/ie/dww52sbt(v=vs.94).aspx][http_msdn.microsoft.com_en-us_library_ie_dww52sbt_v_vs.94_.aspx]
 *  [http://stackoverflow.com/questions/783818/how-do-i-create-a-custom-error-in-javascript][http_stackoverflow.com_questions_783818_how-do-i-create-a-custom-error-in-javascript]

[http_qianduanblog.com_search_E7_BB_A7_E6_89_BF]: http://qianduanblog.com/search/%E7%BB%A7%E6%89%BF/
[20140816134235607005933604.png]: http://qianduanblog.com/uploads/post/20140816134235607005933604.png
[20140816134817447844726327.png]: http://qianduanblog.com/uploads/post/20140816134817447844726327.png
[20140816135731623020154680.png]: http://qianduanblog.com/uploads/post/20140816135731623020154680.png
[20140816142438843241872202.png]: http://qianduanblog.com/uploads/post/20140816142438843241872202.png
[20140816142757439836528994.png]: http://qianduanblog.com/uploads/post/20140816142757439836528994.png
[20140816143350282680924629.png]: http://qianduanblog.com/uploads/post/20140816143350282680924629.png
[20140816143605088486051735.png]: http://qianduanblog.com/uploads/post/20140816143605088486051735.png
[20140816151400285682428163.png]: http://qianduanblog.com/uploads/post/20140816151400285682428163.png
[20140816153104863260895739.png]: http://qianduanblog.com/uploads/post/20140816153104863260895739.png
[20140816153511189586574117.png]: http://qianduanblog.com/uploads/post/20140816153511189586574117.png
[20140816163500986383434757.png]: http://qianduanblog.com/uploads/post/20140816163500986383434757.png
[20140816163014346744373296.png]: http://qianduanblog.com/uploads/post/20140816163014346744373296.png
[20140816180508937334065232.png]: http://qianduanblog.com/uploads/post/20140816180508937334065232.png
[https_developer.mozilla.org_en-US_docs_Web_JavaScript_Reference_Global_Objects_Error]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error
[http_msdn.microsoft.com_en-us_library_ie_dww52sbt_v_vs.94_.aspx]: http://msdn.microsoft.com/en-us/library/ie/dww52sbt%28v=vs.94%29.aspx
[http_stackoverflow.com_questions_783818_how-do-i-create-a-custom-error-in-javascript]: http://stackoverflow.com/questions/783818/how-do-i-create-a-custom-error-in-javascript