随笔

JavaScript Object

众所周知 JavaScript 初生时借鉴了很多 Java 的语言特性,比如创建一个对象 new TargetObject(),但是它也有一些奇奇怪怪的东西,比如 Object.prototype

prototype

这是一个神奇的东西,它被称为原型对象,所有对象都会从这里继承方法及属性。 Cofet.orotetype.png

proto

被实例化的对象通过 __proto__ 可以找到它的父级,比如 user.__proto__ 指向的就是 Object.prototype

通过一个 ES5 时代常见的例子

var xxxSDK = function(){};
xxxSDK.prototype.init = function(){ /*xxxxxx*/ };

我们定义了一个叫做 xxxSDK 的函数,并赋予给 xxxSDK 的原型一个 init 方法,接下来开始使用这个 SDK

var xxx = new xxxSDK();
xxx.init();

此时 xxx.__proto__ == xxxSDK.prototype,顺着往上找

xxx.
    __proto__. // xxxSDK.prototype -> { init: [Function (anonymous)] }
    __proto__. // Object.prototype -> [Object: null prototype] {}
    __proto__  // null

截屏2021-06-20 下午11.10.23.png 图1

Object

上一节知道了通过 __proto__ 可以一直找到最顶级,那么自然会对这个链路感到好奇,比如其中的 FunctionObject 分别是怎么回事。

截屏2021-06-20 下午11.16.10.png 图2

截屏2021-06-20 下午11.16.18.png 图3

其中最经典的是 Object.prototype.constructor === Object,然后还有一些有意思的比如

Object.constructor === Function
Function.__proto__ === Object.__proto__
Object.__proto__ === Function.prototype
typeof Object === 'function'

Object is [Function: Object]
Object.constructor is [Function: Function]

本文链接:https://note.lilonghe.net/post/javascript-object.html

-- EOF --