1. 原型链继承（子类的原型等于父类的实例）

            <!-- 父类 -- >function Super(name) {this.name = name}Super.prototype = {name: '我要走走看看',age: 18,hobby: { a: '篮球' },}<!-- 子类 -- >function Sub() {}Sub.prototype = new Super() // 子类的原型等于父类的实例const sub = new Sub()console.log(sub.age) // 18

缺点：

1. 子类无法想父类的构造函数传参. new Sub( name )父类也接收不到

2. 子类修改父类原型中引用类型的值时，原型的属性发生改变，导致之后的实例的值都发生改变

注：给变量赋值，是引用还是复制

            const sub1 = new Sub()const sub2 = new Sub()sub1.hobby.a = '羽毛球'  // 这里修改了sub1的hobby的值console.log(sub1.hobby) // { a: '羽毛球' }console.log(sub2.hobby) // { a: '羽毛球' }

2.借用构造函数继承

通过 call 、apply将父类构造函数的方法引入子类

            // 父类function Super(name) {this.name = name}Super.prototype = {name: '我要走走看看',age: 18,hobby: { a: '篮球' },}// 子类function Sub(name) {Super.call(this,name)// 通过  call / apply 继承父类构造函数内的属性和方法}const sub = new Sub('猫咪')console.log(sub.name)  // 猫咪console.log(sub.age)   // undefined

优点：1. 解决了子类实例向父类传参的缺点

2.解决了子类实例修改父类原型属性或者方法的问题

3. 可以继承多个构造函数属性（call多个）。

缺点： 1. 无法继承父类原型的方法和属性

2. 每个新实例都有父类构造函数的副本，无法复用，臃肿。

3. 组合继承（j原型链继承 + 构造函数继承）

            // 父类function Super(name) {this.name = name}Super.prototype = {name: '我要走走看看',age: 18,hobby: { a: '篮球' },}// 子类function Sub(name) {Super.call(this,name)   // 1: 调用第一次}Sub.prototype = new Super() // 2: 调用第二次

优点：可传参 + 继承了父类的原型

缺点：两次调用父类的构造函数（耗内存）

4. 原型式继承

            function Super(name) {this.name = name}Super.prototype.sayName = function() {console.log(this.name)}const a = new Super('姓名')<!---这里相当于Object.create()做的事，将 现有对象 作为 新对象的原型 --->function inherit(o) {function F() {}F.prototype = oreturn new F()}const b1 = inherit(a)<!-------->console.log(b.name) // 姓名

上述注释中的代码类似于

 const b1 = Object.create(a)

用Object.create更好一点，还可以加上额外的属性

          const b1 = Object.create(a, {age: {value: 15,writable: true,},address: {value: '上海',writable: true,},})

缺点：无法复用，原型都是手动添加上去的

5 . 寄生组合式继承（常用）

            function Super(name) {this.name = namethis.age = 21}Super.prototype = Object.assign({sayName: () => {console.log(this.name)},address: '上海',hobby: ['唱歌'],})function Sub(name) {Super.call(this, name) // 继承父类构造函数的属性}Sub.prototype = Object.create(Super.prototype) // 继承父类的原型const sub1 = new Sub('姓名1')console.log(this.name) // 姓名1

优点：既可以传参又实现了原型的复用

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

理解JS的6种继承方式
[转]重新理解JS的6种继承方式写在前面一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面 ...
js常见的的6种继承方式
继承是面向对象的,继承可以帮助我们更好的复用以前的代码,缩短开发周期,提高开发效率:继承也常用在前端工程技术库的底层搭建上,在整个js的学习中尤为重要常见的继承方式有以下的六种一.原型链继承原型 ...
【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 ...
JS中对象的四种继承方式：class继承、原型链继承、构造函数继承、组合继承（构造函数和原型链继承的结合）
前言才发现之前没有对JavaScript中的继承做过总结,不过看得到是不少,接下来就对这几种继承方式做一下总结. class继承 class继承是ES6引入的标准的继承方式. ES6引入了class ...
JavaScript中的几种继承方式及优缺点,你知道多少呢？
原文连接:JavaScript中的几种继承方式及优缺点,你知道多少呢? 继承也是前端里面的重要的一个知识点,在实际工作中或者面试中也会经常的遇到,那么通过这篇文章我们详细的了解一下继承的几种方式以及各 ...

Es5的几种继承方式

1. 原型链继承（子类的原型等于父类的实例）

2.借用构造函数继承

3. 组合继承（j原型链继承 + 构造函数继承）

4. 原型式继承

5 . 寄生组合式继承（常用）

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

最新文章

热门文章

Es5的几种继承方式

1. 原型链继承 （子类的原型等于父类的实例）

2.借用构造函数继承

3. 组合继承 （j原型链继承 + 构造函数继承 ）

4. 原型式继承

5 . 寄生组合式继承（常用）

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

最新文章

热门文章

1. 原型链继承（子类的原型等于父类的实例）

3. 组合继承（j原型链继承 + 构造函数继承）