解决 JS 对象中继承性问题之方式一：通过原型链继承来解决继承问题

大家好，欢迎来到IT知识分享网。

Ⅰ、继承问题：

1、什么是继承？

答：子类去继承父类的东西，称之为继承；

如：子类继承父类的属性或方法等；

2、常见的继承方式有哪些？

答：继承方式有五种：

其一、原型链继承;

其二、构造函数继承(也称 call 继承)；

其三、拷贝继承；

其四、组合继承(某一种或多种继承方式的组合)；

其五、寄生式组合继承；

Ⅱ、五大继承的优缺点：

1、原型链继承的优缺点：

其一、优点：

A、实现相对简单；

B、通过子类实例可以直接访问父类原型链上和实例上的成员(即：实现了继承)；

其二、缺点：

A、子类实例修改引用类型值，会影响其他子类实例(但若不是引用类型就没有问题)；

2、构造函数继承 (也称为 call 继承) 的优缺点：

其一、优点：

A、实现相对简单；

B、解决了原型链继承的缺点(即：子类实例修改引用类型值，不会影响其他子类实例)；

C、可以在子类实例中直接向父类构造函数传参；

其二、缺点：

A、无法继承父类原型上的成员与方法；

3、拷贝继承的优缺点：

其一、优点：

A、可以在子类中直接给父类传参；

B、通过子类实例可以直接访问父类原型链和实例的成员；

其二、缺点：

A、拷贝继承在循环过程中比较消耗内存；

4、组合继承的优缺点：

其一、优点：

A、可以在子类实例中直接向父类构造函数传参；

B、通过子类实例可以直接访问父类原型链和实例的成员；

其二、缺点：

A、执行父类函数中两次的逻辑； (即：代码性能不很好，因为有些成员或方法在父类的原型链上又重新加载了一次)；

5、寄生式组合继承的优缺点：

其一、优点：

A、可以在子类实例中直接向父类构造函数传参；

B、通过子类实例可以直接访问父类原型链和实例的成员；

C、解决了组合继承的缺点(即：执行父类函数中两次的逻辑)，代码的性能更优化；

缺点：

A、缺点是有的，但暂时还没了解到；

Ⅲ、原型链继承的实现过程及结果展示：

1、原型链继承的实现过程的代码如下：

// 待继承的父类构造函数，名称为：Animal；

function Animal() {

this.superType = ‘动物’; // 存在属性：’superType’，其值是字符串；

this.name = name || ‘animal’; // 在没传 name 值的情况下，默认 name 的值为：animal;

this.hobby = [‘sleep’, ‘play’]; // 在父类中有一个引用类型(数组)的属性值为 ‘hobby’;

this.cry = function () { // 父类上的 ‘cry()’ 方法；

console.log(this.name + ” is crying”);

}

}

// 父类原型对象上的成员方法； (在原型上添加方法，表示：所有父类的实例对象都可以调用 eat() 方法；)

Animal.prototype.eat = function () {

console.log(this.name + “is eating”);

}

// 子类的构造函数,名称为：Cat；

function Cat(name) {

this.name = name;

}

// 修改子类的原型指向为：父类实例;

Cat.prototype = new Animal();

// 即：将子类的原型 ‘Cat’ 修改成父类的实例 ‘new Animal()’;

// (设置后，子类的实例 c 的原型对象本质上就变成了 ‘Animal()’ 的实例对象；)

// 将子类原型对象的 constructor 属性指向子类的构造函数；

Cat.prototype.constructor = Cat;

// 因为：在重新赋值后的 ‘Cat.prototype.constructor’ 是不存在的，因此需要重新赋值；

// (即：该语句的作用：在 Cat 原型上再加一个 constructor 属性值，并指向 Cat；)

var c = new Cat(‘maomi’); // new 一个子类的实例 c;

var c2 = new Cat(‘maomi2’); // new 一个子类的实例 c2;

console.log(c.superType);

// 此时的输出结果为：动物；

// 此时子类实例就能访问到父类身上的成员或方法；

c.cry();

// 此时的输出结果为：maomi is crying；

c.eat();

// 此时的输出结果为：maomi is eating；

// 此时子类实例就能访问到父类原型对象上的方法；

console.log(c.constructor);

// 此时的输出结果为：

// ƒ Cat(name) {

// this.name = name;

// }

// 即：此时的情况就是在加上重新赋值的语句 ‘Cat.prototype.constructor = Cat;’ 后，再访问 ‘console.log(c.constructor);’ 而输出的结果；

// 但若是在代码中并没有重新赋值的语句 ‘Cat.prototype.constructor = Cat;’

// 而若要访问时(console.log(c.constructor);)，此时的输出结果是：

// ƒ Animal() {

// this.superType = ‘动物’;

// this.name = name || ‘animal’;

// this.hobby = [‘sleep’, ‘play’];…

// 到现在为止都是展示出来了优点：

// A、实现相对简单；

// B、通过子类实例可以直接访问父类原型链上和实例上的成员(即：实现了继承)；

c.hobby.push(‘eat’);

// 在父类实例中的 hobby 数组属性中添加 ‘eat’ 值；

// (而所希望的是：添加的 ‘eat’ 值仅影响 c 实例的 hobby 值； 而不影响其它实例的 hobby 值)；

console.log(c2.hobby);

// 此时的输出结果为：'[‘sleep’, ‘play’, ‘eat’]’;

// 此时就暴露出其缺点：某一个子类实例对父类实例中某一个引用类型进行修改，就会将其结果修改，且会影响到其他实例；

// 存在的缺点：

// A、子类实例修改引用类型值，会影响其他子类实例(但若不是引用类型就没有问题)；

2、输出结果的页面展示如下：

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！

其二、如果关于 JS 对象中继承方式不详细，请参考如下JS 对象中五大继承 (原型链继承、构造函数继承(call)、拷贝继承、组合继承、寄生式组合继承) 地址文章：https://blog.csdn.net/weixin_/article/details/

————————————————

版权声明：本文为CSDN博主「qwq hui qwq」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_/article/details/