在 JavaScript 中 prototype 和 __proto__ 有什么区别

本文主要讲三个 问题

1. prototype 和 proto
2. function 和 object
3. new 到底发生了什么

prototype 和 proto

首先咱们说下在 JS 中，经常让咱们感到困惑的地方，就是 prototype 和 __proto__ 究竟是干吗的 1. __proto__ 就是 Javascript中 所谓的原型 （这里，咱们仍是拿具体的例子来讲明吧）

function A (name) { // 这里是一个构造函数 thia.name = name } var Aobj = { // 这里是一个 对对象字面量 name: '' } // 咱们分别打印出来这二个对象看看 console.dir(A) console.dir(Aobj)

这里咱们能够很明显的看到 
构造函数的  __proto__ 属性 指向了 function() 对象字面量的 __proto__ 属性 指向了 Object 为何 指向的 是不同的呢？ 思考下: 确实是 不同的， 由于 构造函数自己也是一个 函数， 因此它 的原型 指向 function() 而对象字面量 是一个 对象， 那么他的 原型确定是指向 Object 扩展思考，若是 是一个数组 对象， 那么它的 __proto__ 会指向什么呐？

const arr = [112,22,3333] console.dir(arr)

没错， 这里的  __proto__ 就指向了 Array[0] 总结 ：一个对象的 __proto__ 属性和本身的内部属性[[Prototype]]指向一个相同的值 (一般称这个值为原型) tips：firefox、chrome等浏览器把对象内部属性 [[Prototype]] 用 __proto__ 的形式暴露了出来.(老版本的IE并不支持 __proto__ ,IE11中已经加上了 __proto__ 属性) 2. prototype : 看看上面的 截图，你会发现 只有 构造函数 中 有这个玩意儿， 对的。 prototype 确实 是 在 function 中特有的。 别的对象类型中 都不会有的属性。

咱们在看这个 function 对象属性的 时候就会发现这么一个 prototype 的属性，它的值是 一个 Object 。 点开这个 obj 咱们就会发现啊， 这个 obj 的constructor 属性 指向了 这个构造函数自己。 是否是很神奇，至于为何会是这样子的。 留一个 思考题吧， 为何在 javascript 中，函数对象的 prototype 属性的 constructor 指向是 函数自己？ （在下面的介绍中，咱们会 回答到这个问题）

function 和 object

一样，咱们来先看一个例子。

function B(name) { this.name = name this.getName = function() { console.log(this.name) } var c = 'test' console.log(c) } var b = new B('testb') // test console.log(b) // B: { name: 'testb',getName: function() {} } B('testc') // test

看到上面的 输出 是否是以为又很诧异了。
确实， 为何 在 new 的时候， 构造函数竟然 执行了一次。 一样， 在非严格模式下， 咱们直接执行 构造函数， B('testc') 至关于：

// window.name = 'testc' // window.getName = function() { console.log(this.name) }

思考： 
咱们的函数B既能够直接执行,又能够new一下返回一个对象。function和object究竟是什么关系,new的时候发生了什么?

new 到底发生了什么

仍是上面的 问题， 当咱们执行 var b = new B('testb') 的时候发生了什么？ MDN 上的介绍是这样的说的： 对于 var b = new B('testb')

// javascript 实际上执行的是： var o = new Object() // 生成一个 新的 对象 b 这里 能够约等于 var b = {} o.__proto__ = B.prototype // 这里就是 函数对象中 独有的 prototype 属性。 // 这个独有的 prototype 属性 包含了一个 constructor 属性方法，指向的就是 构造函数， 也就是 这里的 function B(name) {} B.call(o) // tips :这里 就须要注意了，由于不少同窗都搞不清楚 这里是什么意思。 // 因为 call 的使用 将这里this是指向o, 因此就 能够 把什么this.name/getName 强行的绑定到o上。同时，须要注意的一点就是， 这里的 构造函数 执行科一遍， 只不过是 将 this 指向的 属性和方法，都 强行的 给 新建立的 这个 o 对象 绑定了一遍。 var b = o // 把 这个 o 返回给了 b 。 从而完成了 var b = new B('testb') 的过程 // 若是 仍是不明白是 什么意思的话。 咱们来看看 call 是干吗用的 

// 关于 call 的使用说明 var o1 = { name: '111', getName: function() { console.log(this.name) } } var o2 = { name: '222' } o1.getName.call(o2) // 222

因此 这个时候，咱们反过头来 看看  这个 new 的对象都有哪些 属性 和方法。 咱们 能够 来 作一个 小实验，来 证实下，咱们以上所说的东西。

function A (name) { // 这里是一个构造函数 this.name = name } var o = {} o.__proto__ = A.prototype A.call(o) var a = o var b = new A() console.log(a) console.log(b)

果真 和 咱们想象 的如出一辙。 

至于 js 为何要 把 新建 对象的 原型 指向 构造函数的 prototype 属性。 咱们能够这样来理解。 由于 经过 new 方法来建立的 obj 。确定是须要 一个 标记 来找到本身的 构造器函数。 因此 为了让 整个 程序结构看上去 合理。 咱们须要 把 新建 对象的 原型 指向 构造函数的 prototype 属性。

`
因此到最后，咱们 总结一下 。

在 javascript 中 prototype 和 proto 到底有什么区别。

prototype 是 面向 构造函数，来思考，
proto 是 面向 实例化 后 的对象 来思考就对了。

`

最后再 给一个例子， 是一个，咱们常常会在开发中用到的 例子。

var Person = function(){} Person.prototype.sayName = function() { alert('my name is xxx') } Person.prototype.age = 12 var p = new Person() p.sayName() // 当咱们 实例化 以后， 在咱们 去执行 p.sayName() 的 时候，咱们就会去 this 内部去 查找（这里就是 构造函数 Person 内部去找。 但是 没找到啊。只是一个 空函数， 怎么办呢？） // 这个时候 就会沿着 原型链向上追溯， 可是如何 追溯呢？ // 这里就要用到 __proto__ 属性 来做为 追溯的 桥梁。 // 由于 实例化对象的 __proto__ 属性 指向的就是 构造函数的 prototype 属性所对应的 对象啊

最后 终于 愉快的 找到了，本身的对象啦~ 单身狗就可能一直找不到，或者看不懂这篇文章。

好了，以上就是 在 看 vuejs 源码 的时候 关于 new 的 一个 知识 扩展。