今天闲来无事,看见几行小字。
又说所有对象,继承终是Obj。
—— 强行押韵一波
这首诗的意思就是说的我今天没有什么事情,然后无意中又在网上看到了“任何对象都是从Object对象继承而来的”这句话。一时兴起,便去验证这句话。ps. 我好像从来在原型链上面都没有走到过Object对象,我今天一定要把它点出来!
首先我们探究ES5、ES6里面的__proto__、prototype
首先我们从《JavaScript高级程序(第三版)》里面找到这张图
此图片告诉了我们2个道理:
1、一个实例的 [[Prototype]] (__proto__属性),指向它构造函数的原型对象
这句话听起来有点儿复杂,把它简化一下
一个实例的__proto__属性,指向它的原型对象
2、一个原型对象的constructor属性又指回了这个对象
下面我们来console一下ES5构造函数和ES6类的__proto__、prototype
1、es5 和 es6 这两个实例的__proto__ 指向了它们构造函数的原型对象(简称指向了它们的原型对象)
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
2、es5 和 es6 这两个实例的constructor 指向了它们的构造函数
//这是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
3、构造函数ES5Fun 和 ES6Class 的原型对象的 constructor 又指回了它们本身
//这是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
所以推导出
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
下面我要开始开车了
准备好了吗?嘟嘟,嘟嘟。嘟嘟,嘟嘟。
ES5Fun 和 ES6Class 继续再往它们的构造函数和原型对象上面延伸看能得到什么
首先打印出Function对象本身,看看是什么便于后面参考
//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
总结
1、Function.constructor 指向它本身,不指向它的构造函数(或者说Function的构造函数就是它本身)这个我也不太清楚
2、Function.__proto__.__proto__.constructor === Object
console了这么多东西,我先去厕所吐了,兄弟们点个赞再走
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。