js中的继承方式有多种，原型链继承通过子类型原型指向父类型实例实现，优点是实现简单且方法可复用，缺点是所有实例共享引用类型属性且无法向父类构造函数传参；构造函数继承通过在子类构造函数中调用父类构造函数解决属性共享问题，优点是可传递参数且属性独立，缺点是无法继承父类原型方法且方法不可复用；组合继承结合前两者优点，通过原型链继承原型方法、构造函数继承实例属性，实现了方法复用和属性独立，但父类构造函数被调用两次导致性能浪费；原型式继承基于现有对象创建新对象，适用于无需自定义类型的场景，但存在引用属性共享问题；寄生式继承在原型式继承基础上增强对象，适合临时扩展对象功能，但每次都会创建新方法；寄生组合式继承通过继承父类原型的副本来避免构造函数重复调用，解决了组合继承的性能问题，被认为是目前最理想的继承方式。选择继承方式应根据具体需求权衡。
JS中的继承，简单来说，就是让一个对象拥有另一个对象的属性和方法。实现方式有很多，各有优劣，选择哪种取决于具体需求。
解决方案：
实现JS继承的方法主要有以下几种：原型链继承、构造函数继承（也叫经典继承）、组合继承（原型链继承 + 构造函数继承）、原型式继承、寄生式继承、寄生组合式继承。
如何理解原型链继承的优缺点？
原型链继承的核心在于利用原型对象，子类型的原型指向父类型的一个实例。这样，子类型就可以访问父类型原型上的属性和方法。
优点是实现简单，父类方法可以复用。
缺点也很明显：
子类型的所有实例共享父类型原型上的属性，如果父类型原型属性是引用类型，一个实例修改了，其他实例也会受到影响。创建子类型实例时，没法给父类型构造函数传递参数。
function Parent() { this.name = 'Parent'; this.colors = ['red', 'blue', 'green'];}Parent.prototype.sayName = function() { console.log(this.name);}function Child() { this.childName = 'Child';}Child.prototype = new Parent(); // 关键：让Child的原型指向Parent的实例Child.prototype.constructor = Child; // 修正constructor指向let child1 = new Child();child1.colors.push('black');let child2 = new Child();console.log(child2.colors); // ["red", "blue", "green", "black"] child2也受到了影响
构造函数继承解决了什么问题，又带来了什么新问题？
构造函数继承，也叫经典继承，通过在子类型的构造函数中调用父类型的构造函数来实现。
优点：
解决了原型链继承中子类型实例共享父类型原型属性的问题。创建子类型实例时，可以向父类型构造函数传递参数。
缺点：
父类型的方法定义在构造函数中，每次创建子类型实例都会重新创建一遍，无法复用。父类型原型上的属性和方法，子类型无法访问。
function Parent(name) { this.name = name; this.colors = ['red', 'blue', 'green']; this.sayName = function() { // 每次new Parent都会重新创建 console.log(this.name); }}function Child(name) { Parent.call(this, name); // 关键：在子类型构造函数中调用父类型构造函数 this.childName = 'Child';}let child1 = new Child('Child1');child1.colors.push('black');let child2 = new Child('Child2');console.log(child2.colors); // ["red", "blue", "green"] child2没有受到影响
组合继承为什么被认为是比较完善的继承方式？
组合继承结合了原型链继承和构造函数继承的优点，避免了它们的缺点。
思路是：使用原型链继承来实现对父类型原型属性和方法的继承，使用构造函数继承来实现实例属性的继承。
优点：
父类型的方法可以复用。子类型实例拥有各自独立的属性。创建子类型实例时，可以向父类型构造函数传递参数。
缺点：
父类型构造函数会被调用两次：一次是在设置子类型原型的时候，一次是在创建子类型实例的时候。 这导致父类的属性在子类实例和子类原型中都存在，造成一定的性能浪费。
function Parent(name) { this.name = name; this.colors = ['red', 'blue', 'green'];}Parent.prototype.sayName = function() { console.log(this.name);}function Child(name, age) { Parent.call(this, name); // 构造函数继承 this.age = age;}Child.prototype = new Parent(); // 原型链继承Child.prototype.constructor = Child; // 修正constructor指向let child1 = new Child('Child1', 10);child1.colors.push('black');let child2 = new Child('Child2', 12);console.log(child2.colors); // ["red", "blue", "green"]child1.sayName(); // Child1child2.sayName(); // Child2
原型式继承和寄生式继承有哪些应用场景？
原型式继承，不用创建构造函数，直接基于现有对象创建一个新对象。Object.create() 就是原型式继承的实现。
let person = { name: 'Person', friends: ['Shelby', 'Court', 'Van']};let anotherPerson = Object.create(person);anotherPerson.name = 'Greg';anotherPerson.friends.push('Rob');let yetAnotherPerson = Object.create(person);yetAnotherPerson.name = 'Linda';yetAnotherPerson.friends.push('Barbie');console.log(person.friends); // [ 'Shelby', 'Court', 'Van', 'Rob', 'Barbie' ]
原型式继承的缺点和原型链继承类似，修改一个实例的引用类型属性，会影响到其他实例。
寄生式继承，在原型式继承的基础上，增强对象，返回一个新对象。
function createAnother(original) { let clone = Object.create(original); // 通过调用函数创建一个新对象 clone.sayHi = function() { // 以某种方式增强这个对象 console.log('hi'); } return clone; // 返回这个对象}let person = { name: 'Person', friends: ['Shelby', 'Court', 'Van']};let anotherPerson = createAnother(person);anotherPerson.sayHi(); // "hi"
寄生式继承的缺点是，每个对象都会创建一遍方法。
原型式继承和寄生式继承，主要用于不需要自定义类型，只是想得到一个对象的副本，并对其进行一些修改的场景。
寄生组合式继承如何解决组合继承的性能问题？
寄生组合式继承，被认为是目前最理想的继承方式。它解决了组合继承中父类构造函数被调用两次的问题。
核心思想是：不通过调用父类构造函数来给子类原型赋值，而是通过创建父类原型的副本来实现。
function inheritPrototype(child, parent) { let prototype = Object.create(parent.prototype); // 创建父类原型的副本 prototype.constructor = child; // 修正constructor指向 child.prototype = prototype; // 将副本赋值给子类原型}function Parent(name) { this.name = name; this.colors = ['red', 'blue', 'green'];}Parent.prototype.sayName = function() { console.log(this.name);}function Child(name, age) { Parent.call(this, name); this.age = age;}inheritPrototype(Child, Parent);let child1 = new Child('Child1', 10);child1.colors.push('black');let child2 = new Child('Child2', 12);console.log(child2.colors); // ["red", "blue", "green"]child1.sayName(); // Child1child2.sayName(); // Child2
inheritPrototype 函数起到了关键作用，它避免了调用 Parent 构造函数，只使用了 Parent.prototype 的副本。
选择哪种继承方式，取决于你的具体需求。 如果只是简单的想复用父类原型上的方法，原型链继承可以考虑。 如果需要传递参数，并且不关心方法复用，构造函数继承可以考虑。 如果追求更完善的继承方式，寄生组合式继承是更好的选择。
以上就是js中如何实现继承的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1512984.html
微信扫一扫 
支付宝扫一扫 
