JS继承的几种实现方式

js 继承

ECMAScript只支持实现继承，实现继承主要的依靠原型链来实现的。下面介绍几种JS实现继承的方式，以及各自的优缺点。

原型链

实现原理：利用原型让一个引用类型继承另一个引用类型的属性和方法.本质为重写原型对象。

function Sup(){
    this.name = "sup";
    this.items = [1, 2, 3];
}
Sup.prototype.geName = function(){
    console.log(this.name);
}
function Sub(){
    this.age = 25;
} 
Sub.prototype = new Sup();
Sub.prototype.getAge =function(){
    console.log(this.age);
}
var instance = new Sub();
instance.getName();

存在问题
1.继承包含引用类型值的原型，引用类型的原型属性会被所以实例共享。耦合度较高。
2.创建子类型的实例时不能向父类的构造函数传递 参数。

验证demo

var a = new Sub();
console.log(a.items);   //[1, 2, 3]
a.items.push(4);
var b = new Sub();
console.log(b.items);   //[1, 2, 3, 4]

如何解决上述问题？

借用构造函数

function Sup(name){
    this.name = name;
    this.items = [1, 2, 3];
}
Sup.getItems = function(){
    console.log(this.items);
}
function Sub(name){
    Sup.call(this, name);
}
var a = new Sub();
a.items.push(4);
console.log(a.items);   //[1, 2, 3, 4]
var b = new Sub();
console.log(b.items);    //[1, 2, 3]

可以解决上诉的问题，但同时也存在缺陷。

父类原型链上定义的方法对子类是不可见的，若要继承方法，则父类的方法都应定义在构造函数内部，方法都是在构造函数中定义，不能复用

如何解决？

组合继承

function Sup(name){
    this.name = name;
    this.items = [1, 2, 3];
}
Sup.prototype.getItems = function(){
    console.log("items: ", this.items);
}
Sup.prototype.getName = function(){
    console.log("name: ", this.name);
}
function Sub(name, age){
    Sup.call(this, name);
    this.age = age;
}
Sub.prototype = new Sup();
Sub.prototype.constructor = Sub;
Sub.prototype.getAge = function(){
    console.log("age: ", this.age);
}
var a = new Sub("lilei", 25);
a.items.push(4);
a.getName();    //lilei
a.getAge();     //25
a.getItems();   //[1, 2, 3, 4]
var b = new Sub("hanmeimei", 24);
b.getName();    //hanmeimei
b.getAge();     //24
b.getItems();   //[1, 2, 3]

那么问题来了，又存在哪些缺陷呢？

构造函数和原型链上定义了重复的属性

为解决上述问题，先来看一下接下来介绍的一种模式

寄生式继承

function object(sup){
    function F(){}
    F.prototype = sup;
    return new F();
}
function createObj(obj){
    var clone = object(obj);
    clone.getName = function(){
        console.log(this.name);
    }
    clone.getFriends = function(){
        console.log(this.friends);
    }
    return clone;
}
var obj = {
    name : 'lily',
    friends: ['lucy', 'lilei', 'hanmeimei']
}
var obj1 = createObj(obj),
    obj2 = createObj(obj);
    obj1.name = 'jim';
    obj1.friends.push('lady gaga');
//     obj2.friends = ['katy perry', 'rianna', 'adele'];
    obj1.getName();     //jim
    obj1.getFriends();  //['lucy', 'lilei', 'hanmeimei', 'lady gaga']
    obj2.getName();     //lily
    obj2.getFriends();  //['lucy', 'lilei', 'hanmeimei', 'lady gaga']

存在问题：含有应用类型的值始终会共享
具体原因上节课领导已经分析过，好好回忆一下下，是不是忘了(´･･)ﾉ(._.`)

在主要考虑对象而不是自定义类型和构造函数的情况下是有用的

寄生组合式继承

function inherit(Sup, Sub){
    function F(){}
    F.prototype = Sup.prototype;
    var obj = new F();
    obj.constructor = Sub;
    Sub.prototype = obj;
}

function Sup(name){
    this.name = name;
    this.items = [1, 2, 3];
}
Sup.prototype.getItems = function(){
    console.log("items: ", this.items);
}
Sup.prototype.getName = function(){
    console.log("name: ", this.name);
}
function Sub(name, age){
    Sup.call(this, name);
    this.age = age;
}
inherit(Sup, Sub);
Sub.prototype.getAge = function(){
    console.log("age: ", this.age);
}
Sub.prototype.getName = function(){
    console.log("nameForSub: ", this.name);
}
function Sub1(name, age){
    Sup.call(this, name);
    this.age = age;
}
inherit(Sup, Sub1);
Sub1.prototype.getAge = function(){
    console.log("age: ", this.age);
}
var a = new Sub("lilei", 25);
a.items.push(4);
a.getName();    //nameForSub:  lilei
a.getAge();     //age:  25
a.getItems();   //items:  [1, 2, 3, 4]
var b = new Sub("hanmeimei", 24);
b.getName();    //nameForSub:  hanmeimei
b.getAge();     //age:  24
b.getItems();   //items:  [1, 2, 3]
var c = new Sub1("jim", 23);
c.getName();    //name:  jim
c.getAge();     //age:  23
c.getItems();   //items:  [1, 2, 3]

思考：

inherit函数能不能换成如下写法，有什么区别？

function inherit(Sup, Sub){
    Sub.prototype = Sup.prototype;
}

对比

以上内容仅个人理解，如有错误还请谅解 (〃'▽'〃)

//代码附录
//1.
function inherit(Sup, Sub){
    function F(){}
    F.prototype = Sup.prototype;
    var obj = new F();
    obj.constructor = Sub;
    Sub.prototype = obj;
}
function Sup(name){
    this.name = name;
    this.items = [1, 2, 3];
}
Sup.prototype.getItems = function(){
    console.log("items: ", this.items);
}
Sup.prototype.getName = function(){
    console.log("name: ", this.name);
}
function Sub(name, age){
    Sup.call(this, name);
    this.age = age;
}
inherit(Sup, Sub);
Sub.prototype.getAge = function(){
    console.log("age: ", this.age);
}
Sub.prototype.getName = function(){
    console.log("nameForSub: ", this.name);
}
function Sub1(name, age){
    Sup.call(this, name);
    this.age = age;
}
inherit(Sup, Sub1);
Sub1.prototype.getAge = function(){
    console.log("age: ", this.age);
}
var a = new Sub("lilei", 25);
a.items.push(4);
a.getName();
a.getAge();
a.getItems();
var b = new Sub("hanmeimei", 24);
b.getName();
b.getAge();
b.getItems();
var c = new Sub1("jim", 23);
c.getName();
c.getAge();
c.getItems();
//2.
function inherit(Sup, Sub){
    Sub.prototype = Sup.prototype;
}
function Sup(name){
    this.name = name;
    this.items = [1, 2, 3];
}
Sup.prototype.getItems = function(){
    console.log("items: ", this.items);
}
Sup.prototype.getName = function(){
    console.log("name: ", this.name);
}
function Sub(name, age){
    Sup.call(this, name);
    this.age = age;
}
inherit(Sup, Sub);
Sub.prototype.getAge = function(){
    console.log("age: ", this.age);
}
Sub.prototype.getName = function(){
    console.log("nameForSub: ", this.name);
}
function Sub1(name, age){
    Sup.call(this, name);
    this.age = age;
}
inherit(Sup, Sub1);
Sub1.prototype.getAge = function(){
    console.log("age: ", this.age);
}
var a = new Sub("lilei", 25);
a.items.push(4);
a.getName();
a.getAge();
a.getItems();
var b = new Sub("hanmeimei", 24);
b.getName();
b.getAge();
b.getItems();
var c = new Sub1("jim", 23);
c.getName();
c.getAge();
c.getItems();