跳转至

JavaScript对象:你知道全部的对象分类吗?

你好,我是winter。

在前面的课程中,我已经讲解了JavaScript对象的一些基础知识。但是,我们所讲解的对象,只是特定的一部分,并不能涵盖全部的JavaScript对象。

比如说,我们不论怎样编写代码,都没法绕开Array,实现一个跟原生的数组行为一模一样的对象,这是由于原生数组的底层实现了一个自动随着下标变化的length属性。

并且,在浏览器环境中,我们也无法单纯依靠JavaScript代码实现div对象,只能靠document.createElement来创建。这也说明了JavaScript的对象机制并非简单的属性集合+原型。

我们日常工作中,接触到的主要API,几乎都是由今天所讲解的这些对象提供的。理解这些对象的性质,我们才能真正理解我们使用的API的一些特性。

JavaScript中的对象分类

我们可以把对象分成几类。

  • 宿主对象(host Objects):由JavaScript宿主环境提供的对象,它们的行为完全由宿主环境决定。
  • 内置对象(Built-in Objects):由JavaScript语言提供的对象。

  • 固有对象(Intrinsic Objects ):由标准规定,随着JavaScript运行时创建而自动创建的对象实例。

  • 原生对象(Native Objects):可以由用户通过Array、RegExp等内置构造器或者特殊语法创建的对象。
  • 普通对象(Ordinary Objects):由{}语法、Object构造器或者class关键字定义类创建的对象,它能够被原型继承。

下面我会为你一一讲解普通对象之外的对象类型。

宿主对象

首先我们来看看宿主对象。

JavaScript宿主对象千奇百怪,但是前端最熟悉的无疑是浏览器环境中的宿主了。

在浏览器环境中,我们都知道全局对象是window,window上又有很多属性,如document。

实际上,这个全局对象window上的属性,一部分来自JavaScript语言,一部分来自浏览器环境。

JavaScript标准中规定了全局对象属性,W3C的各种标准中规定了Window对象的其它属性。

宿主对象也分为固有的和用户可创建的两种,比如document.createElement就可以创建一些DOM对象。

宿主也会提供一些构造器,比如我们可以使用new Image来创建img元素,这些我们会在浏览器的API部分详细讲解。

内置对象·固有对象

我们在前面说过,固有对象是由标准规定,随着JavaScript运行时创建而自动创建的对象实例。

固有对象在任何JavaScript代码执行前就已经被创建出来了,它们通常扮演者类似基础库的角色。我们前面提到的“类”其实就是固有对象的一种。

ECMA标准为我们提供了一份固有对象表,里面含有150+个固有对象。你可以通过这个链接查看。

但是遗憾的是,这个表格并不完整。所以在本篇的末尾,我设计了一个小实验(小实验:获取全部JavaScript固有对象),你可以自己尝试一下,数一数一共有多少个固有对象。

内置对象·原生对象

我们把JavaScript中,能够通过语言本身的构造器创建的对象称作原生对象。在JavaScript标准中,提供了30多个构造器。按照我的理解,按照不同应用场景,我把原生对象分成了以下几个种类。

通过这些构造器,我们可以用new运算创建新的对象,所以我们把这些对象称作原生对象。
几乎所有这些构造器的能力都是无法用纯JavaScript代码实现的,它们也无法用class/extend语法来继承。

这些构造器创建的对象多数使用了私有字段,例如:

  • Error: [[ErrorData]]
  • Boolean: [[BooleanData]]
  • Number: [[NumberData]]
  • Date: [[DateValue]]
  • RegExp: [[RegExpMatcher]]
  • Symbol: [[SymbolData]]
  • Map: [[MapData]]

这些字段使得原型继承方法无法正常工作,所以,我们可以认为,所有这些原生对象都是为了特定能力或者性能,而设计出来的“特权对象”。

用对象来模拟函数与构造器:函数对象与构造器对象

我在前面介绍了对象的一般分类,在JavaScript中,还有一个看待对象的不同视角,这就是用对象来模拟函数和构造器。

事实上,JavaScript为这一类对象预留了私有字段机制,并规定了抽象的函数对象与构造器对象的概念。

函数对象的定义是:具有[[call]]私有字段的对象,构造器对象的定义是:具有私有字段[[construct]]的对象。

JavaScript用对象模拟函数的设计代替了一般编程语言中的函数,它们可以像其它语言的函数一样被调用、传参。任何宿主只要提供了“具有[[call]]私有字段的对象”,就可以被 JavaScript 函数调用语法支持。

[[call]]私有字段必须是一个引擎中定义的函数,需要接受this值和调用参数,并且会产生域的切换,这些内容,我将会在属性访问和执行过程两个章节详细讲述。

我们可以这样说,任何对象只需要实现[[call]],它就是一个函数对象,可以去作为函数被调用。而如果它能实现[[construct]],它就是一个构造器对象,可以作为构造器被调用。

对于为JavaScript提供运行环境的程序员来说,只要字段符合,我们在上文中提到的宿主对象和内置对象(如Symbol函数)可以模拟函数和构造器。

当然了,用户用function关键字创建的函数必定同时是函数和构造器。不过,它们表现出来的行为效果却并不相同。

对于宿主和内置对象来说,它们实现[[call]](作为函数被调用)和[[construct]](作为构造器被调用)不总是一致的。比如内置对象 Date 在作为构造器调用时产生新的对象,作为函数时,则产生字符串,见以下代码:

    console.log(new Date); // 1
    console.log(Date())

而浏览器宿主环境中,提供的Image构造器,则根本不允许被作为函数调用。

console.log(new Image); 
console.log(Image());//抛出错误

再比如基本类型(String、Number、Boolean),它们的构造器被当作函数调用,则产生类型转换的效果。

值得一提的是,在ES6之后 => 语法创建的函数仅仅是函数,它们无法被当作构造器使用,见以下代码:

    new (a => 0) // error

对于用户使用 function 语法或者Function构造器创建的对象来说,[[call]]和[[construct]]行为总是相似的,它们执行同一段代码。

我们看一下示例。

function f(){
    return 1;
}
var v = f(); //把f作为函数调用
var o = new f(); //把f作为构造器调用

我们大致可以认为,它们[[construct]]的执行过程如下:

  • 以 Object.prototype 为原型创建一个新对象;
  • 以新对象为 this,执行函数的[[call]];
  • 如果[[call]]的返回值是对象,那么,返回这个对象,否则返回第一步创建的新对象。

这样的规则造成了个有趣的现象,如果我们的构造器返回了一个新的对象,那么new创建的新对象就变成了一个构造函数之外完全无法访问的对象,这一定程度上可以实现“私有”。

function cls(){
    this.a = 100;
    return {
        getValue:() => this.a
    }
}
var o = new cls;
o.getValue(); //100
//a在外面永远无法访问到

特殊行为的对象

除了上面介绍的对象之外,在固有对象和原生对象中,有一些对象的行为跟正常对象有很大区别。

它们常见的下标运算(就是使用中括号或者点来做属性访问)或者设置原型跟普通对象不同,这里我简单总结一下。

  • Array:Array的length属性根据最大的下标自动发生变化。
  • Object.prototype:作为所有正常对象的默认原型,不能再给它设置原型了。
  • String:为了支持下标运算,String的正整数属性访问会去字符串里查找。
  • Arguments:arguments的非负整数型下标属性跟对应的变量联动。
  • 模块的namespace对象:特殊的地方非常多,跟一般对象完全不一样,尽量只用于import吧。
  • 类型数组和数组缓冲区:跟内存块相关联,下标运算比较特殊。
  • bind后的function:跟原来的函数相关联。

结语

在这篇文章中,我们介绍了一些不那么常规的对象,并且我还介绍了JavaScript中用对象来模拟函数和构造器的机制。

这是一些不那么有规律、不那么优雅的知识,而JavaScript正是通过这些对象,提供了很多基础的能力。

我们这次课程留一个挑战任务:不使用new运算符,尽可能找到获得对象的方法。

例子:

var o = {}
var o = function(){}

请把自己的答案留言给我,我们来比比看谁找到的多。

小实验:获取全部JavaScript固有对象

我们从JavaScript标准中可以找到全部的JavaScript对象定义。JavaScript语言规定了全局对象的属性。

三个值:

Infinity、NaN、undefined。

九个函数:

  • eval
  • isFinite
  • isNaN
  • parseFloat
  • parseInt
  • decodeURI
  • decodeURIComponent
  • encodeURI
  • encodeURIComponent

一些构造器:
Array、Date、RegExp、Promise、Proxy、Map、WeakMap、Set、WeakSet、Function、Boolean、String、Number、Symbol、Object、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、ArrayBuffer、SharedArrayBuffer、DataView、Typed Array、Float32Array、Float64Array、Int8Array、Int16Array、Int32Array、UInt8Array、UInt16Array、UInt32Array、UInt8ClampedArray。

四个用于当作命名空间的对象:

  • Atomics
  • JSON
  • Math
  • Reflect

我们使用广度优先搜索,查找这些对象所有的属性和Getter/Setter,就可以获得JavaScript中所有的固有对象。

请你试着先不看我的代码,在自己的浏览器中计算出来JavaScript有多少固有对象。

var set = new Set();
var objects = [
    eval,
    isFinite,
    isNaN,
    parseFloat,
    parseInt,
    decodeURI,
    decodeURIComponent,
    encodeURI,
    encodeURIComponent,
    Array,
    Date,
    RegExp,
    Promise,
    Proxy,
    Map,
    WeakMap,
    Set,
    WeakSet,
    Function,
    Boolean,
    String,
    Number,
    Symbol,
    Object,
    Error,
    EvalError,
    RangeError,
    ReferenceError,
    SyntaxError,
    TypeError,
    URIError,
    ArrayBuffer,
    SharedArrayBuffer,
    DataView,
    Float32Array,
    Float64Array,
    Int8Array,
    Int16Array,
    Int32Array,
    Uint8Array,
    Uint16Array,
    Uint32Array,
    Uint8ClampedArray,
    Atomics,
    JSON,
    Math,
    Reflect];
objects.forEach(o => set.add(o));

for(var i = 0; i < objects.length; i++) {
    var o = objects[i]
    for(var p of Object.getOwnPropertyNames(o)) {
        var d = Object.getOwnPropertyDescriptor(o, p)
        if( (d.value !== null && typeof d.value === "object") || (typeof d.value === "function"))
            if(!set.has(d.value))
                set.add(d.value), objects.push(d.value);
        if( d.get )
            if(!set.has(d.get))
                set.add(d.get), objects.push(d.get);
        if( d.set )
            if(!set.has(d.set))
                set.add(d.set), objects.push(d.set);
    }
}
精选留言(15)
  • XXX 👍(8) 💬(2)

    关于原生构造器无法用 class/extend 语法来继承的观点,能否举例说明呢?我写个demo跑了一下,发现还是可以的呐

    2019-02-26

  • Jaykey 👍(3) 💬(3)

    打印出来了989个对象,有很多是没有用过的,区分清楚了内置对象的差距,也知道了平时使用的一些方法是“构造器”

    2019-06-13

  • 有铭 👍(1) 💬(2)

    这个“原型继承方法”不能正常工作,是什么意思?我放狗搜了一下,发现,Number对象仍然可以用prototype属性来添加方法和属性啊

    2019-02-19

  • LaMer 👍(0) 💬(1)

    这些构造器创建的对象多数使用了私有字段, 例如:Error: [[ErrorData]]。 [[ErrorData]]指的是什么 不明白 可以说的清楚一些吗 望老师回答下

    2019-10-14

  • 卡洛斯(๑Ő௰Ő๑) 👍(0) 💬(1)

    winter 你好, 对于用户使用 function 语法或者 Function 构造器创建的对象来说,[[call]] 和 [[construct]] 行为总是相似的,它们执行同一段代码。 function f(){ return 1; } // 把 f 作为函数调用 var v = f(); // 1 // 把 f 作为构造器调用 var o = new f(); // {} 代码执行的结果是不同,函数调用返回的是 1,构造器调用返回的一个对象。 这里的行为是指什么呢,为什么又总是相似的呢。 相似是指 函数调用和构造器调用,都能被调用?还是指都调用的同一个代码?

    2019-08-25

  • 丁丁丁丁丁大树。 👍(0) 💬(1)

    winter老师你好,我对08节的内容有一个疑问,老师有空的话请为学生解惑 文中你有一句话“构造器对象的定义是:具有私有字段 [[construct]]” 我的理解是带有constructor的对象就是构造器对象,所以我做了下面这个实验 var obj = {constructor:function(){return {say:function(){alert('hello')}}}} var ins = new obj() 但是会报错obj不是一个construct, 我想问老师是不是我理解错了?

    2019-02-27

  • Miss 👍(0) 💬(1)

    在讲到函数对象和构造器对象时[[call]]和[[construct]] 指的是?

    2019-02-15

  • 大雄 👍(0) 💬(1)

    proxy模拟array怎样?

    2019-02-13

  • 👍(0) 💬(2)

    当然了,用户用 function 关键字创建的函数必定同时是函数和构造器。不过,它们表现出来的行为效果却并不相同。 对于用户使用 function 语法或者 Function 构造器创建的对象来说,[[call]] 和 [[construct]] 行为总是相似的,它们执行同一段代码。 请问这里的意思是,call 和 construct 它们虽然执行同一段代码,但是行为效果是不同的?感觉读起来似乎有歧义……

    2019-02-13

  • William 👍(215) 💬(3)

    // 1. 利用字面量 var a = [], b = {}, c = /abc/g // 2. 利用dom api var d = document.createElement('p') // 3. 利用JavaScript内置对象的api var e = Object.create(null) var f = Object.assign({k1:3, k2:8}, {k3: 9}) var g = JSON.parse('{}') // 4.利用装箱转换 var h = Object(undefined), i = Object(null), k = Object(1), l = Object('abc'), m = Object(true)

    2019-02-05

  • 多啦斯基周 👍(129) 💬(2)

    这块的内容确实有些复杂,作者讲的很深入。 但是个人觉得思路是否可以再整理一下,总是感觉有一些绕,把知识讲得更易理解一些呢?

    2019-02-14

  • Alan 👍(69) 💬(1)

    一期比一期深入,一期比一期了解的更少了,蓝瘦

    2019-02-02

  • kesikesie 👍(30) 💬(5)

    console.log(new Date); // 1 console.log(Date()) 这个在控制台打印的都是日期

    2019-03-19

  • 吃不饱 👍(29) 💬(2)

    前端工作一年,好难理解。

    2019-02-08

  • 米斯特菠萝 👍(23) 💬(7)

    利用构造器的执行规则来实现私有,真是个意外的发现 之前用class构建一个类,有一些方法暴露给外面总觉得怪怪的。现在好了,在constructor函数里return一个对象,在对象里写方法来对应返回类里写的需要暴露的method就解决了

    2019-02-03