JavaScript的9种继承实现方式归纳


Posted in Javascript onMay 18, 2015

不同于基于类的编程语言,如 C++ 和 Java,JavaScript 中的继承方式是基于原型的。同时由于 JavaScript 是一门非常灵活的语言,其实现继承的方式也非常多。

首要的基本概念是关于构造函数和原型链的,父对象的构造函数称为Parent,子对象的构造函数称为Child,对应的父对象和子对象分别为parent和child。

对象中有一个隐藏属性[[prototype]](注意不是prototype),在 Chrome 中是__proto__,而在某些环境下则不可访问,它指向的是这个对象的原型。在访问任何一个对象的属性或方法时,首先会搜索本对象的所有属性,如果找不到的话则会根据[[prototype]]沿着原型链逐步搜索其原型对象上的属性,直到找到为止,否则返回undefined。

1.原型链继承:

原型链是 JavaScript 中实现继承的默认方式,如果要让子对象继承父对象的话,最简单的方式是将子对象构造函数的prototype属性指向父对象的一个实例:

function Parent() {}

function Child() {}

Child.prototype = new Parent()

这个时候,Child的prototype属性被重写了,指向了一个新对象,但是这个新对象的constructor属性却没有正确指向Child,JS 引擎并不会自动为我们完成这件工作,这需要我们手动去将Child的原型对象的constructor属性重新指向Child:
Child.prototype.constructor = Child

以上就是 JavaScript 中的默认继承机制,将需要重用的属性和方法迁移至原型对象中,而将不可重用的部分设置为对象的自身属性,但这种继承方式需要新建一个实例作为原型对象,效率上会低一些。

2.原型继承(非原型链):

为了避免上一个方法需要重复创建原型对象实例的问题,可以直接将子对象构造函数的prototype指向父对象构造函数的prototype,这样,所有Parent.prototype中的属性和方法也能被重用,同时不需要重复创建原型对象实例:

Child.prototype = Parent.prototype

Child.prototype.constructor = Child

但是我们知道,在 JavaScript 中,对象是作为引用类型存在的,这种方法实际上是将Child.prototype和Parent.prototype中保存的指针指向了同一个对象,因此,当我们想要在子对象原型中扩展一些属性以便之后继续继承的话,父对象的原型也会被改写,因为这里的原型对象实例始终只有一个,这也是这种继承方式的缺点。

3.临时构造器继承:

为了解决上面的问题,可以借用一个临时构造器起到一个中间层的作用,所有子对象原型的操作都是在临时构造器的实例上完成,不会影响到父对象原型:

var F = function() {}

F.prototype = Parent.prototype

Child.prototype = new F()

Child.prototype.constructor = Child

同时,为了可以在子对象中访问父类原型中的属性,可以在子对象构造器上加入一个指向父对象原型的属性,如uber,这样,可以在子对象上直接通过child.constructor.uber访问到父级原型对象。

我们可以将上面的这些工作封装成一个函数,以后调用这个函数就可以方便实现这种继承方式了:

function extend(Child, Parent) {

    var F = function() {}

    F.prototype = Parent.prototype

    Child.prototype = new F()

    Child.prototype.constructor = Child

    Child.uber = Parent.prototype

}

然后就可以这样调用:
extend(Dog, Animal)

4.属性拷贝:

这种继承方式基本没有改变原型链的关系,而是直接将父级原型对象中的属性全部复制到子对象原型中,当然,这里的复制仅仅适用于基本数据类型,对象类型只支持引用传递。

function extend2(Child, Parent) {

    var p = Parent.prototype

    var c = Child.prototype

    for (var i in p) {

        c[i] = p[i]

    }

    c.uber = p

}

这种方式对部分原型属性进行了重建,构建对象的时候效率会低一些,但是能够减少原型链的查找。不过我个人觉得这种方式的优点并不明显。

5.对象间继承:

除了基于构造器间的继承方法,还可以抛开构造器直接进行对象间的继承。即直接进行对象属性的拷贝,其中包括浅拷贝和深拷贝。

浅拷贝:
接受要继承的对象,同时创建一个新的空对象,将要继承对象的属性拷贝至新对象中并返回这个新对象:

function extendCopy(p) {

    var c = {}

    for (var i in p) {

        c[i] = p[i]

    }

    c.uber = p

    return c

}

拷贝完成之后对于新对象中需要改写的属性可以进行手动改写。

深拷贝:
浅拷贝的问题也显而易见,它不能拷贝对象类型的属性而只能传递引用,要解决这个问题就要使用深拷贝。深拷贝的重点在于拷贝的递归调用,检测到对象类型的属性时就创建对应的对象或数组,并逐一复制其中的基本类型值。

function deepCopy(p, c) {

    c = c || {}

    for (var i in p) {

        if (p.hasOwnProperty(i)) {

            if (typeof p[i] === 'object') {

                c[i] = Array.isArray(p[i]) ? [] : {}

                deepCopy(p[i], c[i])

            } else {

                c[i] = p[i]

            }

        }

    }

    return c

}

其中用到了一个 ES5 的Array.isArray()方法用于判断参数是否为数组,没有实现此方法的环境需要自己手动封装一个 shim。
Array.isArray = function(p) {

    return p instanceof Array

}

但是使用instanceof操作符无法判断来自不同框架的数组变量,但这种情况比较少。

6.原型继承:

借助父级对象,通过构造函数创建一个以父级对象为原型的新对象:

function object(o) {

    var n

    function F() {}

    F.prototype = o

    n = new F()

    n.uber = o

    return n

}

这里,直接将父对象设置为子对象的原型,ES5 中的 Object.create()方法就是这种实现方式。

7.原型继承和属性拷贝混用:

原型继承方法中以传入的父对象为原型构建子对象,同时还可以在父对象提供的属性之外额外传入需要拷贝属性的对象:

function ojbectPlus(o, stuff) {

    var n

    function F() {}

    F.prototype = o

    n = new F()

    n.uber = o
    for (var i in stuff) {

        n[i] = stuff[i]

    }

    return n

}

8.多重继承:

这种方式不涉及原型链的操作,传入多个需要拷贝属性的对象,依次进行属性的全拷贝:

function multi() {

    var n = {}, stuff, i = 0,

        len = arguments.length

    for (i = 0; i < len; i++) {

        stuff = arguments[i]

        for (var key in stuff) {

            n[i] = stuff[i]

        }

    }

    return n

}

根据对象传入的顺序依次进行拷贝,也就是说,如果后传入的对象包含和前面对象相同的属性,后者将会覆盖前者。

9.构造器借用:

JavaScript中的call()和apply()方法非常好用,其改变方法执行上下文的功能在继承的实现中也能发挥作用。所谓构造器借用是指在子对象构造器中借用父对象的构造函数对this进行操作:

function Parent() {}

Parent.prototype.name = 'parent'
function Child() {

    Parent.apply(this, arguments)

}

var child = new Child()

console.log(child.name)

这种方式的最大优势就是,在子对象的构造器中,是对子对象的自身属性进行完全的重建,引用类型的变量也会生成一个新值而不是一个引用,所以对子对象的任何操作都不会影响父对象。

而这种方法的缺点在于,在子对象的构建过程中没有使用过new操作符,因此子对象不会继承父级原型对象上的任何属性,在上面的代码中,child的name属性将会是undefined。

要解决这个问题,可以再次手动将子对象构造器原型设为父对象的实例:

Child.prototype = new Parent()

但这样又会带来另一个问题,即父对象的构造器会被调用两次,一次是在父对象构造器借用过程中,另一次是在继承原型过程中。

要解决这个问题,就要去掉一次父对象构造器的调用,构造器借用不能省略,那么只能去掉后一次调用,实现继承原型的另一方法就是迭代复制:

extend2(Child, Parent)

使用之前实现的extend2()方法即可。
Javascript 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
chrome原生方法之数组
Nov 30 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
JQuery中上下文选择器实现方法
May 18 #Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 #Javascript
JQuery球队选择实例
May 18 #Javascript
JQuery实现动态添加删除评论的方法
May 18 #Javascript
TypeError document.getElementById(...) is null错误原因
May 18 #Javascript
JQuery实现带排序功能的权限选择实例
May 18 #Javascript
JQuery中clone方法复制节点
May 18 #Javascript
You might like
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php遍历数组的方法分享
2012/03/22 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
详解如何修改python中字典的键和值
2020/09/29 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
保健品市场营销方案
2014/03/31 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL