https://segmentfault.com/a/1190000005824449

记得当年初试前端的时候,学习JavaScript过程中,原型问题一直让我疑惑许久,那时候捧着那本著名的红皮书,看到有关原型的讲解时,总是心存疑虑。

当在JavaScript世界中走过不少旅程之后,再次萌发起研究这部分知识的欲望,翻阅了不少书籍和资料,才搞懂__proto__和prototype的概念。

故以作此笔记,日后忘了可以回来看看。

如果你看的过程中觉得理解有些困难,把例子在代码中跑一跑,亲手试一试也许能解决不少疑惑。

一切皆为对象

殊不知,JavaScript的世界中的对象,追根溯源来自于一个 null

「一切皆为对象」,这句着实是一手好营销,易记,易上口,印象深刻。

万物初生时,一个null对象,凭空而生,接着Object、Function学着null的模样塑造了自己,并且它们彼此之间喜结连理,提供了prototype和constructor,一个给子孙提供了基因,一个则制造万千子子孙孙。

在JavaScript中,null也是作为一个对象存在,基于它继承的子子孙孙,当属对象。 
乍一看,null像是上帝,而Object和Function犹如JavaScript世界中的亚当与夏娃。

原型指针 proto

 

在JavaScript中,每个对象都拥有一个原型对象,而指向该原型对象的内部指针则是__proto__,通过它可以从中继承原型对象的属性,原型是JavaScript中的基因链接,有了这个,才能知道这个对象的祖祖辈辈。从对象中的__proto__可以访问到他所继承的原型对象。

var a = new Array();

a.__proto__ === Array.prototype // true

上面代码中,创建了一个Array的实例a,该实例的原型指向了Array.prototype。

Array.prototype本身也是一个对象,也有继承的原型:

a.__proto__.__proto__ === Object.prototype  // true// 等同于 Array.prototype.__proto__ === Object.prototype

这就说了明了,Array本身也是继承自Object的,那么Object的原型指向的是谁呢?

a.__proto__.__proto__.__proto__ === null  // true// 等同于 Object.prototype.__proto__ === null

 
所以说,JavaScript中的对象,追根溯源都是来自一个null对象。佛曰:万物皆空,善哉善哉。

除了使用.__proto__方式访问对象的原型,还可以通过Object.getPrototypeOf方法来获取对象的原型,以及通过Object.setPrototypeOf方法来重写对象的原型 。

值得注意的是,按照语言标准,__proto__属性只有浏览器才需要部署,其他环境可以没有这个属性,而且前后的两根下划线,表示它本质是一个内部属性,不应该对使用者暴露。因此,应该尽量少用这个属性,而是用Object.getPrototypeof和Object.setPrototypeOf,进行原型对象的读写操作。

这里用__proto__属性来描述对象中的原型,是因为这样来得更加形象,且容易理解。

原型对象 prototype

 

函数作为JavaScript中的一等公民,它既是函数又是对象,函数的原型指向的是Function.prototype

var Foo = function() {}

Foo.__proto__ === Function.prototype // true

函数实例除了拥有__proto__属性之外,还拥有prototype属性。

通过该函数构造的新的实例对象,其原型指针__proto__会指向该函数的prototype属性。

var a = new Foo();

a.__proto__ === Foo.prototype; // true

而函数的prototype属性,本身是一个由Object构造的实例对象。

Foo.prototype.__proto__ === Object.prototype; // true

prototype属性很特殊,它还有一个隐式的constructor,指向了构造函数本身。

Foo.prototype.constructor === Foo; // true

a.constructor === Foo; // true

a.constructor === Foo.prototype.constructor; // true

原型链

概念

原型链作为实现继承的主要方法,其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

每个构造函数都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型对象的内部指针(proto)。

那么,假如我们让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。

如此层层递进,就构造了实例与原型的链条,这就是原型链的基本概念。

意义

“原型链”的作用在于,当读取对象的某个属性时,JavaScript引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找。

以此类推,如果直到最顶层的Object.prototype还是找不到,则返回undefine

亲子鉴定

在JavaScript中,也存在鉴定亲子之间DNA关系的方法:

instanceof

运算符返回一个布尔值,表示一个对象是否由某个构造函数创建。

Object.isPrototypeOf()

只要某个对象处在原型链上,isProtypeOf都返回true

var Bar = function() {}

var b = new Bar();

b instanceof Bar // true

Bar.prototype.isPrototypeOf(b) // trueObject.prototype.isPrototypeOf(Bar) // true

要注意,实例b的原型是Bar.prototype而不是Bar

一张历史悠久的图

这是一张描述了Object、Function以及一个函数实例Foo他们之间原型之间联系。如果理解了上面的概念,这张图是不难读懂。

从上图中,能看到一个有趣的地方。

Function.prototype.proto 指向了 Object.prototype,这说明Function.prototype 是一个 Object实例,那么应当是先有的Object再有Function。

但是Object.prototype.constructor.proto 又指向了 Function.prototype。这样看来,没有Function,Object也不能创建实例。

这就产生了一种类「先有鸡还是先有蛋」的经典问题,到底是先有的Object还是先有的Function呢?

这么哲学向的问题,留给你思考了。

js中的原型哲学思想的更多相关文章

  1. js中的原型、继承的一些想法

    最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享 ...

  2. 谈谈JS中的原型

    不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O( ...

  3. 谈一谈原生JS中的【面向对象思想】

           [重点提前说:面向对象的思想很重要!]         最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...

  4. js中的原型prototype

    var arr1 = new Array(12,34,98,43,38,79,56,1); arr1.sum=function (){ var result = 0; for(var i=0; i&l ...

  5. JS中的原型继承机制

    转载 http://blog.csdn.net/niuyongjie/article/details/4810835 在学习JS的面向对象过程中,一直对constructor与prototype感到很 ...

  6. js中的原型以及原型链

    在js中原型是每个构造函数的属性: 这个算 js 核心概念的一部分 var f1 = new Foo(); 对象 f1 的构造函数就是 Foo , f1的原型 __proto__ 就指向构造函数 Fo ...

  7. 理解js中的原型链

    对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性. 关于原型 在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承 ...

  8. js中的原型

    一:原型属性 函数本身也是一个包含了方法和属性的对象. 定义一个函数foo(),访问其他对象一样访问该函数的属性: function foo(a, b) { return a * b; } foo.l ...

  9. JS中的原型对象与构造器

    在Javascript中:原型对象是属于构造函数的,不属于实例:实例只能共享原型对象中的属性和方法(当然也可以有自己的属性和方法,或者覆盖原型中同名的属性和方法):构造器constructor属于原型 ...

随机推荐

  1. C#中Image类与byte[]之间的转换

    //将image转化为二进制 public byte[] GetByteImage(Image img) { byte[] bt = null; if (!img.Equals(null)) { us ...

  2. 一款新型的EASY饼图数据统计Jquery插件

    http://www.oschina.net/code/snippet_197014_12865   http://www.cnblogs.com/ada-zheng/p/3760947.html - ...

  3. JNI接口的使用(简单版)

    详见 http://b6ec263c.wiz03.com/share/s/2SX2oY0nX4f32CY5ax1bapaL2Qtc5q0tIQjG2yfwaU1MX4Ye

  4. CodeForces 77C Beavermuncher-0xFF (树形dp)

    不错的树形dp.一个结点能走多次,树形的最大特点是到达后继的路径是唯一的,那个如果一个结点无法往子结点走,那么子结点就不用考虑了. 有的结点不能走完它的子结点,而有的可能走完他的子节点以后还会剩下一些 ...

  5. Python XML 解析

    什么是 XML? XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. XML 是一套定义语义标记的规则,这些标记将文档分成许多部件并 ...

  6. 2018.4.9 Ubuntu install kreogist-mu

    先下载kreogist m文件 然后在下载哪里右键点击打开终端 输入sudo dpkg -i + 文件名 输入密码 下一步会显示 未安装未安装软件包 libmpv1. jiexialai要处理 sud ...

  7. vue入坑教程(二)在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

  8. 使用struts2实现文件上传与下载功能

    这个问题做了两天,在网上找了很多例子,但是还有一些功能没有实现,暂时先把代码贴出来,以后在做这方面的功能时在修改 文件上传: 一开始我在网上找到基于servlet+jsp环境写的文件上传,但是在将页面 ...

  9. Linux运维笔记--第四部

    第四部 3. Linux扩展正则表达式实战 扩展的正则表达式:ERE(主要用于egrep或grep  -E) +      重复一个或一个以上前面的字符. (*是0或多个) ?     重复0个或一个 ...

  10. 吐槽在cocos2dx游戏接入腾讯信鸽的坑

    腾讯信鸽是用来在后台推送消息给移动应用客户端使用,接入方法很简单,在信鸽官网注册个账号 http://xg.qq.com/xg,然后注册一个应用,在后台页面获得ACCESS ID, ACCESS KE ...