JavaScript 继承

摘要：寄生组合继承称为完美继承其他继承方式都有缺陷以下为种继承的简单写法包括原形链借用构造函数组合继承原形式寄生式寄生组合式种继承父类原形链继承借用构造函数继承组合式继承原形式继承寄生式继承寄生组合式继承以下为种继承的详细写法。

寄生组合继承称为完美继承（其他继承方式都有缺陷）

以下为6种继承的简单写法:
（包括：原形链、借用构造函数、组合继承、原形式、寄生式、寄生组合式6种继承）

//父类
function Parent(name) {
    this.name = name;
}
Parent.prototype.alertHi = function () {
    alert("Hi");
};

//原形链继承
function Child1() {}
Child1.prototype = new Parent();

//借用构造函数继承
function Child2(name) {
    Parent.call(this,name);
}

//组合式继承
function Child3(name) {
    Parent.call(this,name);
}
Child3.prototype = new Parent();
Child3.prototype.constructor = Child3;

//原形式继承
var Child4 = Object.create(Parent);

//寄生式继承
function createChild(child) {
    var clone = Object(child);
    clone.sayHello = function () {
        alert("Hello");
    };
    return clone;
}
var Child5 = createChild(Person);

//寄生组合式继承
var Child6 = function (name) {
    Parent.call(this,name);
};
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
inheritPrototype(Child6,Parent);

以下为6种继承的详细写法。

原形链继承

//原形链继承
//父类
function Parent() {
    this.flag = true;
}
//父类的原形方法
Parent.prototype.alertFlag = function () {
    alert(this.flag);
};
//子类
function Child() {
    this.flag = false;//修改属性（不写则不修改）
}
//Child 继承 Parent
Child.prototype = new Parent();
//添加原形方法
Child.prototype.sayHello = function () {
    alert("Hello");
};

var child = new Child();
child.alertFlag();//弹出 false
child.sayHello();// 弹出 Hello

//子类修改父类方法
Child.prototype.alertFlag = function () {
    alert(!this.flag);
};
child.alertFlag();//弹出 true

//总结：继承的方法为 Child.prototype = new Parent();（只有一句话）

借用构造函数继承

//借用构造函数继承
function Parent(name) {
    this.name = name;
}
function Child(name,age) {
    Parent.call(this,name);
    this.age = age;
}

//实例
var child = new Child("Andy",28);
alert(child.name);//Andy
alert(child.age);//28

//总结：继承的代码为Parent.call(this,name);（也是一句话），主要解决了this指向的转变和参数的传递。

组合继承

//组合继承
//父类
function Parent(name) {
    this.name = name;
    this.friends = ["Jay","Jolin"];
}
Parent.prototype.sayName = function () {
    alert(this.name);
};

//子类
function Child(name,age) {
    Parent.call(this,name);
    this.age = age;
}
//继承
Child.prototype = new Parent();
//改变constructor指向
Child.prototype.constructor = Child;

//子类添加方法
Child.prototype.sayAge = function () {
    alert(this.age);
};

//创建实例
var c1 = new Child("Andy",29);
var c2 = new Child("Lucy",24);

c1.friends.push("Jack");
c2.friends.push("Coco");

console.log(c1.friends.toString());//Jay,Jolin,Jack
console.log(c2.friends.toString());//Jay,Jolin,Coco

console.log(c1.sayName());//Andy
console.log(c2.sayName());//Lucy

原形式继承

//原形式继承
//实现继承的方法
function obj(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

//但是ECMA5，通过Object.create()方法规范化了原形式继承（即上面的方法）

var person = {
    name:"Andy",
    age:29,
    friends:["Lily","Lucy","Jack"]
};

var Jay = Object.create(person);
Jay.name = "Jay";
Jay.friends.push("Jolin");

var Coco = Object.create(person);
Coco.name = "Coco";
Coco.friends.push("Sunny");

console.log(Jay.name);//Jay
console.log(Coco.name);//Coco
console.log(Jay.friends.toString());//Lily,Lucy,Jack,Jolin,Sunny
console.log(Coco.friends.toString());//Lily,Lucy,Jack,Jolin,Sunny

//没有重写的属性会被共享

var K = Object.create(person);
K.name = "Coco";
K.friends = ["J","Q","A"];

console.log(Jay.friends.toString());//Lily,Lucy,Jack,Jolin,Sunny
console.log(Coco.friends.toString());//Lily,Lucy,Jack,Jolin,Sunny
console.log(K.friends.toString());//J,Q,A

寄生式继承

//寄生式继承

//通过该方法，为子类添加方法，以实现继承；（即增强子类）
function create(child) {
    var clone = Object(child);
    clone.sayHi = function () {
        alert("Hi");
    };
    return clone;
}

var Me = {
    name : "Firefly",
    friends:["Bee","Cicada","Butterfly"]
};
var me = create(Me);

me.sayHi();

寄生组合继承（又称完美继承）

//寄生组合继承
function Parent(a) {
    this.a = a;
}
Parent.prototype = {
    fn:function () {
        alert("Hi");
    }
};
function Child(a,b) {
    Parent.call(this,a);
    this.b = b;
}
//实现继承的方法
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
//继承
inheritPrototype(Child,Parent);
//为Child添加原型方法
Child.prototype.sayB = function () {
    alert(this.b);
}

注：以下着重介绍组合寄生继承。

例：

function Super(name) {
    this.name = name;
}
Super.prototype = {
    constructor:Super,
    sayName:function () {
        alert(this.name);
    }
    //其他方法...
};
function Sub(name,age){
    Super.call(this,name);
    this.age = age;
}
//实现继承
inheritPrototype(Sub,Super);
//添加原形方法
Sub.prototype.sayAge = function () {
    alert(this.age);
};
//实现继承的方法
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

//创建实例
var s = new Sub("Andy",28);
//调用方法
s.sayName();
s.sayAge();
//修改属性
s.age = 24;
s.sayAge();
s.name = "Lily";
s.sayName();

实现多继承（修改inheritPrototype()方法）

//父类1
function Super1(name) {
    this.name = name;
}
Super1.prototype = {
    constructor:Super1,
    sayName:function () {
        alert(this.name);
    }
    //其他方法...
};
//父类2
function Super2(gender) {
    this.gender = gender;
}
Super2.prototype = {
    constructor:Super1,
    sayGender:function () {
        alert(this.gender);
    }
    //其他方法...
};
//子类
function Sub(name,gender,age){
    Super1.call(this,name);
    Super2.call(this,gender);
    this.age = age;
}
inheritPrototype(Sub,Super1);
inheritPrototype(Sub,Super2);
//添加原形方法
Sub.prototype.sayAge = function () {
    alert(this.age);
};
//实现继承的方法
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    //修改的地方
    //subType.prototype = prototype;
    for(par in prototype){
        subType.prototype[par] = prototype[par];
    }
}
//创建实例
var s = new Sub("Andy","man",26);
s.sayName();
s.sayGender();
s.sayAge();

另外，你可以将Super1、Super2和Sub类放在不同的js文件中，在html中引入后调用。

例如：

//将以下代码方法myjs1.js文件中
function Super1(name) {
    this.name = name;
}
Super1.prototype = {
    constructor:Super1,
    sayName:function () {
        alert(this.name);
    }
    //其他方法...
};

//将以下代码放入myjs2.js文件中
function Super2(gender) {
    this.gender = gender;
}
Super2.prototype = {
    constructor:Super1,
    sayGender:function () {
        alert(this.gender);
    }
    //其他方法...
};

//将以下代码放入myjs3.js文件中
function Sub(name,gender,age){
    Super1.call(this,name);
    Super2.call(this,gender);
    this.age = age;
}
inheritPrototype(Sub,Super1);
inheritPrototype(Sub,Super2);
//添加原形方法
Sub.prototype.sayAge = function () {
    alert(this.age);
};
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    //subType.prototype = prototype;
    for(par in prototype){
        subType.prototype[par] = prototype[par];
    }
}

//在html中引用

Demo：超级玛丽
超级玛丽，有两个属性：name和size，有三个方法：show()、run()和jump()；
大的超级玛丽：继承自超级玛丽，在超级玛丽的三个方法基础上修改一个方法：jump();
医生超级玛丽：继承自大的超级玛丽，在大的超级玛丽的三个方法基础上多了一个方法：shot();

超级玛丽类(js1.js)：

function SuperMarie(name,size) {
    this.name = name;
    this.size = size;
}
SuperMarie.prototype = {
    constructor:SuperMarie,
    jump:function () {
        console.log(this.name+" jump.");
    },
    run:function () {
        console.log(this.name+" run.");
    },
    show:function () {
        console.log(this.name+""s size is "+this.size);
    }
};

大的超级玛丽类(js2.js)：

function BigSuperMarie(name,size) {
    SuperMarie.call(this,name,size);
}
inheritPrototype(BigSuperMarie,SuperMarie);
BigSuperMarie.prototype.jump=function () {
        console.log(this.name+" super jump!");
    };
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    for(par in prototype){
        subType.prototype[par] = prototype[par];
    }
}

医生超级玛丽类(js3.js)：

function DoctorSuperMarie(name,size) {
    BigSuperMarie.call(this,name,size);
}
inheritPrototype(DoctorSuperMarie,BigSuperMarie);
DoctorSuperMarie.prototype.shot = function () {
        console.log(this.name+" shot!");
    };
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    for(par in prototype){
        subType.prototype[par] = prototype[par];
    }
}

html代码：

Super Marie
Big Super Marie
Doctor Super Marie




Size
Run
Jump
Shot