JavaScript是如何面向对象的

一、引言

在16年的10月份，在校内双选会找前端实习的时候，hr问了一个问题：JavaScript的面向对象理解吗？我张口就说“JavaScript是基于原型的！”。然后就没什么好说的了，hr可能不知道原型，我也解释不了，因为我也就知道这一点而已，至于JavaScript到底面不面向对象，如何基于原型的，我都不太清楚。最近又开始找工作了，在掘金看到面试题就赶快看一下，可是一些代码却使我更加的困惑了，决定深入认真地学习一下JavaScipt面向对象的知识，花了几天的时间看了MDN上的Javacript对象相关的内容仍存疑惑，于是求助于那本有名的书：《You-Dont-Know-JS》的一章 “this & Object Prototypes”链接在最下面（Github上的英文版），我的疑惑也得到了解答，这个过程也是有点痛并快乐着的，写下这篇博客与大家分享一下自己的收获。

二、JavaScript的对象

为了能够清楚的解释这一切，我先从对象讲起。从其他面向对象语言（如Java）而来的人可能认为在JS里的对象也是由类来实例化出来的，并且是由属性和方法组成的。

实际上在JS里并不是如你所想（我开始是这么想的）那样，对象或直接称为object，实际上只是一些映射对的集合，像Map，字典等概念。JS里有大概7种类型（加上Symbol），数字、字符串、null、undefined、布尔、Symbol、对象。除对象以外的其他类型属于原始类型，就是说它们比较单纯，包含的东西比较少，基本上就是字面量所表示的那些（像C语言中的一些类型，就是占那么多空间，没有其他的东西）。object基本上是一些键值对的集合，属于引用类型，即是有一个名字去指向它来供别人使用的，就好像比较重的东西你拿不动，而只是拿了张记录东西所在地的纸条。所以当A对象里嵌套了B对象，仅表示A里面有一个引用指向了B，并不是真正把B包含在A里面，虽然看起来是这样（尤其是从对象的字面量上来看），所以才会有所谓的深拷贝与浅拷贝。

有句话叫“JavaScript里一切皆对象”，是因为在很多情况下原始类型会被自动的转为对象，而函数实际上也是对象，这样这句话看起来就很有道理了。

说明对象的本质是为了正确地认识对象，因为这关系到后面的理解。

三、原型也是对象

JS的世界里有一些对象叫原型，如果你有所怀疑，你可以在chrome终端下打出以下代码来验证它的存在：

console.log(Object.prototype); //你可以理解prototype是指向原型的引用

和 console.log(typeof Object.prototype);//object

在看看：

console.log(typeof {}.prototype);//undefined

为什么空对象{}没有prototype对象呢，事实上prototype只是函数对象的一个属性，而Array、Object却是都是函数，而不是对象或者类（class）:

console.log(typeof Object);//function

四、函数，特殊的对象

为什么JS里没有函数这样一种类型，而typeof输出的却是function，即JS把函数也看成了一种类型，这揭示了函数作为一种特殊对象的地位的超然性。

function foo(){console.log('inner foo');};

console.log(typeof foo);//function

console.log(typeof []);//object

与数组这种内建对象相比，说明了函数的地位非比寻常，实际上函数在JS中地位是一等的（或者说大家是平等的），函数可以在参数中传递也说明了这一点，这使得JS具备了一些属于函数式语言的特性。

函数与普通对象的地位相等，使得函数中的"this"关键字极具迷惑性，可能很多人都知道了，this指向的是函数在运行时的上下文，既不是函数对象本身，也不是函数声明时所在作用域，具体是如何指向某个对象的就不在本文的讨论范畴了，感兴趣的可以去看《You-Dont-Know-JS》。

查看如下代码的输出结果：

console.log(foo.prototype);

可以看出foo.prototype是一个大概有两个属性的对象：constructor和__proto__。

console.log(foo.prototype.constructor === foo);//true

可以看出一个函数的原型的constructor属性指向的是函数本身，你可以换成内建的一些函数：Object、String、Number，都是这样的。

在观察foo.prototype的__proto__之前，先考察下面看起来很面向对象的几行代码：

var fooObj = new foo();//inner foo

console.log(fooObj);//看得到，fooObj也有一个__proto__的属性，那么__proto__是什么呢，

console.log(fooObj.__proto__ === foo.prototype);//true

你知道了，对象的__proto__会指向其“构造函数”的prototype（先称之为构造函数）。

new 的作用实际上是，新创建一个对象，在这个对象上调用new关键字后面的函数（this指向此对象，虽然这里没有用到），并将对象的__proto__指向了函数的原型，返回这个对象！

为了便于理解以上的内容，我画了这张图：

 

用绿色表明了重点：foo.prototype，同时函数声明可以这样声明：

var bar = new Function("console.log('inner bar');");

猜测console.log(foo.__proto__ === Function.prototype);输出为true；