热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

再谈原型链,深刻理解原型及原型链(案例分析,详细图解,一目了然)

一、前言:这个案例稍微有些难度,需要掌握基本的原型、原型链、构造函数、继承等相关知识,如若还没有掌握,不妨看看我的这篇博客,详细介绍了这些知识及关系:http:blog.csdn.netspic

一、前言:这个案例稍微有些难度,需要掌握基本的原型、原型链、构造函数、继承等相关知识,如若还没有掌握,不妨看看我的这篇博客,详细介绍了这些知识及关系:http://blog.csdn.net/spicyboiledfish/article/details/71123162


二、首先看看这个案例,源代码附上:

function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.hi=function(){
console.log("Hi,my name is"+this.name+",I'm"+this.age+"years old now.");
};
Person.prototype.LEGS_NUM=2;
Person.prototype.ARMS_NUM=2;
Person.prototype.walk= function () {
console.log(this.name+"is walking...");
};

function Student(name,age,className){
Person.call(this,name,age);
this.className=className;
}
Student.prototype=Object.create(Person.prototype);
Student.prototype.cOnstructor=Student;

Student.prototype.hi=function(){
console.log("Hi,my name is "+this.name+" ,I'm "+ this.age+" years old now,and from "+this.className+".");
};

Student.prototype.learn=function(subject){
console.log(this.name+"is learning "+subject+" at "+this.className+".");
};

//test
var bosn=new Student("Bosn",27,"Class 3,Grade 2");
bosn.hi(); //Hi,my name is Bosn,I'm 27 years old now,and from Class 3,Grade 2.
bosn.LEGS_NUM; //2
bosn.walk(); //Bosnis walking...
bosn.learn("math"); //Bosnis learning math at Class 3,Grade 2.

三、由以上代码,可以轻松在控制台打印出相应的结果。

有个难点:Student.prototype=Object.create(Person.prototype);是将Student.prototype的原型继承指向Person.prototype;为什么不使用Student.prototype=Person.prototype呢?因为Student.prototype会有自己独有的方法,譬如learn(){},如果改成这句代码,那么添加或修改Student.prototype的属性方法后,Person.prototype的属性和方法也会跟着被修改了,因为这两者已经指向了同一个对象。

如下:即为以上代码所体现出的完整的原型链结构图,尽情观赏:


四、如果修改Student.prototype属性方法,结果又如何呢?上源码并附上详细图解:

Student.prototype.x=101;
console.log(bosn.x); //101
Student.prototype={y:2};
console.log(bosn.y); //undefined
console.log(bosn.x); //101

var nunnly=new Student("Nunnly",3,"Class LOL KengB");
console.log(nunnly.x); //undefined
console.log(nunnly.y); //2



解释:

1.Student.prototype.x=101;意思为Student.prototype添加一个属性x为101,所以访问bosn.x=101;

2.Student.prototype={y:2};意思是替换对象属性,系统会重新开辟一块空间放一个对象{y:2},且指针的指向也变化了,Student.prototype就指向了新的对象{y:2};

3.访问bosn.y;首先在bosn对象本身寻找,没有,去bosn的原型找,发现也没有,这时候只能返回undefined;访问bosn.x仍然返回时101;

4.重新创建一个对象nunnly,那么这个实例划对象的原型是指向新的原型对象的{y:2};

5.访问nunnly.x未找到,返回undefined;访问nunnly.y返回2;


五、Github源码:https://github.com/spicyboiledfish/Javascript-testJS


推荐阅读
  • 使用nodejs爬取b站番剧数据,计算最佳追番推荐
    本文介绍了如何使用nodejs爬取b站番剧数据,并通过计算得出最佳追番推荐。通过调用相关接口获取番剧数据和评分数据,以及使用相应的算法进行计算。该方法可以帮助用户找到适合自己的番剧进行观看。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 闭包一直是Java社区中争论不断的话题,很多语言都支持闭包这个语言特性,闭包定义了一个依赖于外部环境的自由变量的函数,这个函数能够访问外部环境的变量。本文以JavaScript的一个闭包为例,介绍了闭包的定义和特性。 ... [详细]
  • 本文详细解析了JavaScript中相称性推断的知识点,包括严厉相称和宽松相称的区别,以及范例转换的规则。针对不同类型的范例值,如差别范例值、统一类的原始范例值和统一类的复合范例值,都给出了具体的比较方法。对于宽松相称的情况,也解释了原始范例值和对象之间的比较规则。通过本文的学习,读者可以更好地理解JavaScript中相称性推断的概念和应用。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 不同优化算法的比较分析及实验验证
    本文介绍了神经网络优化中常用的优化方法,包括学习率调整和梯度估计修正,并通过实验验证了不同优化算法的效果。实验结果表明,Adam算法在综合考虑学习率调整和梯度估计修正方面表现较好。该研究对于优化神经网络的训练过程具有指导意义。 ... [详细]
  • 本文介绍了作者在开发过程中遇到的问题,即播放框架内容安全策略设置不起作用的错误。作者通过使用编译时依赖注入的方式解决了这个问题,并分享了解决方案。文章详细描述了问题的出现情况、错误输出内容以及解决方案的具体步骤。如果你也遇到了类似的问题,本文可能对你有一定的参考价值。 ... [详细]
  • imx6ull开发板驱动MT7601U无线网卡的方法和步骤详解
    本文详细介绍了在imx6ull开发板上驱动MT7601U无线网卡的方法和步骤。首先介绍了开发环境和硬件平台,然后说明了MT7601U驱动已经集成在linux内核的linux-4.x.x/drivers/net/wireless/mediatek/mt7601u文件中。接着介绍了移植mt7601u驱动的过程,包括编译内核和配置设备驱动。最后,列举了关键词和相关信息供读者参考。 ... [详细]
  • 利用Visual Basic开发SAP接口程序初探的方法与原理
    本文介绍了利用Visual Basic开发SAP接口程序的方法与原理,以及SAP R/3系统的特点和二次开发平台ABAP的使用。通过程序接口自动读取SAP R/3的数据表或视图,在外部进行处理和利用水晶报表等工具生成符合中国人习惯的报表样式。具体介绍了RFC调用的原理和模型,并强调本文主要不讨论SAP R/3函数的开发,而是针对使用SAP的公司的非ABAP开发人员提供了初步的接口程序开发指导。 ... [详细]
  • Java学习笔记之面向对象编程(OOP)
    本文介绍了Java学习笔记中的面向对象编程(OOP)内容,包括OOP的三大特性(封装、继承、多态)和五大原则(单一职责原则、开放封闭原则、里式替换原则、依赖倒置原则)。通过学习OOP,可以提高代码复用性、拓展性和安全性。 ... [详细]
author-avatar
你看看我的世界_420
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有