JavaScript的6种继承

// 1、原型链继承
// 核心：将父类的实例作为子类的原型
// 缺陷：(1)、引用类型很有可能会被篡改 (2)、不能传参
function yx_father() {
this.name = ‘原型链继承父节点’;
this.colors = [‘red’, ‘blue’, ‘gray’];
}
yx_father.prototype.getYxFather = function() {
return this.name;
}
function yx_son() {
this.son_name = ‘原型链继承子节点’;
}
yx_son.prototype = new yx_father(); // 重写了yx_son.prototype,此处将父类的实例作为子类的原型,达成了继承的目的
yx_son.prototype.constructor = yx_son; // 重新指定constructor指向yx_son
yx_son.prototype.getYxSon = function() {
return this.son_name;
}
var yxson = new yx_son();
yxson.colors.push(‘white’);// 此处引用类型就被篡改了
console.log(yxson.colors);
console.log(yxson);
var yxson1 = new yx_son();
yxson1.colors.push(‘black’);// 此处引用类型就被篡改了
console.log(yxson1.colors);
console.log(yxson1);
// 2、使用构造函数继承
// 核心：使用call或apply复制一份父类的实例给子类,已达成子类继承父类的目的
// 缺陷：(1)、只能继承父类实例的属性和方法,不能继承原型的属性和方法 (2)、每个子类都是继承父类的实例副本,影响性能
function gouzao_father(name) {
this.name = name;
this.colors = [‘red’, ‘blue’, ‘gray’];
}
function gouzao_son(name, age) {
gouzao_father.call(this, name);
this.age = age;
}
var gouzaoson = new gouzao_son(‘使用构造函数继承’, 100000000);
gouzaoson.colors.push(‘white’);
console.log(gouzaoson.colors);
console.log(gouzaoson);
var gouzaoson1 = new gouzao_son(‘使用构造函数继承’, 100000000);
gouzaoson1.colors.push(‘black’);
console.log(gouzaoson1.colors);
console.log(gouzaoson1);
// 3、组合继承(原型链继承+使用构造函数继承)
// 核心：是原型链继承和使用构造函数继承的结合体
// 缺陷：父类的实例属性和方法既存在子类的实例中有又存在于子类的的原型里,因此,使用子类创建实例化对象,该实例化对象中会存在两份相同的属性和方法
function zuhe_father(name) {
this.name = name;
this.colors = [‘red’, ‘blue’, ‘gray’];
}
zuhe_father.prototype.getZuHe = function() {
return this.name;
}
function zuhe_son(name, age) {
zuhe_father.call(this, name);
this.age = age;
}
zuhe_son.prototype.getZuHeSon = function() {
return this.age;
}
var zuheson = new zuhe_son(‘组合继承’, 9999999999);
zuheson.colors.push(‘white’);
console.log(zuheson.colors);
console.log(zuheson);
var zuheson1 = new zuhe_son(‘组合继承’, 9999999999);
zuheson1.colors.push(‘black’);
console.log(zuheson1.colors);
console.log(zuheson1);
// 4、原型式继承
// 核心：定义一个函数，其里面直接将某个对象的值赋给构造函数的原型,在直接return该构造函数的实例
// 缺陷：(1)、引用类型很有可能会被篡改 (2)、不能传参
function createObject(obj) {
var F = function() {};
F.prototype = Object(obj);
return new F();
}
var person = {
name: ‘原型式继承’,
colors: [‘red’, ‘blue’, ‘gray’]
}
var yxs = createObject(person);
yxs.colors.push(‘white’);
console.log(yxs.colors);
console.log(yxs);
var yxs1 = createObject(person);
yxs1.colors.push(‘black’);
console.log(yxs1.colors);
console.log(yxs1);
// 5、寄生式继承
// 核心：在原型式继承的基础上,增强对象,返回构造函数
// 缺陷：(1)、引用类型很有可能会被篡改 (2)、不能传参
function createJss(obj) {
var clone = Object(obj);
clone.sayHi = function() {
console.log(‘Hi！’);
}
return clone;
}
var personjss = {
name: ‘寄生式继承’,
colors: [‘red’, ‘blue’, ‘gray’]
}
var jss = createJss(personjss);
jss.colors.push(‘white’);
console.log(jss.sayHi());
console.log(jss.colors);
console.log(jss);
var jss1 = createJss(personjss);
jss.colors.push(‘black’);
console.log(jss1.sayHi());
console.log(jss1.colors);
console.log(jss1);
// 6、寄生组合式继承
// 核心：使用构造函数和寄生式继承
// 缺陷：继承前面所有集成方法的优点,就是实现过程繁琐
function Jszh(jszh_son, jszh_father) {
var prototype = Object.create(jszh_father.prototype);
prototype.constructor = jszh_son;
jszh_son.prototype = prototype;
}
function jszh_father(name) {
this.name = name;
this.colors = [‘red’, ‘blue’, ‘gray’];
}
jszh_father.prototype.getJszhFather = function() {
return this.name;
}
function jszh_son(name, age) {
jszh_father.call(this, name);
this.age = age;
}
Jszh(jszh_son, jszh_father);
jszh_son.prototype.getJszuSon = function() {
return this.age;
}
var jszh = new jszh_son(‘寄生组合式继承’, 9109090909090);
jszh.colors.push(‘white’);
console.log(jszh.colors);
console.log(jszh);
var jszh1 = new jszh_son(‘寄生组合式继承’, 9109090909090);
jszh1.colors.push(‘black’);
console.log(jszh1.colors);
console.log(jszh1);