JS中的继承

本文介绍javascript中常用的几种继承方式

1.原型链继承

核心：拿父类实例来充当子类原型对象

function Super(){
    this.name = 'gcf';
    this.arr = [1];
}
function Sub(){
    // ...
}
Sub.prototype = new Super();    // 核心
 
var sub1 = new Sub();         //实例化
var sub2 = new Sub();

sub1.name = 'zjn'
sub1.arr.push(2);
alert(sub1.name);    // zjn
alert(sub2.name);    // gcf
 
alert(sub1.arr);    // 1, 2
alert(sub2.arr);    // 1, 2 //因为是引用类型，在改变sub1的值时候，sub2也改变了

• 优点：简单容易实现
• 缺点：
  1.创建子类实例时，无法向父类构造函数传参
  2.修改sub1.arr后sub2.arr也变了，因为来自==原型对象的引用属性是所有实例共享的==

2.构造函数实现继承

核心：借父类的构造函数来增强子类实例，等于是把父类的==实例属性复制==了一份给子类实例装上了（完全没有用到原型）

function Super(val){ //构造函数
    this.val = val;   //属性
    this.arr = [1];
 
    this.fun = function(){ //方法
       alert("hello")
    }
}

function Sub(val){
    Super.call(this, val);   // 核心
    // ...
}
 
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 无法复用函数 每个实例拥有一个新的fun 函数

• 优点
  1.解决了子类实例共享父类引用属性的问题
  2.创建子类实例时，可以向父类构造函数传参
• 缺点
  1.只能继承父类的实例属性和方法，不能继承原型属性/方法
  2.==无法实现函数复用==，每个子类实例都持有一个新的fun函数，太多了就会影响性能(跟上一点一个意思)

3.组合继承(最常用)

核心：把实例函数都放在原型对象上，以实现函数复用。同时还要保留借用构造函数方式的优点

function Super(val){
    // 只在此处声明基本属性和引用属性
    this.val = 1;
    this.arr = [1];
}
//  在此处声明函数 保证函数可以复用
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...

function Sub(val){
    Super.call(this,val);   // 核心
    // ...
}
Sub.prototype = new Super();    // 核心
 
 
var sub1 = new Sub(1);
var sub2 = new Sub(2);
alert(sub1.val)   //1
alert(sub1.fun === sub2.fun);   // true

• 优点：
  1.可以继承引用属性
  2.可以传参
  3.函数可以复用
• 缺点：
  原型上new一个Super后,原型上多了一份Super的实例属性。而Sub实例上的属性屏蔽了原型的上的属性，又是一种内存浪费。不过问题不大，这也是最常用的一种继承方式。

4.寄生组合继承

function creatObj(obj){
    var F=function(){}
    F.prototype=obj;
    return new F();
}

function Super(){
    this.a=1;
    this.b=[1];
}

Super.prototype.c=function(){
    alert(1);
}

function Sub(){
    super.call(this);
}

var proto=creatObj(Super.prototype);
proto.constructor=Sub;
Sub.prototype=proto;

var sub=new Sub();

• 优点：完美

• 缺点：麻烦

参考资料：

1. 重新理解JS的6种继承方式
2. 博客园-JS实现继承的几种方式