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

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

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

首先咱们探究ES五、ES6里面的__proto__、prototype

首先咱们从《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中的运行结果为:函数

clipboard.png

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

ES5Fun 和 ES6Class 继续再往它们的构造函数和原型对象上面延伸看能获得什么

首先打印出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了这么多东西,我先去厕所吐了,兄弟们点个赞再走
听说是一条小团团真人,鬼晓得

相关文章
相关标签/搜索