js中常见的6种继承方式总结

目录
  • 前言
  • 1、原型继承
  • 2、盗用构造函数
  • 3、组合继承
  • 4、原型式继承
  • 5、寄生式继承
  • 6、寄生式组合继承
  • 总结

前言

js是门灵活的语言，实现一种功能往往有多种做法,ECMAScript没有明确的继承机制，而是通过模仿实现的，根据js语言的本身的特性,js实现继承有以下通用的几种方式

温馨提示：本文中Super函数都是指父类，Sub函数都是代表子类。同时文中会涉及到“构造函数模式”和“工厂模式”，如果不熟悉的小伙伴，可以先看看这篇介绍 js常见的4种创建对象方式。

1、原型继承

实现：

function Super(){ this.a=1 }
Super.prototype.say = function(){ console.log(‘hhh') }
function Sub(){}
Sub.prototype = new Super()

const test = new Sub()
console.log( test.say() )// hhh

优点：通过原型继承多个引用类型的属性和方法

缺点：Sub原型变成了Super的实例，如果Super的实例某个属性是引用值，该引用值就会被应用到所有Sub创建的实例中去，会有污染问题。如下

function Super(){ this.a=[1,2] }
function Sub(){}
Sub.prototype = new Super()

const test1 = new Sub()
test1.a.push(3)
console.log(test1.a)// [1,2,3]
const test2 = new Sub()
console.log(test2.a)// [1,2,3]

2、盗用构造函数

实现：构造函数模式+call

function Super = function(){ this.a = 1 }
function Sub = function(){
       Super.call(this)
       this.b = 2
}

const test = new Sub()

优点：每个实例都会有自己的a属性，哪怕是引用值也不会被污染

缺点：Super构造函数中的方法在每个实例上都要创建一遍（除非该方法声明提到全局）；Sub的实例无法访问Super原型上的方法

3、组合继承

实现：原型继承+盗用构造函数继承

function Super(){ this.a=[1,2] }
Super.prototype.say = function(){ console.log(‘hhh') }
function Sub(){
    Super.call(this)
    this b=2
}
Sub.prototype = new Super()

const test1 = new Sub()
console.log( test1.say() )// hhh
test1.a.push(3)
console.log(test1.a)// [1,2,3]
const test2 = new Sub()
console.log(test2.a)// [1,2]

优点：集合了【原型继承】和【盗用构造函数继承】的优点

缺点：存在效率问题，Super始终会被调用两次

4、原型式继承

实现：

es5之前

const obj = { a:1 }
function createObj(o){
    const Fn(){}
    Fn.prototype = o
    return new Fn()
}

const test = createObj(obj)

es5之后

const obj = { a:1 }

const test = Object.create(obj)

优点：对一个对象进行浅克隆创建另一个对象，同时继承该对象的原型属性

缺点：由于是浅克隆，所以实例共享的对象属性如果是引用值，会受污染。如下

const obj = { a:[1,2], b:2 }
const test1 = Object.create(obj)
const test2 = Object.create(obj)

test1.a.push(3)
test1.b=3
console.log(test1.a, test2.a)// [1,2,3]  [1,2,3]
console.log(test1.b, test2.b)// 3 2

5、寄生式继承

实现：构造函数模式+工厂模式

function createObj(o){
    let clone = objectCopy(o)
    clone.say=function(){
        console.log(‘hhh')
    }
    return clone
}

const obj = { a:1 }
const test = createObj(obj)

优点：根据一个对象克隆创建另一个对象，并增强对象

缺点：同【盗用构造函数继承】方法在每个实例上都要创建一遍

注意：objectCopy是对入参对象的复制

6、寄生式组合继承

实现：盗用构造函数继承 + 原型式继承

function Super(){ this.a=[1,2] }
Super.prototype.say = function(){ console.log(‘hhh') }
function Sub(){
    Super.call(this)
    this b=2
}

Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub

const test = new Sub()

优点：集合了【原型式继承】和【盗用构造函数继承】的优点，效率比【组合继承】更高。

总结

到此这篇关于js中常见的6种继承方式的文章就介绍到这了,更多相关js的6种继承方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 实现JavaScript中继承的三种方式

    一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似,仅允许单父类继承.prototype继承的基本方式如下: 复制代码 代码如下: function Parent(){} function Child(){} Child.prototype = new Parent(); 通过对象Child的prototype属性指向父对象Parent的实例,使Child对象实例能通过原型链访问到父对象构造所定义的属性.方法等. 构造通过原型链链接了父级对象,是否就意味着完成了对象

  • JavaScript是如何实现继承的(六种方式)

    前言:大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠 原型链 来实现. 1.原型链 基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法. 构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 原型链实现继承例子: function SuperType() { this.property

  • js实现继承的5种方式

    本文实例讲述了js实现继承的5种方式.分享给大家供大家参考,具体如下: 1.继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } } function Child(username,password){ //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承 //第一步:this.method是作为

  • js的2种继承方式详解

    js的2种继承方式详解

    js中继承可以分为两种:对象冒充和原型链方式 一.对象冒充包括三种:临时属性方式.call()及apply()方式1.临时属性方式 复制代码 代码如下: function Person(name){     this.name = name;     this.say = function(){          alert('My name is '+this.name);     }}function F2E(name,id){     this.temp = Person;     thi

  • Javascript基于对象三大特性（封装性、继承性、多态性）

    Javascript基于对象的三大特征和C++,Java面向对象的三大特征一样,都是封装(encapsulation).继承(inheritance )和多态(polymorphism ).只不过实现的方式不同,其基本概念是差不多的.其实除三大特征之外,还有一个常见的特征叫做抽象(abstract),这也就是我们在一些书上有时候会看到面向对象四大特征的原因了. 一.封装性     封装就是把抽象出来的数据和对数据的操作封装在一起,数据被保护在内部,程序的其它部分只有通过被授权的操作(成员方法),

  • js中继承的几种用法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>  <body>  <script type="text/javascript">      function Person(na

  • 深入了解javascript中的prototype与继承

    通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性列表.javascript创建对象时采用了写时复制的理念.只有构造器才具有prototype属性,原型链继承就是创建一个新的指针,指向构造器的prototype属性.prototype属性之所以特别,是因为javascript时读取属性时的遍历机制决定的.本质上它就是一个普通的指针. 构造器包括: 1.Object2.Function3.Array4.Date5.String 下面我们来举一些例子吧 复制代

  • 前端开发必须知道的JS之原型和继承

    一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型.譬如普通函数: 复制代码 代码如下: function F(){ alert(F.prototype instanceof Object) //true; } 构造函数,也即构造对象.首先了解下通过构造函数实例化对象的过程. 复制代码 代码如下: function A(x){ this.x

  • js中常见的6种继承方式总结

    目录 前言 1.原型继承 2.盗用构造函数 3.组合继承 4.原型式继承 5.寄生式继承 6.寄生式组合继承 总结 前言 js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 温馨提示:本文中Super函数都是指父类,Sub函数都是代表子类.同时文中会涉及到“构造函数模式”和“工厂模式”,如果不熟悉的小伙伴,可以先看看这篇介绍 js常见的4种创建对象方式. 1.原型继承 实现: fu

  • JavaScript中常见的几种继承方式

    JavaScript中常见的几种继承方式

    目录 原型继承 内存图 分析 盗用构造函数继承 分析 组合继承 原型链继承 寄生式继承 寄生组合式继承 原型继承 function Parent(name) { this.name = name } Parent.prototype.getName = function(){ return 'parentPrototype' + ' ' + this.name; } function Son() { } Son.prototype = new Parent(); console.log(new

  • js中常见的4种创建对象方式与优缺点

    目录 前言 1.工厂模式 2.构造函数模式 3.原型模式 4.Object.create() 其他模式 总结 前言 说起创建对象,最容易想到的便是通过对象字面量方式直接定义一个对象吧,但这种方式只能创建少量,单独且相互间无联系的对象.若要批量创建对象,该如何? 1.工厂模式 实现: function fn(a,b){ let obj = new Object() obj.a=a obj.b=b return obj } const test = fn(1,2) 优点:解决了创建多个类似对象的问题

  • JS高级ES6的6种继承方式

    JS高级ES6的6种继承方式

    目录 1.原型链继承 2.借助构造函数继承 3.组合式继承 4.原型式继承 5.寄生式继承 6.寄生组合式继承 前言: 继承是面向对象中老生常谈的一个内容,在ECMAScript6之前,JavaScript中的继承可谓是非常的繁琐的,有各种各样的继承,本质上所有的继承都是离不开原型链的,ES6新增的extends关键字也是通过原型链实现的继承,但是语法相对来说就简单了很多. 关于原型链的内容,可以参考上篇文章两张图搞懂原型链 本篇文章就来介绍一下在ECMAScript6之前是怎么实现继承的. 1

  • 浅谈js中的三种继承方式及其优缺点

    第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr

  • JS中常见编码及加密方式解析

    JS中常见编码及加密方式解析

    目录 base64 Md5 AES AES的三要素 AES工作模式区别 AES的加密流程 JS-AES.base64.SHA256.RSA等加解密库 AES的特点.特征 Ascii码 DES base64 #特征:结尾可能有"=="号 #编码 # 想将字符串转编码成base64,要先将字符串转换成二进制数据 url = "https://www.cnblogs.com/songzhixue/" bytes_url = url.encode("utf-8&q

  • 分享JavaScript 中的几种继承方式

    目录 一.原型链 1.1 原型链的问题 二.盗用构造函数 2.1 基本思想 2.2 可向父类构造函数传参 2.3 盗用构造函数的问题 三.组合继承(伪经典继承) 3.1 基本思想 3.2 组合继承的问题 四.原型式继承 4.1 基本思想 4.2 Object.create() (1)语法 (2)示例 (3)手动实现 五.寄生式继承 5.1 基本思想 5.2 寄生式继承 六.寄生式组合继承 6.1 基本思想 前言: 说到JavaScript中的继承,与之密切相关的就是原型链了,JavaScript

  • Node.js中参数传递的两种方式详解

    目录 参数传递方式 GET方式 POST方式 动态网页 参数传递方式 在Node.js中,参数传递常见的共两种方式: GET方式:通过地址栏键=值的方式进行传递. POST方式:通过表单的方式传递请求数据. GET方式 GET方式通常是在请求地址中以[?参数1=值1&参数2=值2]的格式进行传递,在Node.js中可以通过获取url然后进行获取参数,如下所示: //1.引入http模块 var http = require('http'); //2.创建服务 var server = http.

  • Javascript编程中几种继承方式比较分析

    本文实例分析了Javascript编程中几种继承方式比较.分享给大家供大家参考,具体如下: 开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究

  • Javascript中的几种继承方式对比分析

    开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现

随机推荐