[js高手之路]从原型链开始图解继承到组合继承的产生

 于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情

一、把父类的实例对象赋给子类的原型对象(prototype),可以实现继承

复制代码
 1         function Person(){  2             this.userName = 'ghostwu';  3         }  4         Person.prototype.showUserName = function(){  5             return this.userName;  6         }  7         function Teacher (){}  8         Teacher.prototype = new Person();  9 10         var oT = new Teacher();  11         console.log( oT.userName ); //ghostwu12         console.log( oT.showUserName() ); //ghostwu
复制代码

通过把父类(Person)的一个实例赋给子类Teacher的原型对象,就可以实现继承,子类的实例就可以访问到父类的属性和方法

如果你不会画这个图,你需要去看下我的这篇文章:[js高手之路]一步步图解javascript的原型(prototype)对象,原型链

第11行,执行oT.userName, 首先去oT对象上查找,很明显oT对象上没有任何属性,所以就顺着oT的隐式原型__proto__的指向查找到Teacher.prototype,

发现还是没有userName这个属性,继续沿着Teacher.prototype.__proto__向上查找,找到了new Person() 这个实例上面有个userName,值为ghostwu

所以停止查找,输出ghostwu.

第12行,执行oT.showUserName前面的过程同上,但是在new Person()这个实例上还是没有查找到showUserName这个方法,继续沿着new Person()的

隐式原型__proto__的指向( Person.prototype )查找,在Person.prototype上找到了showUserName这个方法,停止查找,输出ghostwu.

二、把父类的原型对象(prototype)赋给子类的原型对象(prototype),可以继承到父类的方法,但是继承不到父类的属性

复制代码
 1         function Person(){  2             this.userName = 'ghostwu';  3         }  4         Person.prototype.showUserName = function(){  5             return 'Person::showUserName方法';  6         }  7         function Teacher (){}  8         Teacher.prototype = Person.prototype;  9 10         var oT = new Teacher();  11         console.log( oT.showUserName() ); //ghostwu12         console.log( oT.userName ); //undefined, 没有继承到父类的userName
复制代码

因为Teacher.prototype被Person.protoype替换了( 第8行代码 ),所以,Teacher的prototype属性就直接指向了Person.prototype. 所以获取不到Person实例的属性

三、发生继承关系后,实例与构造函数(类)的关系判断

还是通过instanceofisPrototypeOf判断

复制代码
 1         function Person(){  2             this.userName = 'ghostwu';  3         }  4         Person.prototype.showUserName = function(){  5             return this.userName;  6         }  7         function Teacher (){}  8         Teacher.prototype = new Person();  9         10         var oT = new

                    
                
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信