首先js是一种面对对象的语言,虽然大多数时候是以面对过程的形式展现出来。先来看一段代码:

function Base() {
this.name = 'tarol';
}
function Sub() {
this.age = 18;
}
var b = new Base;
Sub.prototype = b;
var s = new Sub;
console.log(s.name); //'tarol'

  结果相信都知道,但是实现的原理却不明,于是逐行解析:

Sub.prototype = b;

  prototype是函数对象(函数也是对象)的特有属性,普通对象是不存在这个属性的,该属性默认为{}。这个属性的作用就是,将这个属性赋予给、使用此函数作为构造函数进行实例化的对象、作为该对象[[Propertype]]的内部属性。所谓内部属性就是通过js不能访问的属性,庆幸的是现代浏览器开放了这个属性的访问,一般属性名为__proto__。所以:

var s = new Sub;

  这一段(也可以说每个new操作)可以展开:

var s = {};
s.__proto__ = Sub.prototype;
Sub.call(s);

  可见,对象实例化后,与构造函数的耦合在于前者的__proto__属性和后者的prototype属性为同一个对象的引用。

  然后__proto__这个内部属性是用来做什么的呢,是用来实现js中的“继承”的。这个“继承”之所以打引号是用来区别c++和java中的类式继承的思想,这种方式称之为原型继承。

  原型继承的原理是:每个对象都保有一个指向其他对象的引用(也就是__proto__即原型),这条引用最终指向null(null也是对象),当访问这个对象的任一属性时,如果在本对象中没有找到,则向其__proto__指向的对象中寻找,直到原型链的尽头null。需要注意的是:原型链中的所有元素都是实例化的对象。

  现在回到上面的代码,当访问对象s的属性name时,在s中没有找到,于是跑到s的__proto__指向的Base的实例对象中寻找,找到了name为'tarol'。

  但如果访问s的属性gender时,在s和s.__proto__中都没有找到,于是继续向s.__proto__.__proto__中寻找。由s.__proto__ === new Base,可知s.__proto__.__proto__ === Base.prototype(即(new Constructor()).__proto__ === Constructor.prototype)。上面说到,prototype默认是{},于是继续在Base.prototype.__proto__中找,即(new Object()).__proto__ === Object.prototype。如果没有添加一些自定义的属性,Object.prototype同样是{},这样看来,似乎要陷入无限的循环当中,但其实到这里原型链就走向了尽头,因为浏览器会定义Object.prototype.__proto__ = null。用下面的流程梳理下,-->代表原型链上的传递,===代表对象不同引用间的替换。

  s.gender --> s.__proto__.gender === Sub.prototype.gender === b.gender --> b.__proto__.gender === Base.prototype.gender === (new Object()).gender --> (new Object()).__proto__.gender === Object.prototype.gender --> Object.prototype.__proto__ === null

  Object.prototype.__proto__也是所有对象原型链的尽头,包括Function(函数的构造函数本身也是对象)、Date(普通对象)、Math(单体内置对象),因为Function.prototype是默认的{},即进入上面流程中(new Object()).gender这一阶段。

  最后举个栗子:

function Class(){}
var a = new Class;
Class.prototype = new Class;
var b = new Class;
console.log(b.__proto__.__proto__ === a.__proto__);

  其中最让人困惑的估计是

Class.prototype = new Class;

  如果用类式继承来理解,会误以为这句代码会陷入死循环调用当中,但注意上面红字标明那句话:原型链中的所有元素都是实例化的对象。也就是,这里只是将一个对象插入Class对象的原型链最前端(除对象本身外),至于这个对象是new Class还是new Glass(见第一段红字,这句代码修改了构造函数的引用,使__proto__和prototype之间的耦合解除了,可以说这个对象和构造函数“分家”了),都不影响调用的过程。所以,这句代码的目的是修改了Class构造函数,让其实例化的对象的原型链长度+1。

  写的有些凌乱,如果过段时间我看不懂了再回来改一改。

  参考:

  《理解JavaScript面向对象的思路》By 温神

  《关于__proto__和prototype的一些理解》By TonyCoolZhu

  《JavaScript高级程序设计》By Nicholas C.Zakas

关于javascript原型链的个人理解的更多相关文章

  1. javascript原型链简单的理解

    在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[prototype],我们通常称之为原型.原型的值可以是一个对象,也可以是null.当然也可能是一个值,如果它的 ...

  2. Javascript 原型链资料收集

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

  3. 资料--JavaScript原型链

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

  4. JavaScript原型链及其污染

    JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...

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

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

  6. javascript原型链中 this 的指向

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

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

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

  8. JavaScript原型链:prototype与__proto__

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

  9. 再次理解JavaScript原型链和匿名函数

    <!--------------------------------------------- 1.演示匿名加载 2.js单进程执行流 3.原型链理解 a.__proto__:属性每个对象都有 ...

随机推荐

  1. 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  2. Oracle RAC 实验环境RMAN备份v1.01

    Oracle RAC 实验环境RMAN备份v1.01 环境:RHEL 6.5 + Oracle GI 11.2.0.4 + RAC 11.2.0.4 (2 nodes) 需求:制定RAMN备份策略 版 ...

  3. NYOJ--517--最小公倍数(大数打表)

    最小公倍数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致. 但也并非纯粹的偶然:60是个优秀的数字 ...

  4. 原理Lambda表达式

    http://www.kingreatwill.com/ (1)源起 .net的设计者发现在使用匿名方法时, 仍旧有一些多余的字母或单词的编码工作 比如delegate关键字 于是进一步简化了匿名方法 ...

  5. [Noi2008]假面舞会

    考试的时候果断放弃,cout<<"-1 -1"骗10分hhh... 这也是图上问题.注意题目意思: ①如果有多个点指向同一个点,那么他们属于同一类别. ②一个点看到的所 ...

  6. JavaScript 排序算法(JavaScript sorting algorithms)

    JavaScrip 排序算法(JavaScript Sorting Algorithms) 基础构造函数 以下几种排序算法做为方法放在构造函数里. function ArrayList () { va ...

  7. 使用 GitHub+Hexo 搭建个人博客

    1.安装Git和Hexo 安装Hexo前,需要安装Node.js和Git: Node.js 下载地址 我选择的是v6.11.2 LTS Git 下载地址 我下载的是Git-2.12.2.2-64-bi ...

  8. Markdown学习笔记(一) 基本的Markdown标签

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人用它写 ...

  9. Qt支持中文显示

    Qt支持中文显示<1>.在代码中添加以下代码 QTextCodec* codec = QTextCodec::codecForLocale(); if (codec != NULL) { ...

  10. spotlight 索引重建

    从Mac的App Store 上 自动更新微信之后,发现不能在SpotLight上搜索到了. 想着应该是索引出现了问题. 方法一. 采用如下命令重建索引: sudo mdutil -i off /该命 ...