手机版

js继承的这6种方式!㈠

时间:2021-08-25 来源:互联网 编辑:宝哥软件园 浏览:

写在前面

继承概论

继承是JavaScript面向对象设计的重要组成部分。希望大家认真阅读这篇文章,彻底理解传承的概念。

传承的核心

1.继承方法1:原型链

1.1导言

原型链是实现继承最原始的模式,即通过原型属性实现继承。

//parent-constructor function父亲(){this .父辈prop=true}//parent-prototype属性父亲. prototype父代value=function () {return this .父辈prop}//子辈-constructor functionson () {this。sonprop=false }//Child-prototype属性:继承父//即__proto__指向父//的原型如果不理解,请阅读《一张图彻底KO原型链(prototype,__proto__》son.prototype=new神父()//Child-添加原型方法son . prototype . getson value=function(){ return this . sonprop }//创建实例对象varson=newson()console . log(son .get父值())//true1.2分析:son实例对象是如何找到get父值()?

先看看子对象本身。如果找不到对象本身,在Son.prototype中找到它如果找不到Son.prototype,继续向上一级,Son。原型。_ _ proto _ _(父亲。原型),以此类推,直到找到所需的属性或方法,或者到达原型链的顶部。如果最后找不到Object.prototype会怎么样?

//一个不存在的方法console . log(son . getvalue())//errore:不是函数1.3 notes

重写父原型链的方法或添加父原型链不存在的方法必须在父原型链代码之后。(这个很好理解,不要放代码演示)

通过原型链继承后,原型对象不能再随便创建,因为原型链会被覆盖。

//子-prototype属性:继承父Son.prototype=new神父()//不能像下面这样,这样会使上面的代码无效//,因为这相当于重新创建了一个原型对象Son。prototype={ getsonvalue 3360 function(){返回此。sonprop}} 1.4原型链继承的缺点

世界上的一切不可能都是完美的。原型链虽然强大,但也有缺陷。

原型链中引用类型的属性将由所有实例共享,即所有实例对象使用相同的数据,这将相互影响。

function父辈(){ this.arr=[1,2,3]} function Son(){ } Son . prototype=new父辈()var son1=new Son()console . log(son1 . arr)//1,2,3 varson 2=newson()son2 . arr . push(4)console . log(son2 . arr)//1,2,3,4 console.log (son1.arr)//1,2,3,4不能将参数传递给父构造函数

2.继承方法2:借用构造函数

2.1导言

模式1中由引用类型引起的问题可以通过使用构造函数来解决。核心思想是在子构造函数中调用父构造函数。

如何在一个构造函数中调用另一个函数?——call()和apply()

function父亲()的第一个函数{this。arr=[1,2,3]} functionson () {//call是由此指向的对象。也就是说,构造函数的范例对象父亲节调用(this) /*相当于下面的代码:(function () {this。arr=[1,2,3]})。call(this)*/} varson 1=newson()console . log(son1 . arr)//1,2 3 var son2=new Son()son2 . arr . push(4)console . log(son2 . arr)//1,2,3,4 console.log(son1.arr) //1,2,3//解决传递参数的问题:函数父(name) {this。name=name}功能子(名){父。调用(this,Name)}var son1=new Son('昵称')console.log(son1.name) //昵称var son2=new Son(' Yi Deng ')console . log(son2 . Name)//Yi Deng 2.2借用构造函数的缺陷

这种方式是由构造函数实现的,当然也带来了构造函数本身的问题。——破坏了可重用性。因为每个实例都会创建一个副本。

3.组合遗传

3.1导言

组合继承=原型链借用构造函数。取长避短:共享原型链,借用构造函数

功能父辈{这个。name=为此命名。arr=[1,2,3]}父辈。原型。getname=function(){ console。日志(这个。姓名)}功能Son(姓名、年龄){ 0父辈。叫(这个。说出)这个。年龄=年龄}儿子。原型=新父辈(儿子。原型。构造函数=sonson。原型。getage=function(){ console。日志(这个。年龄)} var son1=new Son('小名,23)son1。由…改编推动(4)控制台。日志(son1。arr)//1,2,3,4 S1。getname()//小名son1。GetAge()//23 var son2=new Son('一灯,24)console.log(son2.arr) //1,2,3 S1。getname()//一灯son1.getAge() //243.2解析

借用构造函数部分:

父亲。叫(这个,名字)——名字来自父亲年龄=年龄;儿子。原型。建造师=儿子——年龄来自儿子

原型链部分:

父亲。原型。getName——getName方法来自父亲。原型类型on.prototype.getAge——getAge来自儿子原型

后记

关于继承的后三种方式马上推出,期待你的点赞关注!

以上所述是小编给大家介绍的射流研究…继承方式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

版权声明:js继承的这6种方式!㈠是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。