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

不同于基于类的编程语言,如 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()方法即可。

时间: 2024-08-01 17:06:22

JavaScript的9种继承实现方式归纳_javascript技巧的相关文章

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

  这篇文章主要介绍了JavaScript的9种继承实现方式归纳,本文讲解了原型链继承.原型继承(非原型链).临时构造器继承.属性拷贝.对象间继承等继承方式,需要的朋友可以参考下 不同于基于类的编程语言,如 C++ 和 Java,JavaScript 中的继承方式是基于原型的.同时由于 JavaScript 是一门非常灵活的语言,其实现继承的方式也非常多. 首要的基本概念是关于构造函数和原型链的,父对象的构造函数称为Parent,子对象的构造函数称为Child,对应的父对象和子对象分别为pare

JavaScript实现打开链接页面的方式汇总_javascript技巧

在页面中的链接除了常规的方式以外,如果使用javascript,还有很多种方式,下面是一些使用javascript,打开链接的几种方式: 1.使用window的open方法打开链接,这里可是在制定页面中打开链接,也可以定制打开页面的尺寸等等. <a href="javascript:window.open('http://www.google.com','_self') "> open a link 1</a><br/> 2.使用document.U

Javascript页面跳转常见实现方式汇总_javascript技巧

本文实例总结了Javascript页面跳转常见实现方式.分享给大家供大家参考,具体如下: 概述 相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿出和大家共享一下. 第一种:直接跳转加参数 <script language="javascript" type="text/javascript"> window.location

JavaScript实现页面跳转的方式汇总_javascript技巧

在动手做网站时,不可避免的会碰到页面跳转的问题,新页面是在当前页面打开呢?还是在新窗口打开呢?是不是需要依据参数进行跳转呢或者要经过用户确认后再跳转呢?等等很多种情况,下面我们来看下常用的一些JS实现页面跳转的方式例子. 按钮式: <INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.ddhbb.com/'">

关于JavaScript的面向对象和继承有利新手学习_javascript技巧

这是一篇关于JavaScript的面向对象和继承的文章,写于1年前,作者循序渐进,对想学习JavaScript中面向对象的同学来说是很有帮助的,因此试着翻译一下,不妥之处,请指正.原文链接Objects and Inheritance in Javascript 虽然一些Javascript用户可能永远也不需要知道原型或面向对象语言的性质,但是那些来自传统面向对象的语言的开发者使用的时候会发现JavaScript的继承模型非常的奇怪.而不同的JS框架提供了各自的方法来编写类面向对象(class-

JavaScript中5种调用函数的方法_javascript技巧

这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的

JavaScript中几种常见排序算法小结_javascript技巧

说明 写这个主要是为了锻炼自己,并无实际意义. 每个浏览器测试得出的数据会不一样.比如我用chrome 测试 一般快速排序都会最快,IE 则根据数组长度有可能希尔最快. 不要用太大数据去测试冒泡排序(浏览器崩溃了我不管) 如果有兴趣可以 下载测试页面 个人理解 冒泡排序:最简单,也最慢,貌似长度小于7最优 插入排序: 比冒泡快,比快速排序和希尔排序慢,较小数据有优势 快速排序:这是一个非常快的排序方式,V8的sort方法就使用快速排序和插入排序的结合 希尔排序:在非chrome下数组长度小于10

javascript的几种继承方法介绍_基础知识

1.原型链继承:构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.确认原型和实例之间的关系用instanceof. 原型链继承缺点:字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数 function Parent(){ this.name='mike'; } function Child(){ this.age=12; } //儿子继承父亲(原型链) Child.prototype

详述JavaScript实现继承的几种方式(推荐)_javascript技巧

ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. 原型链 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的指针.如果:我们让原型对象A等于另一个类型B的实例,那么原型对象A就会有一个指针指向B的原型对象,相应的B的原型对象中保存着指向其构造函数的指针.假如B的原型对象又是另一个类型的实例,那么上述的关系依旧成立,如此层层递进,就构成了实例与原型的