为什么都说js 里面任何对象最终都继承了Object对象

390 阅读3分钟

今天闲来无事,看见几行小字。 又说所有对象,继承终是Obj。 —— 强行押韵一波

这首诗的意思就是说的我今天没有什么事情,然后无意中又在网上看到了“任何对象都是从Object对象继承而来的”这句话。一时兴起,便去验证这句话。ps. 我好像从来在原型链上面都没有走到过Object对象,我今天一定要把它点出来!

interesting

首先我们探究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了这么多东西,我先去厕所吐了,兄弟们点个赞再走