今天闲来无事,看见几行小字。
又说全部对象,继承终是Obj。
—— 强行押韵一波
这首诗的意思就是说的我今天没有什么事情,而后无心中又在网上看到了“任何对象都是从Object对象继承而来的”这句话。一时兴起,便去验证这句话。ps. 我好像历来在原型链上面都没有走到过Object对象,我今天必定要把它点出来!javascript
首先咱们从《JavaScript高级程序(第三版)》里面找到这张图java
此图片告诉了咱们2个道理:es6
一、一个实例的 [[Prototype]] (__proto__属性),指向它构造函数的原型对象 这句话听起来有点儿复杂,把它简化一下 一个实例的__proto__属性,指向它的原型对象 二、一个原型对象的constructor属性又指回了这个对象
下面咱们来console一下ES5构造函数和ES6类的__proto__、prototype
一、es5 和 es6 这两个实例的__proto__ 指向了它们构造函数的原型对象(简称指向了它们的原型对象)chrome
function ES5Fun(language){ this.name = "ES6Class类"; this.language = language; } ES5Fun.prototype.favorit = "足球"; let es5 = new ES5Fun("中文"); class ES6Class { constructor(props){ this.className = "ES6Class类" } printfName(){ console.log("如今printName准备开始打印") this.getName(); } getName(){ console.log("此类的类名是:" +this.className) } } let es6 = new ES6Class(); console.log(ES5Fun.prototype) console.log(ES6Class.prototype)
在chrome中的运行结果为:函数
console.log(es5.__proto__ === ES5Fun.prototype) //true console.log(es6.__proto__ === ES6Class.prototype) //true
二、es5 和 es6 这两个实例的constructor 指向了它们的构造函数this
//这是Node 里面运行的结果 console.log(es5.constructor) //[Function: ES5Fun] console.log(es6.constructor) //[Function: ES6Class] console.log(es5.constructor === ES5Fun) //true console.log(es6.constructor === ES6Class) //true
三、构造函数ES5Fun 和 ES6Class 的原型对象的 constructor 又指回了它们自己es5
//这是Node 里面的运行结果 console.log(ES5Fun.prototype.constructor) //[Function: ES5Fun] console.log(ES6Class.prototype.constructor) //[Function: ES6Class] console.log(ES5Fun === ES5Fun.prototype.constructor) //true console.log(ES6Class === ES6Class.prototype.constructor) //true
因此推导出spa
console.log(es5.constructor === ES5Fun.prototype.constructor) //true console.log(es6.constructor === ES6Class.prototype.constructor) //true console.log(es5.constructor === es5.__proto__.constructor) //true console.log(es6.constructor === es6.__proto__.constructor) //true
下面我要开始开车了准备好了吗?嘟嘟,嘟嘟。嘟嘟,嘟嘟。prototype
首先打印出Function对象自己,看看是什么便于后面参考code
//Node 下面的执行结果 console.log(Function) //[Function: Function]
ES6Class的构造函数是 Function对象
//Node 下面的执行结果 console.log(ES6Class.constructor) //[Function: Function] console.log(ES6Class.constructor === Function) //true
ES6Class的__proto__ 固然也就指向它构造函数的原型对象
console.log(ES6Class.__proto__) //[Function] console.log(ES6Class.__proto__ === Function.prototype) //true
那么Function的construct属性呢? 神奇的事情出现了,Function的construct属性居然就等于 ES6Class的constructor属性
console.log(Function.constructor); console.log(Function.constructor === ES6Class.constructor)
缘由是Function的constructor 没有指向它的构造函数而是指向了它自己(或者说Function的构造函数就是它自己)
console.log(Function.constructor === Function) //true console.log(Function.constructor.constructor.constructor.constructor.constructor.constructor.constructor.constructor) //[Function: Function] console.log(Function.constructor === Function.constructor.constructor.constructor.constructor.constructor.constructor) //true
Function的原型对象等于 ES6Class.__proto__
console.log(Function.__proto__) //[Function] console.log(Function.__proto__ === ES6Class.__proto__) //true // 再次证实 Function.constructor 指向它本身 console.log(Function.constructor.__proto__) //[Function] console.log(Function.constructor.constructor.constructor.constructor.__proto__) //[Function]
一个对象的原型对象的constructor 指向这个对象本身,这一点儿Function也不例外
console.log(Function.__proto__.constructor); //[Function: Function] console.log(Function.__proto__.constructor === Function); //true
最后咱们终于找到了原型链的尽头 Function原型对象的原型对象是一个{ }
console.log(Function.__proto__.__proto__) //{} //它再往上的原型对象是一个null console.log(Function.__proto__.__proto__.__proto__) //null //这个原型对象的constructor指向了Object console.log(Function.__proto__.__proto__.constructor) //[Function: Object] console.log(Function.__proto__.__proto__.constructor === Object) //true
一、Function.constructor 指向它自己,不指向它的构造函数(或者说Function的构造函数就是它自己)这个我也不太清楚
二、Function.__proto__.__proto__.constructor === Object
console了这么多东西,我先去厕所吐了,兄弟们点个赞再走