javascript的几种继承方式

通过继承，子类可以继承并使用父类的属性和方法。提高代码的复用。js继承主要是对构造函数和原型属性的继承。本文描述几种继承方式：

原型链继承

function Parent(name) {this.name = namethis.assets = ['Hat']
}
Parent.prototype.sayName = function(){console.log(`My name is ${this.name}`)
}function Child(name, age) {this.name = namethis.age = age
}
Child.prototype = new Parent() // 核心let xiaoming = new Child('xiaoming')
xiaoming.sayName() // My name is xiaomingxiaoming.assets.push('shoes')
let xiaohong = new Child('xiaohong')
console.log(xiaohong.assets) // ['Hat', 'shoes']xiaoming.__proto__.constructor === Child // false
xiaoming.__proto__.constructor === Parent // trueChild.prototype = new Parent() // 核心
Child.prototype.constructor = Child // 将构造函数重新指向子类

优点：

子类通过prototype指向父类的实例。实现原型链继承。子类实例访问属性时，没有的属性会通过原型链查找到父类。

缺点：

子类实例化无法向父类传参
引用类型的属性被所有实例共享：如assets属性，子类实例xiaoming修改值，实例xiaohong取值也发生变化。

构造函数继承

function Animal(sex) {this.sex = sexthis.eat = function() {console.log('food')}
}
Animal.prototype.drink = function() {console.log('drink water')
}function Dog(sex) {Animal.call(this, sex)this.cry = function() {console.log('wang wang')}
}let dog = new Dog('male')
dog.eat()
dog.cry()
dog.drink() // 无法读取
dog instanceof Dog // true

优点：

可以向父类传参
复用的父类属性不共享

缺点：

无法使用父类原型对象的方法

组合继承

原型链继承无法传参，但可以获取原型对象上的属性，构造函数无法获取原型对象上的属性，但是可以传参赋值构造函数内属性和方法。
两种方式结合即组合模式。

function Parent() {this.assets = ['Hat']
}
Parent.prototype.sayName = function(){console.log(`My name is ${this.name}`)
}function Child(name, age) {Parent.call(this)this.name = namethis.age = age
}
Child.prototype = new Parent()
Child.prototype.constructor = Childlet xiaoming = new Child('xiaoming')
xiaoming.sayName()xiaoming.assets.push('shoes')let xiaohong = new Child('xiaohong')
console.log(xiaohong.assets) // ['Hat']

优点：

子类实例化可向父类传参。
实现对构造函数和原型对象上的属性和方法的复用。

缺点：

父类new了两次。

原型式继承

let animal = {sex: 'male',drink: function() {console.log('drink water');}
}function extend(Obj) {let fn = function(){}fn.prototype = Objreturn new fn()
}let xiaoming = extend(animal)
xiaoming.drink() // 'drink water'

优点：

简单，单纯的通过原型链访问父类属性

缺点：

父类属性共享。

寄生式继承

对原型式的扩展

let animal = {sex: 'male',drink: function() {console.log('drink water');}
}function extend(Obj) {let fn = function(){}fn.prototype = Objreturn new fn()
}// 原型式基础上增加对象的优化。扩展属性和方法
function Dog(sex) {let vo = extend(animal)vo.eat = function() {console.log('eat')}return vo
}let dog = Dog('male')
let bigDog = Dog('male')

优点：

对继承后对象增强，扩展属性和方法。

缺点：

同原型式一样，父类属性共享，没有类的概念。

寄生组合式继承

组合式继承两次调用父类。优化子类继承父类的原型对象的方法

function Parent(name) {this.name = name
}
Parent.prototype.sayName = function(){console.log(`My name is ${this.name}`)
}
function Child(name, age) {Parent.call(this, name)this.age = age
}
// 修改子类的原型对象指向
function F(){}
F.prototype = Parent.prototype
Child.prototype = new F()
Child.prototype.constructor = Childlet xiaoming = new Child('xiaoming', 18)

实现对调用父类构造函数、传参，也继承了父类原型上的方法。

ES6继承

…待补充

学习文章JavaScript深入之继承的多种方式和优缺点、
Javascript面向对象编程

javascript的几种继承方式相关推荐

javascript 的七种继承方式（三）组合继承
组合继承前面两篇我们了解到:原型链继承存在着引用类型问题,而借用构造函数又无法实现函数复用和原型方法继承的问题.那么能不能把两者结合一下,取其精华,弃其糟粕?答案是肯定的.那就是接下来我们要介绍的组 ...
JavaScript中6种继承方式总结
JavaScript中的几种继承方式及优缺点,你知道多少呢？
原文连接:JavaScript中的几种继承方式及优缺点,你知道多少呢? 继承也是前端里面的重要的一个知识点,在实际工作中或者面试中也会经常的遇到,那么通过这篇文章我们详细的了解一下继承的几种方式以及各 ...
理解JS的6种继承方式
[转]重新理解JS的6种继承方式写在前面一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面 ...
JS中对象的四种继承方式：class继承、原型链继承、构造函数继承、组合继承（构造函数和原型链继承的结合）
前言才发现之前没有对JavaScript中的继承做过总结,不过看得到是不少,接下来就对这几种继承方式做一下总结. class继承 class继承是ES6引入的标准的继承方式. ES6引入了class ...
【JS继承】常见的7种继承方式
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
探究JS常见的6种继承方式
先看以下百科对(面向对象的继承)的解释! 通过以上精炼实用的解释,我们可以了解到继承的基本作用和功能!即可以使得子类具有父类的属性和方法或者重新定义.追加属性和方法等. 广告:帮忙点击>> ...
C++继承机制(一)——基本语法、三种继承方式、继承哪些数据
目录: C++继承机制(一)--基本语法.三种继承方式.继承哪些数据 C++继承机制(二)--继承中的构造和析构顺序.继承同名成员的处理方式 C++继承机制(三)--多继承.菱形继承.虚继承原理本篇 ...
js的5种继承方式——前端面试
js主要有以下几种继承方式:对象冒充,call()方法,apply()方法,原型链继承以及混合方式.下面就每种方法就代码讲解具体的继承是怎么实现的. 1.继承第一种方式:对象冒充 1 function ...
protect 继承_c++三种继承方式public，protect，private
三种访问权限 public:可以被任意实体访问 protected:只允许子类及本类的成员函数访问 private:只允许本类的成员函数访问三种继承方式 public 继承 protect 继承 p ...