当前位置:首页 > 日记 > 正文

{高级路径}详细解释了从原型链到组合继承的生成。

{高级路径}详细解释了从原型链到组合继承的生成。
在Javascript原型链中,层次化的搜索规则和原型对象(原型)的共享特性是很容易实现的。

1。父类的实例对象被分配给子类的原型对象(原型),它可以继承。
功能人(){
this.username = 'ghostwu;
}
person.prototype.showusername =函数(){
返回this.username;
}
函数(教师){ }
teacher.prototype =新的人();

新教师();
console.log(OT。用户名); / / ghostwu
console.log(ot.showusername()); / / ghostwu
通过将父类(个人)的实例分配给子类教师的原型对象,它可以实现继承。子类的实例和实例可以访问父类的属性和方法。
如果你不画这幅画,你需要看我的文章:

{高级手工路}一步一步的原型(原型)对象javascript,原型链

第十一行执行ot.username。首先,它在OT上查找对象。显然,在OT对象没有属性,所以它会把teacher.prototype沿着OT的隐含的原型__proto__方向。

发现没有用户名的属性。Continue searching along Teacher.prototype.__proto__, and find new Person (). 这个例子有用户名的话,ghostwu价值。

所以停止查找,输出ghostwu。

第十二排在前面的ot.showusername执行相同的过程,但在新的人(),它没有找到showusername方法,并继续沿着新的人()。

隐含的原型__proto__定向(人。原型)的查找,和showusername发现person.prototype,停止查找,输出ghostwu。

二,将父类原型对象(原型)分配给子类的原型对象(原型),后者可以继承父类的方法,但继承父类的属性。
功能人(){
this.username = 'ghostwu;
}
person.prototype.showusername =函数(){
return'person::showusername法;
}
函数(教师){ }
teacher.prototype = person.prototype;

新教师();
console.log(ot.showusername()); / / ghostwu
console.log(OT。用户名); / /定义,用户名没有继承父类
因为老师。原型的隐式原型(__proto__)只分person.prototype,不去人实例的属性

三。继承关系之后,实例与构造函数(类)之间的关系。

或是和isprototypeof
功能人(){
this.username = 'ghostwu;
}
person.prototype.showusername =函数(){
返回this.username;
}
函数(教师){ }
teacher.prototype =新的人();

新教师();
console.log(或是老师); / /真的
console.log(或是人); / /真的
console.log(OT实例对象); / /真的
console.log(teacher.prototype.isprototypeof(OT) / /真实);
console.log(person.prototype.isprototypeof(OT) / /真实);
console.log(Object.prototype.isPrototypeOf(OT) / /真实);
四,父类的方法和属性,子类可以重写(重写),子类没有的方法和属性,并且可以扩展。
函数(人){ }
(person.prototype.showusername =功能){
console.log('person::showusername);
}
函数教师(){ }
teacher.prototype =新的人();
teacher.prototype.showusername =函数(){
console.log(::showusername);
}
teacher.prototype.showage =函数(){
(22)console.log;
}
新教师();
OT.showUserName(); / /老师::showusername
OT.showAge(); / / 22
五。改写后的原型对象,它实际上改变原型对象的__proto__方向。

对原型对象的原型__proto__方向改变了,和原来的继承关系上(切断)。
函数(人){ }
(person.prototype.showusername =功能){
console.log('person::showusername);
}
函数(教师){ }
teacher.prototype =新的人();
teacher.prototype = { {
showage:函数(){
(22)console.log;
}
}
新教师();
OT.showAge(); / / 22
OT.showUserName();
上面的例子中,第七行,重写teacher.prototype原型对象的老师(原型),隐含的原型第六行的原始对象(__proto__)点没有影响

所以在第十四排,ot.showusername()将导致调用错误,因为隐藏的原型(__proto__)教师的原型对象(原型)不再指向父类的实例(人),和继承关系被打破。

六。在继承过程中,仔细处理实例属性上引用类型的数据。
功能人(){
this.skills = { 'php ','javascript};
}
函数(教师){ }
teacher.prototype =新的人();

VaR OT1 =新教师();
VaR OT2 =新教师();
ot1.skills.push('linux);
console.log(OT2。技能); / / PHP,java,Linux
OT1的技能增加了一个Linux的数据,和其他实例可以因为技能数据共享在其他情况下,访问,和技能是一个引用类型

七。借用构造函数

为了消除引用类型对不同实例的影响,我们可以使用构造函数将引用类型的数据复制到每个对象,这样就不会相互影响。
功能人(uname){
this.skills = { 'php ','javascript};
this.username = uname;
}
person.prototype.showusername =函数(){
返回this.username;
}
老师的作用(uname){
(这person.call,uname);
}
VaR OT1 =新教师();
ot1.skills.push('linux);
VaR OT2 =新教师();
console.log(OT2。技能); / / PHP,Javascript
console.log(ot2.showusername());
虽然ot1.skills增添了Linux,不影响ot2.skills数据。它使用子类构造函数调用父类的构造函数,并复制父类的属性。

传递参数,例如第八行,但第十五行,方法调用错误,因为在构造中,只有复制属性不会复制到父类原型对象中。

八。组合继承(原型对象+借用构造函数)

通过以上分析,一个原型继承的缺点是:

1。参数不能转移,例如,

teacher.prototype =新的人();

有些人说括号后面可以跟着参数。是的,但是在所有参数中,子类的所有实例都是这样的。

2。在原型对象上放置引用类型会对不同实例产生相互影响。

单个借用人的缺点:

1。不能复制到父类的方法

正如原型对象方法的缺点一样,构造函数可以弥补它,借用构造函数的缺点,原型对象方法可以弥补它的不足。
功能人(uname){
this.skills = { 'php ','javascript};
this.username = uname;
}
person.prototype.showusername =函数(){
返回this.username;
}
老师的作用(uname){
(这person.call,uname);
}
teacher.prototype =新的人();

VaR OT1 =新老师('ghostwu);
ot1.skills.push('linux);
VaR OT2 =新老师('ghostwu);
console.log(OT2。技能); / / PHP,Javascript
console.log(ot2.showusername()); / / ghostwu
子类的实例OT2的技能不是由OT1的影响,和子类的实例,也可以调用父类的方法。

上面的js方法是从原型链继承的,它继承到了整个世代。详细的解释是,萧边分享了你的全部内容。我希望能给你一个参考,希望你能支持它。

相关文章

Dreamweaver是如何为网页制作跳转

Dreamweaver是如何为网页制作跳转

菜单,网页制作,跳转,何为,电脑软件,网页上会有各种菜单。今天我们将看到如何使用DW来制作跳转菜单。这很简单,你需要学习的朋友。 软件名称:Adobe Dreamweaver CC 2017 v17.0中文破解版(附破解补丁)64位软件大小:758mb更新时间:2016-11-05 第一…

如何快速的wps2016文本形式的内容

如何快速的wps2016文本形式的内容

填充,文本,形式,快速,内容,在工作和wps2016语言的使用,实现快速填充的形式,是提高效率的方法的一个很好的方式,你知道WPS表格快速充填的很小,把你的内容很快填满了wps2016表,希望对你有帮助。 wps2016表内容的快速填充 1。打开WPS文档,选择需要…

Word如何设置连续页码以设置连续页

Word如何设置连续页码以设置连续页

连续,设置,页码,如何设置,电脑软件,页码的不连续性主要是由分词符号引起的。只要在不连续的页码删除分割符号,或当分割符号是无法删除的,不连续的页面格式设置为是,和最后一段。接下来将由一个小编辑分享设置字连续页码的技术共享,希望对你有帮…

如何将PS八骏图为粉笔

如何将PS八骏图为粉笔

如何将,八骏图,电脑软件,PS,用PS把各种画译成粉笔画,过程很简单,现在我们分享操作步骤和截图供参考。 1、首次启动PS图象处理软件CS5,执行Ctrl + O组合键打开预先准备好的黑板画和切割尺寸为800×600。 2、从桌面上拖动准备好的八到PS,形成一个…

Dreamweaver如何自定义返回步骤的

Dreamweaver如何自定义返回步骤的

自定义,数量,步骤,电脑软件,Dreamweaver,当Dreamweaver设计Web页面时,您希望撤销一些操作。这是返回的次数。你如何设置返回的数量让我们来看看详细的教程。 软件名称:Adobe Dreamweaver CC 2017 v17.0中文破解版(附破解补丁)64位软件大小:758m…

在python3.6-mysql插入文件路径和

在python3.6-mysql插入文件路径和

反斜杠,文件,路径和,解决方案,电脑软件,如下所示: 如上所述,更换罐。 以上python3.6-mysql插入文件的路径,失去反斜杠的解决方案是小编分享所有的内容,希望能给大家一个参考,我希望你能支持它。…

PS图象处理软件的水晶导航按钮

PS图象处理软件的水晶导航按钮

导航,图象,处理软件,按钮,水晶,最终效果 1,用灰色填充底部层以创建一个新层。用矩形选框工具的新层,画一个矩形(大小本身)和填写蓝(蓝值是# 22aff7)。它在这里存储选区,因为他们以后使用。最后,给一个5px阴影,如下: 2、新层,命名暗深蓝色填充(颜色值#…

PPT如何使用宏添加倒计时PPT来增加

PPT如何使用宏添加倒计时PPT来增加

倒计时,如何使用,电脑软件,PPT,PPT如何使用宏来添加倒计时,在各种演讲和比赛中,往往要求选手在指定的时间内完成演讲,因此组织者需要安装PowerPoint演示,倒计时来提醒演讲者。下面的小编辑教你PPT使用宏添加倒计时的方式。 PPT使用宏来添加倒…

PS如何制作帧动画

PS如何制作帧动画

帧动画,电脑软件,PS,ps是我们常用的软件,大多数人都会做一些,经常用它来修复图片,但很少有人知道它也可以用来制作动画。有很多简单的动画,可以完成PS。接下来,萧边将谈论如何用ps做动画 软件名称:Adobe PS图象处理软件8全绿色中文版软件大小:150…

图像切换效果的Javascript实现

图像切换效果的Javascript实现

图像,效果,电脑软件,Javascript,本例为大家分享javascript的效果,实现图片切换,自定义属性的应用,供大家参考,具体内容如下 图片切换实例 体{ 背景颜色:# a9a9a9; 保证金:0px; } UL { 填充:0; 保证金:0; } 李{ 列表样式:无; } # PIC { 宽度:670px; 身高:420px; 职…

如何彻底删除电脑中的文件(方案)赢10

如何彻底删除电脑中的文件(方案)赢10

文件,方案,彻底删除,电脑软件,问题: 我的电脑是配备赢10系统。有些文件不想让太多人知道。我不知道完全删除文件的方法,也不能用恢复软件恢复。 答案uff1a 在赢10的桌面系统,在开始菜单或任务栏搜索框中输入cmd,在搜索结果中找到命令提示符,右…

WPS表2013如何使一列分成多列

WPS表2013如何使一列分成多列

多列,电脑软件,WPS,通过划分单元格的内容,恐怕这个问题已经困扰了大多数人,但解决起来并不困难。一个列被分成多列操作,它在数据中。下面是小编辑器,为你讲述WPS表2013,让列分成多个列,希望对你有所帮助。 WPS表2013将一列分成多列 (1)我们启动WP…