理解JavaScript原型链


Posted in Javascript onOctober 25, 2016

每一个JavaScript对象都和另一个对象相关联,相关联的这个对象就是我们所说的“原型”。每一个对象都会从原型继承属性和方法。有一个特殊的对象没有原型,就是Object。在之后的图示中会进行说明。

举个栗子,我们首先声明一个函数Student():

function Student(name){
  this.name = name;
 this.hello = function(){
   alert(`Hello,${this.name}`);
 }
 }

这个函数包含一个属性name和一个方法hello。
在JavaScript中,可以通过new关键字来调用Student函数(不写new就是一个普通函数,写new就是一个构造函数),并且返回一个原型指向Student.prototype的对象,如下所示:

var xiaoming = new Student("xiaoming");
 alert(xiaoming.name); // xiaoming
 xiaoming.hello(); // Hello,xiaoming

如果我们想确认一下我们的设想对不对,就会希望去比较一下xiaoming.prototype和Student.prototype是否相等。
但是xiaoming没有prototype属性,不过可以用__proto__来查看。接下来我们就用这些属性来查看xiaoming,Student,Object之间的原型链:

document.onreadystatechange = function(){
 // interactive表示文档已被解析,但浏览器还在加载其中链接的资源
 if(document.readyState === "interactive"){
  var xiaoming = new Student("xiaoming");
  alert(xiaoming.name);
  xiaoming.hello();
  console.log("xiaoming.__proto__:");
  console.log(xiaoming.__proto__);
  console.log("Student.prototype:");
  console.log(Student.prototype);
  console.log("xiaoming.__proto__ === Student.prototype:" + xiaoming.__proto__ === Student.prototype);
  console.log("Student.prototype.constructor:" + Student.prototype.constructor);
  console.log("Student.prototype.prototype:" + Student.prototype.prototype);
  console.log("Student.prototype.__proto__:");
  console.log(Student.prototype.__proto__);
  console.log(Object.prototype);
  console.log("Student.prototype.__proto__ === Object.prototype:" + Student.prototype.__proto__ === Object.prototype);
 }
}

理解JavaScript原型链

七个红色箭头指向的就是七个console.log语句的输出结果。用图例展示一下如图所示:

理解JavaScript原型链

测试表明Object.prototype和Student.prototype.__proto__指向的Object并不是同一个。这个Object就是之前说的没有原型的那个Object,我们可以看到它并没有对应的prototype或者__proto__属性:

理解JavaScript原型链

由图可得原型链如下所示:

理解JavaScript原型链

由于本人语言表达能力有限,理解也比较浅显,所以图示比较多,错误之处还望指出,谢谢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
Prototype Array对象 学习
Jul 19 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
javascript使用location.search的示例
Nov 05 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
javascript控制台详解
Jun 25 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 #Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 #Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 #Javascript
JavaScript prototype属性详解
Oct 25 #Javascript
对Angular.js Controller如何进行单元测试
Oct 25 #Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 #Javascript
input file上传 图片预览功能实例代码
Oct 25 #Javascript
You might like
PHP编码规范的深入探讨
2013/06/06 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
Python单元和文档测试实例详解
2019/04/11 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
金融专业个人的自我评价
2013/10/18 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
开门红主持词
2014/04/02 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
捐书活动倡议书
2015/04/27 职场文书
爱国主义电影观后感
2015/06/18 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python