再谈javascript原型继承


Posted in Javascript onNovember 10, 2014

真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承。

原型与原型链

说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型继承的基础。
在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的原型,这样就形成了原型链。下面这张图很好的解释了Javascript中的原型和原型链的关系。

再谈javascript原型继承

每个函数都是Function函数创建的对象,所以每个函数也有一个__proto__属性指向Function函数的原型。这里需要指出的是,真正形成原型链的是每个对象的__proto__属性,而不是函数的prototype属性,这是很重要的。

原型继承

基本模式

var Parent = function(){

    this.name = 'parent' ;

} ;

Parent.prototype.getName = function(){

    return this.name ;

} ;

Parent.prototype.obj = {a : 1} ;
var Child = function(){

    this.name = 'child' ;

} ;

Child.prototype = new Parent() ;
var parent = new Parent() ;

var child = new Child() ;
console.log(parent.getName()) ; //parent

console.log(child.getName()) ; //child

这种是最简单实现原型继承的方法,直接把父类的对象赋值给子类构造函数的原型,这样子类的对象就可以访问到父类以及父类构造函数的prototype中的属性。 这种方法的原型继承图如下:

再谈javascript原型继承

这种方法的优点很明显,实现十分简单,不需要任何特殊的操作;同时缺点也很明显,如果子类需要做跟父类构造函数中相同的初始化动作,那么就得在子类构造函数中再重复一遍父类中的操作:

var Parent = function(name){

    this.name = name || 'parent' ;

} ;

Parent.prototype.getName = function(){

    return this.name ;

} ;

Parent.prototype.obj = {a : 1} ;
var Child = function(name){

    this.name = name || 'child' ;

} ;

Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;

var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent

console.log(child.getName()) ; //myChild

上面这种情况还只是需要初始化name属性,如果初始化工作不断增加,这种方式是很不方便的。因此就有了下面一种改进的方式。

借用构造函数

var Parent = function(name){

    this.name = name || 'parent' ;

} ;

Parent.prototype.getName = function(){

    return this.name ;

} ;

Parent.prototype.obj = {a : 1} ;
var Child = function(name){

    Parent.apply(this,arguments) ;

} ;

Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;

var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent

console.log(child.getName()) ; //myChild

上面这种方法在子类构造函数中通过apply调用父类的构造函数来进行相同的初始化工作,这样不管父类中做了多少初始化工作,子类也可以执行同样的初始化工作。但是上面这种实现还存在一个问题,父类构造函数被执行了两次,一次是在子类构造函数中,一次在赋值子类原型时,这是很多余的,所以我们还需要做一个改进:

var Parent = function(name){

    this.name = name || 'parent' ;

} ;

Parent.prototype.getName = function(){

    return this.name ;

} ;

Parent.prototype.obj = {a : 1} ;
var Child = function(name){

    Parent.apply(this,arguments) ;

} ;

Child.prototype = Parent.prototype ;
var parent = new Parent('myParent') ;

var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent

console.log(child.getName()) ; //myChild

这样我们就只需要在子类构造函数中执行一次父类的构造函数,同时又可以继承父类原型中的属性,这也比较符合原型的初衷,就是把需要复用的内容放在原型中,我们也只是继承了原型中可复用的内容。上面这种方式的原型图如下:

再谈javascript原型继承

临时构造函数模式(圣杯模式)

上面借用构造函数模式最后改进的版本还是存在问题,它把父类的原型直接赋值给子类的原型,这就会造成一个问题,就是如果对子类的原型做了修改,那么这个修改同时也会影响到父类的原型,进而影响父类对象,这个肯定不是大家所希望看到的。为了解决这个问题就有了临时构造函数模式。

var Parent = function(name){

    this.name = name || 'parent' ;

} ;

Parent.prototype.getName = function(){

    return this.name ;

} ;

Parent.prototype.obj = {a : 1} ;
var Child = function(name){

    Parent.apply(this,arguments) ;

} ;

var F = new Function(){} ;

F.prototype = Parent.prototype ;

Child.prototype = new F() ;
var parent = new Parent('myParent') ;

var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent

console.log(child.getName()) ; //myChild

该方法的原型继承图如下:

再谈javascript原型继承

很容易可以看出,通过在父类原型和子类原型之间加入一个临时的构造函数F,切断了子类原型和父类原型之间的联系,这样当子类原型做修改时就不会影响到父类原型。

我的方法

《Javascript模式》中到圣杯模式就结束了,可是不管上面哪一种方法都有一个不容易被发现的问题。大家可以看到我在'Parent'的prototype属性中加入了一个obj对象字面量属性,但是一直都没有用。我们在圣杯模式的基础上来看看下面这种情况:

var Parent = function(name){

    this.name = name || 'parent' ;

} ;

Parent.prototype.getName = function(){

    return this.name ;

} ;

Parent.prototype.obj = {a : 1} ;
var Child = function(name){

    Parent.apply(this,arguments) ;

} ;

var F = new Function(){} ;

F.prototype = Parent.prototype ;

Child.prototype = new F() ;
var parent = new Parent('myParent') ;

var child = new Child('myChild') ;
console.log(child.obj.a) ; //1

console.log(parent.obj.a) ; //1

child.obj.a = 2 ;

console.log(child.obj.a) ; //2

console.log(parent.obj.a) ; //2

在上面这种情况中,当我修改child对象obj.a的时候,同时父类的原型中的obj.a也会被修改,这就发生了和共享原型同样的问题。出现这个情况是因为当访问child.obj.a的时候,我们会沿着原型链一直找到父类的prototype中,然后找到了obj属性,然后对obj.a进行修改。再看看下面这种情况:

var Parent = function(name){

    this.name = name || 'parent' ;

} ;

Parent.prototype.getName = function(){

    return this.name ;

} ;

Parent.prototype.obj = {a : 1} ;
var Child = function(name){

    Parent.apply(this,arguments) ;

} ;

var F = new Function(){} ;

F.prototype = Parent.prototype ;

Child.prototype = new F() ;
var parent = new Parent('myParent') ;

var child = new Child('myChild') ;
console.log(child.obj.a) ; //1

console.log(parent.obj.a) ; //1

child.obj.a = 2 ;

console.log(child.obj.a) ; //2

console.log(parent.obj.a) ; //2

这里有一个关键的问题,当对象访问原型中的属性时,原型中的属性对于对象来说是只读的,也就是说child对象可以读取obj对象,但是无法修改原型中obj对象引用,所以当child修改obj的时候并不会对原型中的obj产生影响,它只是在自身对象添加了一个obj属性,覆盖了父类原型中的obj属性。而当child对象修改obj.a时,它先读取了原型中obj的引用,这时候child.obj和Parent.prototype.obj是指向同一个对象的,所以child对obj.a的修改会影响到Parent.prototype.obj.a的值,进而影响父类的对象。AngularJS中关于$scope嵌套的继承方式就是模范Javasript中的原型继承来实现的。
根据上面的描述,只要子类对象中访问到的原型跟父类原型是同一个对象,那么就会出现上面这种情况,所以我们可以对父类原型进行拷贝然后再赋值给子类原型,这样当子类修改原型中的属性时就只是修改父类原型的一个拷贝,并不会影响到父类原型。具体实现如下:

var deepClone = function(source,target){

    source = source || {} ;

    var toStr = Object.prototype.toString ,

        arrStr = '[object array]' ;

    for(var i in source){

        if(source.hasOwnProperty(i)){

            var item = source[i] ;

            if(typeof item === 'object'){

                target[i] = (toStr.apply(item).toLowerCase() === arrStr) : [] ? {} ;

                deepClone(item,target[i]) ;    

            }else{

                deepClone(item,target[i]) ;

            }

        }

    }

    return target ;

} ;

var Parent = function(name){

    this.name = name || 'parent' ;

} ;

Parent.prototype.getName = function(){

    return this.name ;

} ;

Parent.prototype.obj = {a : '1'} ;
var Child = function(name){

    Parent.apply(this,arguments) ;

} ;

Child.prototype = deepClone(Parent.prototype) ;
var child = new Child('child') ;

var parent = new Parent('parent') ;
console.log(child.obj.a) ; //1

console.log(parent.obj.a) ; //1

child.obj.a = '2' ;

console.log(child.obj.a) ; //2

console.log(parent.obj.a) ; //1

综合上面所有的考虑,Javascript继承的具体实现如下,这里只考虑了Child和Parent都是函数的情况下:
var deepClone = function(source,target){

    source = source || {} ;

    var toStr = Object.prototype.toString ,

        arrStr = '[object array]' ;

    for(var i in source){

        if(source.hasOwnProperty(i)){

            var item = source[i] ;

            if(typeof item === 'object'){

                target[i] = (toStr.apply(item).toLowerCase() === arrStr) : [] ? {} ;

                deepClone(item,target[i]) ;    

            }else{

                deepClone(item,target[i]) ;

            }

        }

    }

    return target ;

} ;
var extend = function(Parent,Child){

    Child = Child || function(){} ;

    if(Parent === undefined)

        return Child ;

    //借用父类构造函数

    Child = function(){

        Parent.apply(this,argument) ;

    } ;

    //通过深拷贝继承父类原型    

    Child.prototype = deepClone(Parent.prototype) ;

    //重置constructor属性

    Child.prototype.constructor = Child ;

} ;

总结

说了这么多,其实Javascript中实现继承是十分灵活多样的,并没有一种最好的方法,需要根据不同的需求实现不同方式的继承,最重要的是要理解Javascript中实现继承的原理,也就是原型和原型链的问题,只要理解了这些,自己实现继承就可以游刃有余。

Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
JS实现瀑布流布局
Oct 21 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
让angularjs支持浏览器自动填表
Nov 10 #Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 #Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 #Javascript
浅谈JavaScript 框架分类
Nov 10 #Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 #Javascript
jquery插件推荐 jquery.cookie
Nov 09 #Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 #Javascript
You might like
Get或Post提交值的非法数据处理
2006/10/09 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
Prototype框架详解
2015/11/25 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
老生常谈Python基础之字符编码
2017/06/14 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python3安装speech语音模块的方法
2018/12/24 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
python实现简单的五子棋游戏
2020/09/01 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
Linux的文件类型
2016/07/05 面试题
企业厂长岗位职责
2013/12/17 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
社区活动总结
2015/02/04 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android