prototype 和 proto 的区别

学习Vue源码时看到一篇文章写得很好，记录一下

原文链接：链接

本文主要讲三个问题

prototype 和 proto
function 和 object
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

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

没错，这里的__proto__ 就指向了 Array[0]

tips：firefox、chrome等浏览器把对象内部属性 [[Prototype]]用 __proto__ 的形式暴露了出来.(老版本的IE并不支持 __proto__ ,IE11中已经加上了__proto__ 属性)

我们在看这个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) }

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 的使用说明 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属性。

所以到最后，我们总结一下。

在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属性所对应的对象啊