初始化

function Person(name) {this.name = namethis.type = ["css", "js", "html"]this.sum = function () {alert(this.name)}}Person.prototype.age = 10

一原型链继承（ES5）

    function Per() {this.name = 'ker'}Per.prototype = new Person()var Per1 = new Per()var Per2 = new Per()Per1.type.push("vue")Per1.sum()  // kerconsole.log(Per1.age)   //10console.log(Per2.type)  //"css","js","html","vue"//instanceof 判断元素是否是另一个元素原型链上//Per1继承了Person的属性，返回为trueconsole.log(Per1 instanceof Person)   //true

优点：简单明了

缺点：

1、新实例无法向父类构造函数传参

2、继承单一

3、所有新实例都会共享父类实例属性（一个实例修改了原型属性，另一的原型属性也会随之更改）

二借用构造函数继承（ES5）

    function Con() {Person.call(this, 'nima')}var Con1 = new Con()var Con2 = new Con()Con1.type.push("haha")console.log(Con1.age)    // underfined  没有继承父类原型的属性，只继承父类构造函数的属性console.log(Con1.name)   //nimaconsole.log(Con1.type)  // 'css', 'js', 'html', 'haha'console.log(Con2.type)  // 'css', 'js', 'html'

优点：

1、解决了子类实例共享父类引用属性的问题

2、创建子类实例时，可以向父类构造函数传参

缺点：

1、没有继承父类原型的属性，只继承父类构造函数的属性

2、无法实现构造函数的复用

3、每个新实例都有父类构造函数的副本（臃肿）

三组合继承（ES5）

    function SubType(name) {Person.call(this, name)   //构造函数继承}SubType.prototype = new Person()   //原型链继承var Sub = new SubType('铃铛')console.log(Sub.name)   //铃铛console.log(Sub.age)   // 10

优点：

1、可以继承父类原型上的属性，可以传参可以复用

2、每一个构造函数属性都是私有的

缺点：

用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数

四原型式继承（ES5）

    //先封装一个函数容器，用于输出对象和承载继承的原型function Conent(obj) {var f = function () { }f.prototype = obj   //继承了传入的参数return new f()      //返回函数对象}var sup = new Person('naonao')  // 拿到父类的实例var sup1 = Conent(sup)console.log(sup1.name)      //naonao   继承父类函数的属性

重点: 用一个函数包装一个对象然后返回这个函数的调用，这个函数就变成了可是随意增添属性的实例或对象。object.create()就是这个原理

缺点：

1、所有的实例都会继承原型的属性

2、无法实现复用（新实例属性都是后面添加的）

五寄生式继承（ES5）

    function Conent(obj) {var f = function () { }f.prototype = obj   //继承了传入的参数return new f()     //返回函数对象}var sup = new Person()  // 拿到父类的实例//以上是原型式继承，给原型式继承再套一个壳子传递参数function subObject(obj) {var sub = Conent(obj)sub.name = 'yvan'return sub}var sup2 = subObject(sup)   //这个函数声明之后就成了可增添属性的对象console.log(sup2.age)       //10console.log(typeof subObject) //functionconsole.log(typeof sup2)  //Object

重点 :就是给原型式继承再套一个壳子

优点：

没有创建自定义类型，只是套了一个壳子返回对象。所以就顺理成章就创建了新对象

缺点：

没有用到原型无法复用

六：寄生组合式继承（ES5）

    function Conent(obj) {     //寄生function F() { }F.prototype = objreturn new F()}var con = Conent(Person.prototype)//con实例（F实例）继承了父类函数的原型//更像原型链继承只不过继承了原型属性function SUb() {Person.call(this)    //这个继承了父类构造函数的属性}  //解决了组合式两次调用构造函数属性的缺点//重点SUb.prototype = con   //继承了con实例con.constructor = SUb     // 修改实例var sub1 = new SUb()console.log(sub1.age)     // 10

特点：修复了组合继承的问题

ES5继承总结：

继承这些知识点与其说是对象的继承，更像是函数的功能用法，如何用函数做到复用，组合，这些和使用继承的思考是一样的。上述几个继承的方法都可以手动修复他们的缺点，但就是多了这个手动修复就变成了另一种继承模式。

ES6的继承

   class Parent {constructor (name,age){this.name = name this.age = age};tack(){console.log( '姓名:' + this.name)console.log( '年龄:' + this.age)}}class Son extends Parent{constructor (name , age ,sex){super(name,age);             //super必须在子类的this之前调用this.sex = sex;}disp(){console.log('性别：' + this.sex)}zonghe(){console.log(  this.name + '年龄:' + this.age +'性别：' + this.sex)}}var c1 = new Son('闹闹',1,'男')c1.tack()    //  姓名:闹闹     年龄:1c1.disp()   //  性别：男c1.zonghe()  //  闹闹年龄:1性别：男

重点：父类不能调用子类的方法和属性，也就是说子类的变化不会影响到父类

es6继承与与es5继承的区别：

1、es5的构造函数是普通函数，可以使用关键词new也可以直接用。es6的class不能当做浦东函数用必须要用new关键词。

2、es5的原型方法和静态方法可以枚举，class默认不可枚举，要想获取不可枚举属性可以使用Object.getOwnPropertyNames方法。

3、es5的继承，实质是先创造子类的实例对象this，再执行父类的构造函数向其添加实例方法和属性(也可不执行)，而es6的继承机制是先创造父类的实例对象this，再用子类的构造函数修改this。

js继承（ES5，ES6）相关推荐

【JS继承】常见的7种继承方式
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
【JS继承】JS继承之寄生式继承
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
【JS继承】JS继承之构造函数继承
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
【JS继承】JS继承之组合继承
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
【JS继承】JS继承之原型链继承
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
Js Array数组ES5/ES6常用方法
Js Array数组ES5/ES6常用方法 1.栈方法(先进后出) push():在数组的最后一项后追加值(参数:可以为多个值或数组) 返回:数组的长度,改变了原数组. var a=[1,2,3] a ...
es5/es6 继承总结
ES5中的继承一原型链继承原型链继承的原理:直接让子类的原型对象指向父类实例,当子类实例找不到对应的属性和方法时,就会往它的原型对象,也就是父类实例上找,从而实现对父类的属性和方法的继承. // ...
JS继承六种方式详解
js继承的6种方式: 想要继承,就必须要提供个父类(继承谁,提供继承的属性) 继承在js中占有非常重要的地位,那么在js中有很多中继承的方式,不过每一种继承方式都有优缺点.下面就列举几种继承的方式: ...
前端html继承的方式,好程序员web前端教程之JS继承实现方式解析
好程序员 web 前端教程之JS 继承实现方式解析 , JS 是 Web 前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应 JS 学习不易,各类知识点概念及应用常常让人抓耳挠腮 ...
web程序前后台功能实现_好程序员web前端教程之JS继承实现方式解析
好程序员web前端教程之JS继承实现方式解析,JS是Web前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应JS学习不易,各类知识点概念及应用常常让人抓耳挠腮.在接下来的北京Web ...

js继承（ES5，ES6）

一原型链继承（ES5）

二借用构造函数继承（ES5）

三组合继承（ES5）

四原型式继承（ES5）

五寄生式继承（ES5）

六：寄生组合式继承（ES5）

特点：修复了组合继承的问题

ES5继承总结：

ES6的继承

es6继承与与es5继承的区别：

js继承（ES5，ES6）相关推荐

最新文章

热门文章

js继承（ES5，ES6）

一 原型链继承（ES5）

二 借用构造函数继承（ES5）

三 组合继承（ES5）

四 原型式继承（ES5）

五 寄生式继承（ES5）

六：寄生组合式继承（ES5）

特点 ：修复了组合继承的问题

ES5继承总结：

ES6的继承

es6继承与与es5继承的区别：

js继承（ES5，ES6）相关推荐

最新文章

热门文章

一原型链继承（ES5）

二借用构造函数继承（ES5）

三组合继承（ES5）

四原型式继承（ES5）

五寄生式继承（ES5）

特点：修复了组合继承的问题