理解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 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
Vue.js学习示例分享
Feb 05 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue实现信息管理系统
May 30 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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 date()格式MySQL中插入datetime方法
2019/01/29 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
通过C++学习Python
2015/01/20 Python
使用Python写个小监控
2016/01/27 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
工程招投标邀请书
2014/01/30 职场文书
高考1977观后感
2015/06/04 职场文书
你会写请假条吗?
2019/06/26 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS