理解js继承的6种方式

Grace-zyy      2022-02-16     125

关键词:

  想要继承,就必须要提供个父类(继承谁,提供继承的属性)

    

  一、原型链继承

    

    重点:让新实例的原型等于父类的实例。

    特点:1、实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)

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

       2、继承单一。

       3、所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)

  

  二、借用构造函数继承

    

    重点:用.call()和.apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))

    特点:1、只继承了父类构造函数的属性,没有继承父类原型的属性。

       2、解决了原型链继承缺点1、2、3。

       3、可以继承多个构造函数属性(call多个)。

       4、在子实例中可向父实例传参。

    缺点:1、只能继承父类构造函数的属性。

       2、无法实现构造函数的复用。(每次用每次都要重新调用)

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

 

  三、组合继承(组合原型链继承和借用构造函数继承)(常用)

    

    重点:结合了两种模式的优点,传参和复用

    特点:1、可以继承父类原型上的属性,可以传参,可复用。

       2、每个新实例引入的构造函数属性是私有的。

    缺点:调用了两次父类构造函数(耗内存),子类的构造函数会代替原型上的那个父类构造函数。

 

  四、原型式继承

    

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

    特点:类似于复制一个对象,用函数来包装。

    缺点:1、所有实例都会继承原型上的属性。

       2、无法实现复用。(新实例属性都是后面添加的)

  

  五、寄生式继承

    

    重点:就是给原型式继承外面套了个壳子。

    优点:没有创建自定义类型,因为只是套了个壳子返回对象(这个),这个函数顺理成章就成了创建的新对象。

    缺点:没用到原型,无法复用。

    

  六、寄生组合式继承(常用)

    寄生:在函数内返回对象然后调用

    组合:1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函数,可传参 

     

  

    

    重点:修复了组合继承的问题

 

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

    这些继承模式的学习重点是学它们的思想,不然你会在coding书本上的例子的时候,会觉得明明可以直接继承为什么还要搞这么麻烦。就像原型式继承它用函数复制了内部对象的一个副本,这样不仅可以继承内部对象的属性,还能把函数(对象,来源内部对象的返回)随意调用,给它们添加属性,改个参数就可以改变原型对象,而这些新增的属性也不会相互影响。

 

js的5种继承方式——前端面试

js主要有以下几种继承方式:对象冒充,call()方法,apply()方法,原型链继承以及混合方式。下面就每种方法就代码讲解具体的继承是怎么实现的。1、继承第一种方式:对象冒充1functionParent(username){2this.username=username;3this.hello=functi... 查看详情

理解js中是原型链?如何实现继承?

参考技术A1.每个构造函数都有一个原型对象2.每个原型对象都包含一个指向构造函数的指针3.每个实例都包含一个指向原型对象的指针4.查找方式是一层层向上查找直至顶层Object.prototype1.原型链继承2.借用构造函数(call,apply)3.组合... 查看详情

都0202年了,你还不知道javascript有几种继承方式?(代码片段)

...吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式。   js继承总共分成5种,包括构造函数式继承、原型链式继承、组合式继承、寄生式继承和寄生组合式继承。 构造函数式继承 &nbs... 查看详情

js实现继承的5种方式

...语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现方式可以实现多继承)实现原理:让父类的构造... 查看详情

js原型继承的几种方式

1.原型链继承2,构造函数继承(对象冒充继承)3,组合继承(原型链继承+构造函数继承)4,原型式继承5.寄生组合式继承一。原型链继承functionShow(){ this.name="run"; } functionRun(){ this.age="20";//Run继承了Show,通过原型,形成... 查看详情

js实现继承的几种方式

前言JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下://定义一个动物类functionAnimal(name){/... 查看详情

js继承的7种方法,你学会了吗?(代码片段)

...同学,本文主要写JavaScript中的7种继承方式,深入理解每种方式所存在的问题同时新的方式是如何解决问题的📢非常感谢你的阅读,不对的地方欢迎指正🙏📢愿你生活明朗,万物 查看详情

js继承的7种方法,你学会了吗?(代码片段)

...同学,本文主要写JavaScript中的7种继承方式,深入理解每种方式所存在的问题同时新的方式是如何解决问题的📢非常感谢你的阅读,不对的地方欢迎指正🙏📢愿你生活明朗,万物 查看详情

js实现继承的几种方式(转)

转自:幻天芒的博客前言JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下://定义一个动... 查看详情

js继承的几种方式

JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。既然要实现继承,那么我们先定义一个父类://定义一个动物类functionAnimal(name){//属性this.name=name||‘Animal‘;//实例方法this.sleep=function(){alert(this.name+‘正在睡觉!‘... 查看详情

js中原型继承的三种方式

              查看详情

关于js的对象原型继承

javascript中,对象的继承是通过原型去继承。可以这样理解:js中的对象,包含的除了属性和方法,还有一个最基本的原型__proto__对象。这个原型__proto__指向谁,这个对象就继承谁。这是最容易理解对象原型继承的一种方式。如下... 查看详情

学会这5种js函数继承方式,前端面试你至少成功50%

本文分享自华为云社区《人类高质量JS函数继承》,作者:北极光之夜。 。一、前言函数继承是在JS里比较基础也是比较重要的一部分,而且也是面试中常常要问到的。下面带你快速了解JS中有哪几种是经常出现且必须掌握的继... 查看详情

javascript(js)创建对象的模式与继承的几种方式

1.js创建对象的几种方式工厂模式为什么会产生工厂模式,原因是使用同一个接口创建很多对象,会产生大量的重复代码,为了解决这个问题,产生了工厂模式。functioncreatePerson(name,age,job){   varo=newObject();   o... 查看详情

js实现继承的几种方式

1.call(),apply()方法实现继承 call方法的第一个参数的值赋值给类(即方法)中出现的this call方法的第二个参数开始依次赋值给类(即方法)所接受的参数 apply方法的第一个参数和call相同,第二个参数为数组类型,这个数组中... 查看详情

javascript面向对象系列第三篇——实现继承的3种形式

前面的话  学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承。开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象。javascript主要包括类式继承、原型继承和拷贝继承这三种继承方式。... 查看详情

js继承几种方式

1、原型继承<script> functionPerson(name,age){ this.name=name; this.age=age; } Person.prototype.sayHello=function(){ alert("使用原型得到Name:"+this.name); } varper=newPerson("dzk",21); per.sayHello();//输 查看详情

js里实现继承的几种方式(代码片段)

来自http://www.w3school.com.cn/对象冒充方式(支持多继承)其原理如下:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使ClassA构造函数... 查看详情