ES5的继承方式

目录

ES5的继承方式

1 构造函数继承

1基本思想

2 优缺点

2 原型链继承

1 思想

2优缺点

3 代码

3 组合继承

1 思想：

2 优缺点

4 寄生组合继承

1 思想

2 优点：

5 多重继承（寄生组合升级版）

1 思想

2 优缺点

3 附注：

6 ES5继承总结

1 构造函数继承

1基本思想

在子类构造函数中通过使用apply()和call()方法调用父类的构造函数。

2 优缺点

优点：

1）对于子类实例对象而言，从父类构造函数继承而来的引用类型是相互独立，也就说从父类构造函数继承而来的引用类型不被所有子类实例共享，而是每一个实例有一份该引用类型的副本。

2）创建子类实例对象的时候可以向父类进行传参。

缺点：

1）只能继承定义在父类构造函数内的属性与方法，父类构造函数不能够复用。

2）定义在父类的prototype原型对象内的属性与方法则无法继承，因此对其改进。

//父类
function SuperType(age) {this.age = age;this.color = ["red", "blue", "yellow"];let height = "156cm";  //
}
SuperType.prototype.printColor = function () {console.log(this.age);
}
//var father = new SuperType(36); //创建父类实例对象
//通过构造函数创建对象时，实例对象拿不到构造函数中非this.的属性
//console.log(father);  //SuperType { age: 36, color: [ 'red', 'blue', 'yellow' ] }//子类
function SonType(sex, age) {//1、当父类构造函数调用 call 方法时，父类中构造函数中this指向子类实例对象。//2、每 new 一个 SonType实例对象 ，都会产生不同的对象，每个对象的属性都是相互独立的。this.sex = sex;SuperType.call(this, age);  //没有必要在子类第一行，但是经常放在第一行，方便阅读
}
//子类实例1，可以向父类的构造函数传递参数
var sonFirst = new SonType("man", 13); //创建子类的实例对象1
console.log(sonFirst) ; //SonType { sex: 'man', age: 13, color: [ 'red', 'blue', 'yellow' ] }
//子类不能使用构造函数中原型方法
//console.log(sonFirst.printColor()) ; // TypeError: sonFirst.printColor is not a function
console.log(sonFirst.constructor);  //[Function: SonType]   构造函数是子类，和原型链继承不一样//子类实例2
var sonSecond = new SonType("woman", 36);
console.log(sonSecond);  //SonType { sex: 'woman', age: 36, color: [ 'red', 'blue', 'yellow' ] }sonSecond.color = ["white"];
//对子类实例对象不共享引用类型
console.log(sonFirst) ; //SonType { sex: 'man', age: 13, color: [ 'red', 'blue', 'yellow' ] }
console.log(sonSecond);  //SonType { sex: 'woman', age: 36, color: [ 'white' ] }

2 原型链继承

1 思想

通过重写子类构造函数prototype属性（原型）。即让子类构造函数的原型对象等于父类构造函数的实例

SubType.prototype = new SuperType(18);

2优缺点

优点：

1）则既能继承父类构造函数内的属性与方法，也能继承父类原型上面的属性与方法。

缺点：

1）从父类（构造函数以及原型）继承而来的引用类型被所有子类实例共享。

由于令子类原型对象指向父类的一个实例对象，使得子类所有实例对象从父类所继承的属性，都是来自于子类的原型链上面（父类实例是子类的原型）的同一波对象。所以通过一个子类实例对象修改从父类继承而来的引用类型（部分修改，而不是整体替换），另一个子类实例对象的该引用类型也跟着改变。

这里可以参考js：实例对象修改原型（链）上面的属性

2）在创建子类的实例对象时，不能向父类的构造函数中传递参数。

实际上，应该说是没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数

附注：（图为下面代码的部分图）图可能有些错误，大概的画法如图，如果有错，可以自己试着画

3 代码

//父类function SuperType(age) {this.age = age;this.name = "super";this.color = ["red", "blue", "yellow"];}//父类原型SuperType.prototype.getSuperValue = function () {return this.age + "," + this.name + "," + this.color;}//子类function SubType(sex) {this.sex = sex;}//原型继承关键语句SubType.prototype = new SuperType(18);//子类原型上面添加函数，需要在重写原型之后，否则会因为重写而不起作用SubType.prototype.getSubValue = function (){return this.sex + "," +this.age + "," + this.name + "," + this.color;};//创建父类的实例对象var sup = new SuperType(12);  //创建父类的实例对象，与下面子类实例对象是两个不同的对象console.log(sup.constructor )  //[Function: SuperType]//创建子类的实例对象1var son = new SubType("man");console.log(son.__proto__ === SubType.prototype)  //true//子类实例本身没有构造函数，但是其会读取原型对象上面的constructor，这里指向父类console.log(son.constructor)  //[Function: SuperType]console.log(son.constructor === SuperType)  //trueconsole.log(son.__proto__.constructor)  //[Function: SuperType]/*图中值只到这里。。后面往对象上面添加值，自己自行往图里面添加属性和方法原型链问题1：引用类型的属性被所有实例共享创建子类的实例对象2*/console.log("_______________________");var son_second = new SubType("woman");//利用实例对象修改原型对象上面的引用类型，这里只修改引用类型的属性，而不是整体修改引用类型（整体===起一个同名变量）console.log(son.color); //[ 'red', 'blue', 'yellow' ]console.log(son_second.color);//[ 'red', 'blue', 'yellow' ]son.color.splice(son.color.length - 1, 1, "white", "blue"); //也可以用其他方法进行修改引用类型属性console.log(son.color);//[ 'red', 'blue', 'white', 'blue' ]console.log(son_second.color);//[ 'red', 'blue', 'white', 'blue' ]

3 组合继承

1 思想：

使用原型链实现对父类原型对象的属性和方法进行继承。通过借用构造函数来实现对父类构造函数的属性和方法的继承。

2 优缺点

优点：

1）在父类原型对象上定义的方法得到了复用。

2）每个子类实例都有属于自己的属性（每个子类实例从父类构造函数继承而来的属性是相互独立的）。

注：其实这种继承，每一个子类实例有一份从父类构造函数中继承来的属性，而且相互独立；并且子类原型上面也有一份来自父类构造函数的属性。

缺点：组合继承调用了两次父类的构造函数，造成了不必要的消耗。

//父类function SuperType(age) {this.age = age;this.color = ["red", "blue", "yellow"];}SuperType.prototype.printAge = function () {  //父类原型上面方法console.log(this.age);}//子类function SonType(sex, age) {SuperType.call(this, age);  //构造函数继承this.sex = sex;}SonType.prototype = new SuperType(26);//原型链继承//子类实例1var sonFirst = new SonType("man", 13);console.log(sonFirst) ; //SuperType { age: 13, color: [ 'red', 'blue', 'yellow' ], sex: 'man' }console.log(sonFirst.constructor) ; //[Function: SuperType]   子类实例对象构造函数（在原型上面属性，不是自己的）指向父类，因为重写了子类原型//子类可以使用构造函数中原型方法sonFirst.printAge() ; // 13/*两次调用了父类构造函数，一次new，一次通过call等函数调用，造成子类原型上面的constructor指向父类;造成子类构造函数中有一份父类中this.声明的属性；而子类原型上面也有一份父类中this.声明的属性。* 通过new 一个实例之后，实际上，实例本身有一份来自构造函数继承而来的父类this.声明的属性，其原型链上面还有一份同名的属性*/console.log(sonFirst.__proto__.color); //[ 'red', 'blue', 'yellow' ]  子类实例原型上面的colorconsole.log(sonFirst.color); //[ 'red', 'blue', 'yellow' ]console.log(sonFirst.__proto__.color === sonFirst.color); //false 这里的color不是一个，而是两份sonFirst.color[2] = "white";  console.log(sonFirst.__proto__.color); //[ 'red', 'blue', 'yellow' ]console.log(sonFirst.color); //[ 'red', 'blue', 'white' ]

4 寄生组合继承

1 思想

对组合继承进行的优化。利用构造函数的继承实现对父类构造函数属性和方法的继承；使用Object.create()对原型链继承进行优化后，并将子类的原型上的constructor指向子类构造函数。

附注：组合继承最大的问题就是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。没错，子类型最终会包含超类型对象的全部实例属性，但我们不得不在调用子类型构造函数时重写这些属性。

2 优点：

1）寄生组合式继承就是为了解决组合继承中两次调用构造函数的开销的问题

2）子类原型上面不会再有父类构造函数中属性和方法的一份复制

//父类
function SuperType(age) {this.age = age;this.color = ["red", "blue", "yellow"];
}
SuperType.prototype.printAge = function () {  //父类原型上面方法console.log(this.age);
}
//子类
function SonType(sex, age) {//继承属性SuperType.call(this, age);  //构造函数继承this.sex = sex;
}//原型链混合继承，继承方法
/*Object.create(SuperType.prototype) 以父类原型为模板创建一个新的对象
新对象的原型对象是SuperType.prototype，但是本身还没有自身属性和方法
* */
SonType.prototype = Object.create(SuperType.prototype);
SonType.prototype.constructor = SonType;  //往子类原型添加constructor，覆盖从父类原型继承而来的constructor
//子类实例1
var sonFirst = new SonType("man", 13);
sonFirst.printAge(); //13

5 多重继承（寄生组合升级版）

1 思想

巧用Object.assign(target, ...sources)（ES2015 引入）继承多个对象

附注

https://blog.csdn.net/songxiugongwang/article/details/83422944

参数：target目标对象。 sources源对象。返回：目标对象，目标对象也改变

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象（浅拷贝）。

2 优缺点

优点：在寄生组合的基础上面实现多重继承，即可以继承于多个父类的构造函数以及原型。

缺点：只能继承其中一个父类的原型的原型链上面的所有属性和方法。即只有一条原型链。

//父类1 的爸爸function GrandfatherFirst() {}GrandfatherFirst.prototype.getFather = function () {console.log("我是父类1的爸爸")}//父类1function FatherFirst(age) {GrandfatherFirst.call(this);this.age = age;this.color = ["red", "blue", "yellow"];}FatherFirst.prototype = Object.create(GrandfatherFirst.prototype);FatherFirst.prototype.printAge = function () {  //父类原型上面方法console.log(this.age);}//父类2的爸爸function GrandfatherTwo() {}GrandfatherTwo.prototype.getFather__889 = function () {console.log("我是父类22的爸爸")}//父类2function FatherTwo(name) {GrandfatherTwo.call(this);this.name = name;}FatherTwo.prototype = Object.create(GrandfatherTwo.prototype);FatherTwo.prototype.printName = function () {  //父类原型上面方法console.log(this.name);}//子类function SonType(sex, age, name) {//继承属性FatherFirst.call(this, age);  //构造函数继承FatherTwo.call(this, name);  //构造函数继承this.sex = sex;}//原型链混合继承，继承方法/*Object.create(FatherFirst.prototype) 以父类原型为模板创建一个新的对象新对象的原型对象是SuperType.prototype，但是本身还没有自身属性和方法* Object.assign()实现继承多个对象*/SonType.prototype = Object.create(FatherFirst.prototype);Object.assign(SonType.prototype, FatherTwo.prototype);SonType.prototype.constructor = SonType;  //往子类原型添加constructor，覆盖从父类原型继承而来的constructor//子类实例1var sonFirst = new SonType("man", 13, "Bob");sonFirst.printAge(); //13sonFirst.printName(); //BobsonFirst.getFather();  //我是父类1的爸爸//Object.assign(SonType.prototype, FatherTwo.prototype); 方法只会拷贝源对象 FatherTwo.prototype自身的并且可枚举的属性到目标对象。// 而不会拷贝FatherTwo.prototype原型链上面的方法和属性sonFirst.getFather__889();  //TypeError: sonFirst.getFather__889 is not a function

3 附注：

Object.create(obj，[propertiesObject])以obj为模板生成新的对象，有原型，新对象继承obj属性和方法，但是本身还没有自身属性和方法，

let obj = {a: "a09",b: "jiu"
};
let obj_son = Object.create(obj);let object_1 = Object.create(obj,{"po":{value: "36",//writable: true,enumerable: true //必须为tue时，console.log才能打印出来该属性}
})console.log(obj); //{ a: 'a09', b: 'jiu' }
//Object.create(obj)以obj为模板生成新的对象，新对象继承obj属性和方法，但是本身还没有自身属性和方法
console.log(obj === obj_son,obj === object_1, obj_son === object_1)  //false false false
console.log(obj_son);  //{}   console.log只打印对象本身可枚举的属性
console.log(obj_son.a,".....",obj_son.constructor);  //a09 ..... function Object() { [native code] }
console.log(object_1);//{ po: '36' }//如果在obj_son在定义与obj同名的属性，那么obj中原来值不变，而obj_son自身多了该属性
obj_son.a = "son";
console.log(obj); //{ a: 'a09', b: 'jiu' }
console.log(obj_son.a,".....",obj_son.constructor);  //son ..... function Object() { [native code] }

6 ES5继承总结

百里于2020年7月14日

如果有错，请您指出！如有侵权，请联系我删除！