理解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 parseInt 大改造
Sep 27 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 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
WHOIS类的修改版
2006/10/09 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python实现双色球随机选号
2020/01/01 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python输出数学符号实例
2020/05/11 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
什么是Rollback Segment
2013/04/22 面试题
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
百度吧主申请感言
2014/01/12 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
物业接待员岗位职责
2015/04/15 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
投资申请报告
2015/05/19 职场文书