javascript原型继承（第五篇）---几种继承方式的优缺点

92 阅读 0 评论 61 点赞

我是靠谱客的博主追寻导师，最近开发中收集的这篇文章主要介绍javascript原型继承（第五篇）---几种继承方式的优缺点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在讲几种继承方式的优缺点之前，先给大家介绍一下在javascript中对各种属性的分类

在javascript中，数据分为简单数据和复杂数据，简单数据在对象里称为基本属性，而数组，函数在对象里称为引用属性（数组，函数其实都是对象）

对此不太清楚的，可以参考我之前的博客 javascript数据类型

下面具体介绍一下在对象里各种属性的分类

function Fun(){
    // 私有属性
    var val = 1;        // 私有基本属性
    var arr = [1];      // 私有引用属性
    function fun(){}    // 私有函数（引用属性）

    // 实例属性
    this.val = 1;               // 实例基本属性
    this.arr = [1];             // 实例引用属性
    this.fun = function(){};    // 实例函数（引用属性）
}

// 原型属性
Fun.prototype.val = 1;              // 原型基本属性
Fun.prototype.arr = [1];            // 原型引用属性
Fun.prototype.fun = function(){};   // 原型函数（引用属性）

在看此篇博客之前，需要先看一下我的上一篇博客 javascript原型继承（第四篇）—几种继承方式，且要看懂里面的内容。

在看懂上一篇的基础上，再来看这篇，便没有什么难度了，而我的本意也就是用这篇写一下上一篇里各个继承方式的优缺点。

一、原型链继承

function Super(){
    this.val = 1;
    this.arr = [1];
}
function Sub(){
    // ...
}
Sub.prototype = new Super();    // 核心
Sub.prototype.constructor = Sub;

var sub1 = new Sub();
var sub2 = new Sub();
sub1.val = 2;
sub1.arr.push(2);
alert(sub1.val);    // 2
alert(sub2.val);    // 1

alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1, 2

优点：

1.简单，易于实现

缺点：

1.修改sub1.arr后sub2.arr也变了，因为来自原型对象的引用属性是所有实例共享的。
（原因：执行sub1.arr.push(2);先对sub1进行属性查找，找遍了实例属性（在本例中没有实例属性），没找到，就开始顺着原型链向上找，拿到了sub1的原型对象，一搜身，发现有arr属性。于是给arr末尾插入了2，所以sub2.arr也变了）

2.创建子类实例时，无法向父类构造函数传参

二、构造函数继承

原型链很简单，可是存在2个致命缺点简直不能用。于是，便有了这个构造函数继承，

function Super(val){
    this.val = val;
    this.arr = [1];

    this.fun = function(){
        // ...
    }
}
function Sub(val){
    Super.call(this, arguments);   // 核心
    // ...
}

var sub1 = new Sub(1);
var sub2 = new Sub(2);
sub1.arr.push(2);
alert(sub1.val);    // 1
alert(sub2.val);    // 2

alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1

alert(sub1.fun === sub2.fun);   // false，因为sub1和sub2各自拥有fun,它们的内存地址是不同的

优点：

1.解决了子类实例共享父类引用属性的问题
2.创建子类实例时，可以向父类构造函数传参

缺点：

1.无法实现函数复用，每个子类实例都持有一个新的fun函数，如果实例太多，会造成内存大量被占用

三、组合继承

目前，我们的构造函数继承仍旧有问题，所以便产生了组合继承

function Super(){
    // 只在此处声明基本属性和引用属性
    this.val = 1;
    this.arr = [1];
}
//  在此处声明函数
Super.prototype.fun = function(){};
//Super.prototype.fun3...
function Sub(){
    Super.call(this);   // 核心
    // ...
}
Sub.prototype = new Super();    // 核心

var sub1 = new Sub(1);
var sub2 = new Sub(2);
sub1.val = 2;
sub1.arr.push(2);
alert(sub1.val);    // 2
alert(sub2.val);    // 1

alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1
alert(sub1.fun === sub2.fun); //true