每一个JavaScript对象都和另一个对象相关联,相关联的这个对象就是我们所说的“原型”。每一个对象都会从原型继承属性和方法。有一个特殊的对象没有原型,就是Object,还有一种通过Object.create()创建的对象,如果传入的第一个参数为null,也没有原型。在之后的图示中会进行说明。

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

 function Student(name){
this.name = name;
this.hello = function(){
alert(`Hello,${this.name}`);
}
}
这个函数包含一个属性name和一个方法hello。
在JavaScript中,可以通过new关键字来调用Student函数(不写new就是一个普通函数,写new就是一个构造函数),并且返回一个原型指向Student.prototype的对象,如下所示:
1 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);
}
}

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

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

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

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

简单说一说对JavaScript原型链的理解的更多相关文章

  1. JavaScript原型链的理解

    JavaScript中的每一个对象都有prototype属性,我们称之为原型,而原型的值也是一个对象,因此它有自己的原型,这样就串联起来形成了一条原型链.原型链的链头是object,它的prototy ...

  2. JavaScript学习总结(十七)——Javascript原型链的原理

    一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...

  3. 明白JavaScript原型链和JavaScrip继承

    原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...

  4. 资料--JavaScript原型链

    JavaScript原型链 原文出处:https://www.cnblogs.com/chengzp/p/prototype.html 目录 创建对象有几种方法 原型.构造函数.实例.原型链 inst ...

  5. javascript原型链中 this 的指向

    为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...

  6. 深入理解javascript原型链

    在javascript中原型和原型链是一个很神奇的东西,对于大多数人也是最难理解的一部分,掌握原型和原型链的本质是javascript进阶的重要一环.今天我分享一下我对javascript原型和原型链 ...

  7. Javascript 原型链资料收集

    Javascript 原型链资料收集 先收集,后理解. 理解JavaScript的原型链和继承 https://blog.oyanglul.us/javascript/understand-proto ...

  8. JavaScript原型链:prototype与__proto__

    title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...

  9. javascript原型与原型链个人理解

    想了解原型和原型链,我觉得首先我们得知道javascript里有一个Object 与 Function,它俩都是构造函数,当然函数也是一个对象.我们打印Object 与 Function看一下, co ...

随机推荐

  1. 自己玩虚拟机上mongo备份

    rs.initiate({_id:"shard1RS",members:[{_id:1,host:"127.0.0.1:27018",priority:2},{ ...

  2. Mysql 删除数据表重复行

    准备示例数据 以下sql创建表,并将示例数据插入到用于演示的contacts表中. CREATE TABLE contacts ( id INT PRIMARY KEY AUTO_INCREMENT, ...

  3. 由ArrayList来深入理解Java中的fail-fast机制

    1. fail-fast简介“快速失败”也就是fail-fast,它是Java集合的一种错误检测机制.某个线程在对collection进行迭代时,不允许其他线程对该collection进行结构上的修改 ...

  4. Hql语句转化为sql语句中文乱码问题

    刚刚学习Hql语句就出现这一的问题,百度半天终于解决了,总结一下解决的方案: 出现中文乱码最可能的原因是hibernate配置文件配置的问题 1.检查url路径是否指定字符集为UTF-8 <pr ...

  5. javascript图片预加载

    图片预加载是非常常见的一个功能,PC和移动端都会用到,尤其是在移动端,只要涉及到较多图片的加载都会用到该技术.下面是移动端用到的,引入了zepto. <!DOCTYPE html> < ...

  6. BestCoder Round #92

    这里是逢比赛必挂的智障选手ysf…… 不知道是因为自己菜还是心态不好……也许是后者吧,毕竟每次打比赛的时候都会很着急.lrd说我打比赛的功利性太强,想想确实是这样. 昨天打完之后自觉身败名裂没敢写出来 ...

  7. 01_NIO基本概念

    [NIO的几个概念] Buffer(缓冲区) Channel(通道,管道) Selector(选择器,多路复用器) [Buffer] Buffer是一个对象,它包括一些要写入或者要读取的数据.在NIO ...

  8. 云栖神侠传—阿里云数据库专家德歌告诉你PostgreSQL的那些事

    什么是云栖神侠传: 云栖社区(http://yq.aliyun.com/?utm_source=yqdg),是阿里云面向开发者群体的开放型社区.在云栖社区中,活跃着许多阿里技术大牛,他们在自己的技术领 ...

  9. C# 获取窗口句柄并且关闭应用程序

    原文:http://www.cnblogs.com/oraclejava/articles/1549025.html public class User32API { private static H ...

  10. 【Udacity】朴素贝叶斯

    机器学习就像酿制葡萄酒--好的葡萄(数据)+好的酿酒方法(机器学习算法) 监督分类 supervised classification Features -->Labels 保留10%的数据作为 ...