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

温故

我们先回顾一下前两天讨论的内容

创建对象的三种方式

• 通过对象直接量
• 通过new创建对象
• 通过Object.create()

js中对象分为两种

• 函数对象
• 普通对象

原型对象prototype

• 每一个函数对象都有一个prototype属性，但是普通对象是没有的；
• 普通对象都是通过函数创建的

在 ECMAScript 核心所定义的全部属性中，最耐人寻味的就要数 prototype 属性了。对于 ECMAScript 中的引用类型而言，prototype 是保存着它们所有实例方法的真正所在。换句话所说，诸如 toString()和 valuseOf() 等方法实际上都保存在 prototype 名下，只不过是通过各自对象的实例访问罢了。----《JavaScript 高级程序设计》

构造函数constructor

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

原型对象有一个constructor属性，指向该原型对象对应的构造函数
foo 为什么有 constructor 属性？那是因为 foo 是 Foo 的实例。
那 Foo.prototype 为什么有 constructor 属性？？同理， Foo.prototype Foo 的实例。
也就是在 Foo 创建的时候，创建了一个它的实例对象并赋值给它的 prototype

隐式原型_proto_

在Firefox、Safari 和 Chrome 的每个对象上都有这个_proto_,属性 ，而在其他浏览器中是完全不可见的为了确保浏览器兼容性问题，不要直接使用 proto 属性）

// 普通对象的\__proto\__指向当前函数对象的原型，
console.log('陌上寒'.__proto__===String.prototype);//true
//原型对象(也属于普通对象)的__proto__指向当前函数对象的原型
console.log(String.prototype.__proto__===Object.prototype);//true
//内置函数对象的\__proto\__指向的都是ƒ () { [native code] }
console.log(Object.__proto__);//ƒ () { [native code] }
//Object的原型对象的\__proto\__为null
console.log(Object.prototype.__proto__)//null

• 普通对象的_proto_指向当前函数对象的原型，
• 原型对象(也属于普通对象)的_proto_指向当前函数对象的原型
• 内置函数对象的_proto_指向的都是ƒ () { [native code] }
• 所有对象(除了Object.prototype)都存在_proto_
• Object的原型对象的_proto_为null
  好好消化上面的知识点，有助于我么讨论新的内容==>原型链

知新

原型链

• 原型对象prototype
• 构造函数constructor
• 隐式原型_proto_
  通过三者之间的联系，形成了原型链
  继续看一下我门昨天讨论过的代码

console.log('陌上寒'.__proto__===String.prototype);//true
console.log(String.prototype.__proto__===Object.prototype);//true
//等量代换，得出以下结论
console.log('陌上寒'.__proto__.__proto__===Object.prototype);//true

我们刚才说过，普通对象的_proto_指向当前函数对象的原型
我们刚才还说过，普通对象都是通过函数创建的
根据以上两个结论我们分析一下上面的代码
‘陌上寒’是字符串类型，’陌上寒’的构造函数是String(), 所以’陌上寒’的proto指向String的原型
String是js的内置构造函数，内置构造函数继承自Object
String的原型对象String.prototype也是一个普通对象，它的_proto_指向Object的原型，即Object.prototype
所以

console.log('陌上寒'.__proto__.__proto__===Object.prototype);//true

这就是原型链
我们继续品读以下代码

//我们创建一个构造函数Foo（要记得，构造函数命名，首字母要大写）
function Foo() {}
//通过我们自定义的构造函数。通过new操作符，我们实例化出来一个对象foo
const foo = new Foo()
//对象的__proto__指向当前函数对象(foo是同构Foo实例化出来的，所以foo的函数对象是Foo)的原型
console.log(foo.__proto__===Foo.prototype);
//原型对象也存在__proto__，指向该原型对象（Foo.prototype）所对应的函数对象（Object）的原型（好像有点绕，看代码就没那么绕了）
console.log(Foo.prototype.__proto__===Object.prototype);//true
//上面的如果懂了，这行代码就简单了，一个数学的等量代换，就得出了结论
console.log(foo.__proto__.__proto__===Object.prototype);//true
console.log('---我是分割线----');
//我们通过字面量创建了一个对象，等同于 const obj = new Object()
const obj = {}
//obj 是通过内置构造函数Object创建的，所以，obj的__proto__指向它的函数对象（Object）的原型（prototype）即：Object.prototype
console.log(obj.__proto__===Object.prototype);//true
console.log('---我是分割线----');//true
//创建一个对象b
const b = {}
//我们之前说过创建对象有三种方式，我们使用第三种方式创建一个对象b1，对象b1继承自对象b，也就是说，对象b是对象b1的__proto__
const b1 = Object.create(b)
//对象b是对象b1的__proto__
console.log(b1.__proto__===b);//true
//前面已经证实过，b.__proto__==Object.prototype，不再赘述
console.log(b.__proto__==Object.prototype);//true
//等量代换就得出以下结论
console.log(b1.__proto__.__proto__===b.__proto__);//true
console.log(b1.__proto__.__proto__==Object.prototype);//true

我偷了一张图😁，我们看一下

image
啊，好像很简单，我们看一下

//自定义构造函数A（构造函数命名首字母大写）创建方式等同于var A  = new Function()
var A = function(){}//等同于var A  = new Function()
//通过构造函数A，使用new操作符实例化一个对象a（A是a的构造函数，a是A创建出来的）
var a = new A()
//对象的的__proto__指向它所对象函数对象（A）的原型（A.prototype）
console.log(a.__proto__===A.prototype)//true
//A是通过js内置构造函数Function创建出来的,然而
console.log(A.prototype.__proto__===Function.prototype);//false
console.log(A.prototype.__proto__==Object.prototype);//true
console.log(Function.prototype)//ƒ () { [native code] }

Function特例

我们重新修改一下上面的代码

var A  = new Function()
var a = new A()

A.prototype是个函数对象，理论上他的_proto_应该指向 Function.prototype，就是他自己，自己指向自己，没有意义。
js一直强调万物皆对象，函数对象也是对象，给他认个祖宗，指向Object.prototype。Object.prototype._proto_ === null，保证原型链能够正常结束。
事实验证了这样一个道理

console.log(a.__proto__===A.prototype)//true
console.log(A.prototype.__proto__===Function.prototype);//false
console.log(A.prototype.__proto__==Object.prototype);//true
console.log(a.__proto__.__proto__==Object.prototype);//true

A的原型对象的_proto_指向的是Object的原型
再看一张图

image
图片来源

• 原型对象是构造函数的prototype属性，是所有实例化对象共享属性和方法的原型对象。
• 实例化对象通过new构造函数得到，都继承了原型对象的属性和方法。
• 原型对象中有个隐式的constructor，指向了构造函数本身。

再看一张图，细细品味

image
图片地址

总结

今天先讨论到这里，我们一起对今天的内容做一个总结
所有函数对象的\ _proto_ 都指向 Function.prototype，它是一个空函数（Empty function）ƒ () { [native code] }

var obj = {name: '陌上寒'}
var arr = [1,2,3]
var reg = /hello/g
var date = new Date
var err = new Error('exception')
console.log(obj.__proto__ === Object.prototype) // true
console.log(arr.__proto__ === Array.prototype)  // true
console.log(reg.__proto__ === RegExp.prototype) // true
console.log(date.__proto__ === Date.prototype)  // true
console.log(err.__proto__ === Error.prototype)  // true

所有对象的 _proto_ 都指向其构造器的 prototype
原型链
原型链是实现继承的主要方法。

自己是由自己创建的，好像不符合逻辑，但仔细想想，现实世界也有些类似，你是怎么来的，你妈生的，你妈怎么来的，你姥姥生的，……类人猿进化来的，那类人猿从哪来，一直追溯下去……，就是无，（NULL生万物）
正如《道德经》里所说“无，名天地之始”。

function Person(){}
var person1 = new Person();
console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype) //true
console.log(Object.prototype.__proto__) //null

Person.__proto__ === Function.prototype; //true
console.log(Function.prototype)// function(){} (空函数)

var num = new Array()
console.log(num.__proto__ === Array.prototype) // true
console.log( Array.prototype.__proto__ === Object.prototype) // true
console.log(Array.prototype) // [] (空数组)
console.log(Object.prototype.__proto__) //null
console.log(Array.__proto__ === Function.prototype)// true

我们一起连续讨论了那么多，相信你一定对js原型和原型链有了些认识，但是光有认识还是不够的，原型和原型链在实际场景中是怎么发挥作用的呢？我们如何将原型链的相关技能投入到开发中呢？我们明天继续讨论javascript的原型和原型链，不见不散
原文链接
相关文章
关于javascript的原型和原型链，看我就够了（一）
关于javascript的原型和原型链，看我就够了（二）
关于javascript的Object. hasOwnProperty，看我就够了
参考链接
JavaScript之原型与原型链
图解prototype、proto和constructor的三角关系
Function.proto===Function.prototype怎么解释？
最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）

陌上寒个人博客