JavaScript 原型中的哲学思想

sugarmo 发布于2019-08-19 18:38 / 2344人阅读

摘要：而作为构造函数，需要有个属性用来作为以该构造函数创造的实例的继承。

欢迎来我的博客阅读：「JavaScript 原型中的哲学思想」

记得当年初试前端的时候，学习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

PS: a.constructor属性并不属于a（a.hasOwnProperty("constructor") === false），而是读取的a.__proto__.constructor，所以上图用虚线表示a.constructor，方便理解。

原型链

概念：

原型链作为实现继承的主要方法，其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
每个构造函数都有一个原型对象(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) // true
Object.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呢？
这么哲学向的问题，留给你思考了。

我只是感慨：越往JavaScript的深处探索，越觉得这一门语言很哲学。

先有鸡还是先有蛋？

update on 2017/01/05

时隔半年，偶尔翻开这篇文章。
对于这个问题，又有了新的思考。
愿意跟能看到这里的你来分享一下。

我们可以先把 Object.prototype 和 Function.prototype 这两个拎出来看，因为他们本身就是一个实例对象。
为方便理解，我们改一下名字，避免和 Object 和 Function 的强关联，分别叫：Op 和 Fp

那么就有这样的原型链存在了

我再描述一下上面的原型链，先有 null , 再有了 Op , 然后再有了 Fp ，然后以 Fp 为原型的两个构造函数 (Object, Function) 出现了。
而作为构造函数，需要有个 prototype 属性用来作为以该构造函数创造的实例的继承。
所以Object.prototype = Op, Function.prototype = Fp。

专线服务超融合服务器 javascript原型 javascript编程思想 javascript中的 javaScript中的this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79804.html

JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
《javascript高级程序设计》第六章读书笔记之 javascript继承的6种方法

摘要：继承的是超类型中构造函数中的属性，如上继承了属性，但没有继承原型中的方法。上述造成的结果是子类型实例中有两组超类型的构造函数中定义的属性，一组在子类型的实例中，一组在子类型实例的原型中。 ECMAScript只支持实现继承，主要依靠原型链来实现。与实现继承对应的是接口继承，由于script中函数没有签名，所以无法实现接口继承。一、原型链基本思想：利用原型让一个引用类型继承另一个引用...

孙吉亮 2019-08-23 14:38 评论0 收藏0
理解JavaScript的核心知识点：原型

摘要：首先，需要来理清一些基础的计算机编程概念编程哲学与设计模式计算机编程理念源自于对现实抽象的哲学思考，面向对象编程是其一种思维方式，与它并驾齐驱的是另外两种思路过程式和函数式编程。 JavaScript 中的原型机制一直以来都被众多开发者（包括本人）低估甚至忽视了，这是因为绝大多数人没有想要深刻理解这个机制的内涵，以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 J...

iKcamp 2019-08-23 18:34 评论0 收藏0
JS对象(1)重新认识面向对象

摘要：对象重新认识面向对象面向对象从设计模式上看，对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外，允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象从设计模式上看，对象是...

superw 2019-08-21 11:17 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0