理解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 相关文章推荐
jQuery 遍历json数组的实现代码
Sep 22 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 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 判断服务器操作系统的类型
2014/02/17 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
js模拟类继承小例子
2010/07/17 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python协程的用法和例子详解
2017/09/09 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
对于Python深浅拷贝的理解
2019/07/29 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
详解python 中in 的 用法
2019/12/12 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
职业生涯规划书基本格式
2014/01/06 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
广告业务员岗位职责
2014/02/06 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
售后服务承诺书模板
2014/05/21 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python