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


Posted in Javascript onAugust 28, 2017

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

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

function Person(){
 this.userName = 'ghostwu';
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher (){}
 Teacher.prototype = new Person();

 var oT = new Teacher(); 
 console.log( oT.userName ); //ghostwu
 console.log( oT.showUserName() ); //ghostwu

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

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

如果你不会画这个图,你需要去看下我的这篇文章:

第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),可以继承到父类的方法,但是继承不到父类的属性

function Person(){
 this.userName = 'ghostwu';
 }
 Person.prototype.showUserName = function(){
 return 'Person::showUserName方法';
 }
 function Teacher (){}
 Teacher.prototype = Person.prototype;

 var oT = new Teacher(); 
 console.log( oT.showUserName() ); //ghostwu
 console.log( oT.userName ); //undefined, 没有继承到父类的userName

因为Teacher.prototype的隐式原型(__proto__)只指向Person.prototype,所以获取不到Person实例的属性

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

还是通过instanceof和isPrototypeOf判断

function Person(){
 this.userName = 'ghostwu';
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher (){}
 Teacher.prototype = new Person();
 
 var oT = new Teacher();
 console.log( oT instanceof Teacher ); //true
 console.log( oT instanceof Person ); //true
 console.log( oT instanceof Object ); //true
 console.log( Teacher.prototype.isPrototypeOf( oT ) ); //true
 console.log( Person.prototype.isPrototypeOf( oT ) ); //true
 console.log( Object.prototype.isPrototypeOf( oT ) ); //true

四,父类存在的方法和属性,子类可以覆盖(重写),子类没有的方法和属性,可以扩展

function Person() {}
 Person.prototype.showUserName = function () {
 console.log('Person::showUserName');
 }
 function Teacher() { }
 Teacher.prototype = new Person();
 Teacher.prototype.showUserName = function(){
 console.log('Teacher::showUserName');
 }
 Teacher.prototype.showAge = function(){
 console.log( 22 );
 }
 var oT = new Teacher();
 oT.showUserName(); //Teacher::showUserName
 oT.showAge(); //22

五、重写原型对象之后,其实就是把原型对象的__proto__的指向发生了改变

原型对象prototype的__proto__的指向发生了改变,会把原本的继承关系覆盖(切断)

function Person() {}
 Person.prototype.showUserName = function () {
 console.log('Person::showUserName');
 }
 function Teacher() {}
 Teacher.prototype = new Person();
 Teacher.prototype = {
 showAge : function(){
 console.log( 22 );
 }
 }
 var oT = new Teacher();
 oT.showAge(); //22
 oT.showUserName();

上例,第7行,Teacher.prototype重写了Teacher的原型对象(prototype),原来第6行的原型对象的隐式原型(__proto__)指向就没有作用了

所以在第14行,oT.showUserName() 就会发生调用错误,因为Teacher的原型对象(prototype)的隐式原型(__proto__)不再指向父类(Person)的实例,继承关系被破坏了.

六、在继承过程中,小心处理实例的属性上引用类型的数据

function Person(){
 this.skills = [ 'php', 'javascript' ];
 }
 function Teacher (){}
 Teacher.prototype = new Person();

 var oT1 = new Teacher();
 var oT2 = new Teacher();
 oT1.skills.push( 'linux' );
 console.log( oT2.skills ); //php, java, linux

oT1的skills添加了一项linux数据,其他的实例都能访问到,因为其他实例中共享了skills数据,skills是一个引用类型

七、借用构造函数

为了消除引用类型影响不同的实例,可以借用构造函数,把引用类型的数据复制到每个对象上,就不会相互影响了

function Person( uName ){
 this.skills = [ 'php', 'javascript' ];
 this.userName = uName;
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher ( uName ){
 Person.call( this, uName );
 }
 var oT1 = new Teacher();
 oT1.skills.push( 'linux' );
 var oT2 = new Teacher();
 console.log( oT2.skills ); //php,javascript
 console.log( oT2.showUserName() );

虽然oT1.skills添加了一项Linux,但是不会影响oT2.skills的数据,通过子类构造函数中call的方式,去借用父类的构造函数,把父类的属性复制过来,而且还能

传递参数,如第8行,但是第15行,方法调用错误,因为在构造中只复制了属性,不会复制到父类原型对象上的方法

八、组合继承(原型对象+借用构造函数)

经过以上的分析, 单一的原型继承的缺点有:

1、不能传递参数,如,

Teacher.prototype = new Person();
有些人说,小括号后面可以跟参数啊,没错,但是只要跟了参数,子类所有的实例属性,都是跟这个一样,说白了,还是传递不了参数

2、把引用类型放在原型对象上,会在不同实例上产生相互影响

单一的借用构造函数的缺点:

1、不能复制到父类的方法

刚好原型对象方式的缺点,借用构造函数可以弥补,借用构造函数的缺点,原型对象方式可以弥补,于是,就产生了一种组合继承方法:

function Person( uName ){
 this.skills = [ 'php', 'javascript' ];
 this.userName = uName;
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher ( uName ){
 Person.call( this, uName );
 }
 Teacher.prototype = new Person();

 var oT1 = new Teacher( 'ghostwu' );
 oT1.skills.push( 'linux' );
 var oT2 = new Teacher( 'ghostwu' );
 console.log( oT2.skills ); //php,javascript
 console.log( oT2.showUserName() ); //ghostwu

子类实例oT2的skills不会受到oT1的影响,子类的实例也能调用到父类的方法。

以上这篇[js高手之路]从原型链开始图解继承到组合继承的产生详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
[js高手之路]原型式继承与寄生式继承详解
Aug 28 #Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 #Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 #Javascript
js排序与重组的实例讲解
Aug 28 #Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 #Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 #Javascript
You might like
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
jQuery实现验证用户登录
2019/12/10 jQuery
js实现动态时钟
2020/03/12 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python之列表实现栈的工作功能
2019/01/28 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python定义具名元组实例操作
2021/02/28 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
女子职高个人自荐书
2014/02/01 职场文书
机关保密承诺书
2014/06/03 职场文书
团队精神口号
2014/06/06 职场文书
我的中国梦口号
2014/06/16 职场文书
刘胡兰观后感
2015/06/16 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang