关于javascript的原型和原型链，看我就够了（二）

温故

建立对象的三种方式

• 经过对象直接量
• 经过new建立对象
• 经过Object.create()

js中对象分为两种

• 函数对象
• 普通对象 仔细观察以下代码

function Foo(name) {
	this.name = name;
}
var foo = new Foo('陌上寒');
console.log(foo)// Foo{name: "陌上寒"}
//---------------
var foo1 = {name:'"陌上寒"'}
//等价于
var foo1 = new Object()
foo1.name = "陌上寒"
复制代码

综合以上，得出结论==>普通对象都是经过函数建立的

prototype

每个函数对象都有一个prototype属性，可是普通对象是没有的；

遗留问题

昨天留下了一些知识点，今天重点讨论

• constructor
• _proto_

知新

constructor构造函数

咱们昨天说建立对象的三种方式，第二种是经过new建立对象，

var  obj = new Object()//建立一个空对象等同于 var obj = {}
console.log(obj.constructor===Object)//true
复制代码

Object就是一个构造函数，是js内置的构造函数,上面的例子中Object就是obj的构造函数，这个例子彷佛不太明显，咱们继续看

function Foo(name){
    this.name = name
}
var foo = new Foo("陌上寒")
console.log(foo.constructor===Foo)//true
复制代码

咱们自定义了一个构造函数Foo，Foo是foo的构造函数,foo的构造函数就是Foo 构造函数与其余函数的惟一区别，就在于调用它们的方式不一样。不过，构造函数毕竟也是函数，不存在定义构造函数的特殊语法。任何函数，只要经过 new 操做符来调用，那它就能够做为构造函数；而任何函数，若是不经过 new 操做符来调用，那它跟普通函数也不会有什么两样。 构造函数在建立时有一个约定，若是是构造函数，那么首字母要大写，普通函数首字母小写

constructor和prototype

constructor和咱们昨天讨论的prototype有什么联系吗？ 观察以下代码的输出

function Foo(name) {
    this.name = name;
}
var foo = new Foo('陌上寒');
console.log(Foo.prototype)
复制代码

经过昨天的讨论咱们得知只有函数对象才存在prototype 输出

Foo.prototype是Foo的原型对象 继续观察

function Foo(name) {
    this.name = name;
}
var foo = new Foo('陌上寒');
 console.log(Foo.prototype.constructor===Foo)//true
复制代码

在默认状况下，全部原型对象都会自动得到一个 constructor（构造函数）属性，这个属性包含一个指向 prototype 属性所在函数的指针。就拿前面的例子来讲，Foo.prototype.constructor 指向 Foo。 咱们得出如下结论 原型对象中的constructor属性，指向该原型对象对应的构造函数 也就是说上面的例子，Foo的原型对象是Foo.prototype,原型对象（Foo.prototype）中有一个constructor属性，这个constructor属性指向原型对象（Foo.prototype）对应的构造函数Foo，用一行代码归纳

console.log(Foo.prototype.constructor===Foo)//true
复制代码

以上就是constructor和prototype的关系 咱们注意到原型对象（Foo.prototype）中还存在一个属性_proto_,这又是什么？它和prototype，constructor又有什么关联呢？

隐式原型(_proto_)

那么__proto__是什么？每一个对象都会在其内部初始化一个属性，就是_proto_。 Firefox、Safari 和 Chrome 的每一个对象上都有这个属性 ，而在其余浏览器中是彻底不可见的（为了确保浏览器兼容性问题，不要直接使用 _proto_ 属性，此处只为演示）。咱们继续看代码

var arr = new Array()
console.log(arr.__proto__===Array.prototype);//true
var str = new String()
console.log(str.__proto__===String.prototype);//true
var Fun = new Function()
console.log(Fun.__proto__===Function.prototype);//true
var bool = new Boolean
console.log(bool.__proto__===Boolean.prototype);//true
var obj = new Object()
console.log(obj.__proto__===Object.prototype);//true
function MyFun() {
	console.log("我是陌上寒");
}
var myfoo = new MyFun()
console.log(myfoo.__proto__===MyFun.prototype);//true
复制代码

再重复一次：Array，String，Function，Boolean，Object都是js内置的构造函数，MyFun是自定义的构造函数 只有函数对象才存在prototype 全部对象(除了Object.prototype)都存在_proto_ 刚才咱们讨论过，普通对象都是经过函数建立的 根据以上咱们得出结论： 普通对象__proto__指向当前函数对象的原型， 你可能发现了，有一个矛盾的地方，全部对象都存在_proto_，只有普通对象的__proto__指向当前函数对象的原型，那函数对象的__proto__指向哪里呢？继续看代码

function MyFun() {
	console.log("我是陌上寒");
}
console.log(Boolean.__proto__);//ƒ () { [native code] }
console.log(Function.__proto__);//ƒ () { [native code] }
console.log(String.__proto__);//ƒ () { [native code] }
console.log(Array.__proto__);//ƒ () { [native code] }
console.log(Object.__proto__);//ƒ () { [native code] }
console.log(MyFun.__proto__);//ƒ () { [native code] }
复制代码

函数对象的__proto__输出的都是ƒ () { [native code] } 函数内部是[native code]，也就是系统编译好的二进制代码函数，咱们不对此作研究 上面说到，全部对象都有_proto_，原型对象也是对象， 咱们得出结论 原型对象也存在_proto_ 结合以上我门又一次得出结论 原型对象的__proto__指向当前函数对象的原型， 仍是继续看代码，便于理解*

console.log('陌上寒'.__proto__===String.prototype);//true
console.log(String.prototype.__proto__===Object.prototype);//true
//等量代换，得出一下结论
console.log('陌上寒'.__proto__.__proto__===Object.prototype);//true
//自此造成了一条链，===>原型链
复制代码

解释一下如上代码， '陌上寒'是字符串类型，'陌上寒'的构造函数是String(), 因此'陌上寒'的__proto__指向String的原型 String()是js的内置构造函数，继承自Object，也就是说Object是顶端，是原型链的顶端，既然是顶端，因此：

console.log(Object.prototype.__proto__)//null
复制代码

Object的原型对象是不存在__proto__的

总结

全部对象（不包括Object.prototype）有__proto__属性，函数对象有prototype属性； 对象由函数生成; 生成对象时，对象的__proto__属性指向当前函数的prototype属性。 Object.prototyp处于原型链的顶端，不存在原型，不继承任何属性，其余原型对象都是普通对象，普通对象都具备原型，全部的内置构造函数（以及大部分自定义构造函数）都具备一个继承自Object.prototype的原型，例如Date.prototype的 属性继承自Object.prototype，所以有new Date()建立的Date对象的属性同时继承自Date.prototype和Object.prototype,这一系列的原型对象就是所谓的原型链。

原文连接

关于javascript的原型和原型链，看我就够了（一）

参考连接 《JavaScript 闯关记》之原型及原型链

JavaScript之原型与原型链

一篇文章带你理解原型和原型链

完全理解JavaScript原型链（一）—__proto__的默认指向

图解prototype、proto和constructor的三角关系

Object.prototype 原型和原型链

三张图搞懂JavaScript的原型对象与原型链