__ proto __ 和 prototype的区别

__ proto __ 和 prototype的区别

Introduce

发现自己基础不扎实的时候，开始重温之前看过的关于js原型链的文章，下面附网址

JavaScript. The Core.

在这个过程中，发现一直在讲着__ proto __ ，一开始也没认真对待，就把他当做prototype对待，后来越看越不对劲。然后就去搜集了相关资料，特别展示如下。

Details

1. 就像在css里，万物都是盒子（盒模型），在js里面，万物都是对象。object是对象，function（函数）也是对象，prototype（原型）也是对象，

   对象就是一个包含很多属性，还有唯一一个原型的对象， 这些属性可能是对象啊，也有可能是别的任何值（我觉得），举个例子

   var muyi = {
       name : muyi,
       age : 22,
       smell: function() {
           console.log("smell")
       }
   }
   

   所以万物都会有对象共同的属性，比如，他们都有属性 __ proto __ ,也就是所谓的隐式原型，

   一个对象的隐式原型指向构造该对象的构造函数的原型

   一个对象的隐式原型指向构造该对象的构造函数的原型

   一个对象的隐式原型指向构造该对象的构造函数的原型

   重要的话说三遍说三遍说三遍！！

   这就保证了实例对象可以访问在构造函数原型中定义的属性和方法。这个时候问题就出来了，那prototype呢？

2. function除了作为对象有__ proto __这个属性之外，作为函数他还与单独的特有属性。prototype，这个属性是一个指针，指向包含所有同样继承自这个原型的函数的原型，有点绕。。。好吧，很绕，但是很绕并不影响这个原型对象包含所有函数（实例）共享的属性和方法。原型对象也有一个属性，叫做construct，指向构造函数

Example

举栗子时间到啦

var a = function() {}
a.__proto__
//ƒ () { [native code] }
var b = {}
b.__proto__
//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

你可以很轻松的发现，他们的原型并不一样，这是为什么呢？

回头向上看，一个对象的隐式原型指向构造该对象的构造函数的原型，对象的构造函数和函数的构造函数是不一样的。你可以继续尝试

a.__proto__.__proto__
//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

你会发现， 构造a函数的原型对象的隐式原型对象和普通对象的隐式原型对象相同了，这里真的非常的绕。

这里在说说函数

a.__proto__
//ƒ () { [native code] }
a.prototype
//{constructor: ƒ}
a.__proto__.__proto__
//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
a.prototype.__proto__
//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
a.prototype.protptype
//undefined

a的隐式构造函数和构造函数是不同的，但是他们一个隐式原型对象的隐式原型对象和原型对象的隐式原型对象的结果是相同的。因为函数的隐式原型对象的原型就是个普通对象，所以他的隐式原型对象就喝普通对象一样。普通对象自然没有prototype这个函数独有的原型啦。所以就是undefined

我自己都有点绕。。。emmm不会的的直接私聊我吧。 邮箱地址在下面，我一定在我绕晕之前给你讲通。如果真的有人看的话。

review

1. 在前端的js里，万物都是对象，对象都有proto这个属性，指向构造该对象的构造函数的原型
2. 只有函数才有prototype这个属性，这个属性是一个指针，指向包含所有同样继承自这个原型的函数的原型

writer&contact

{
  "name":"Jontyy" , 
  "email": " [email protected]"
}