每一个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. 用 Redis Desktop Manager 远程连接 redis 数据库。

    环境: 本机OS:window 10(本机没有安装redis) redis 服务器:centos 7 使用 Redis Desktop Manager 工具远程连接 redis. Redis Desk ...

  2. Error:Execution failed for task ':xutils:mergeDebugAndroidTestResources'. > No slave process to proc

    Error:Execution failed for task ':xutils:mergeDebugAndroidTestResources'. > No slave process to p ...

  3. [转]纯js导出json到excel(支持chrome)

    转自:http://blog.csdn.net/educast/article/details/52775559 function JSONToExcelConvertor(JSONData, Fil ...

  4. CSS3及JS简单实现选项卡效果(适配手机端和pc端)

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  5. css伪元素详解

    css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...

  6. OpenLayers中的图层(转载)

    作者:田念明出处:http://www.cnblogs.com/nianming/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法 ...

  7. Python学习系列----第三章 控制流

    在python中有三种控制流语句,分别是: if.for.while. 2.1 if 语句 if 语句用来检验一个条件,如果条件为真,我们运行一块语句(称为 if-块),否 则我们处理另外一块语句(称 ...

  8. Laravel Query Builder 复杂查询案例:子查询实现分区查询 partition by

    案例 案例:Laravel 在文章列表中附带上前10条评论?,在获取文章列表时同时把每个文章的前10条评论一同查询出来. 这是典型分区查询案例,需要根据 comments 表中的 post_id 字段 ...

  9. 使用Powershell 管理 Windows 2012 hyper-v复制

    HyperV复制相关命令 Suspend-VMReplication Suspends replication of a virtual machine. 暂停复制虚拟机. Resume-VMRepl ...

  10. cocos2d-x 的api

    最近,在学习cocos2d-x,发现没有一个很好的api手册.因为起初我们学习一些例子之类的内容,会很容易使用,也很容易明白,但是当我们需要用新的api的时候,第一就会疑问有没有这个api,比如:你使 ...