JavaScript中Object.prototype.toString方法的原理

　　在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法.

　　<一>，ECMAScript 3

　　1. 在ES3中,Object.prototype.toString方法的规范如下:

15.2.4.2 Object.prototype.toString()

　　在toString方法被调用时,会执行下面的操作步骤:

　　1. 获取this对象的[[Class]]属性的值.

　　2. 计算出三个字符串"[object ", 第一步的操作结果Result(1), 以及 "]"连接后的新字符串.

　　3. 返回第二步的操作结果Result(2).

　　[[Class]]是一个内部属性,所有的对象(原生对象和宿主对象)都拥有该属性.在规范中,[[Class]]是这么定义的

　　备注： 然后给了一段解释

　　所有内置对象的[[Class]]属性的值是由本规范定义的.所有宿主对象的[[Class]]属性的值可以是任意值,甚至可以是内置对象使用过的[[Class]]属性的值.[[Class]]属性的值可以用来判断一个原生对象属于哪种内置类型.需要注意的是,除了通过Object.prototype.toString方法之外,本规范没有提供任何其他方式来让程序访问该属性的值(查看 15.2.4.2).

　　也就是说,把Object.prototype.toString方法返回的字符串,去掉前面固定的"[object "和后面固定的"]",就是内部属性[[class]]的值,也就达到了判断对象类型的目的.jQuery中的工具方法$.type(),就是干这个的.

　　在ES3中,规范文档并没有总结出[[class]]内部属性一共有几种,不过我们可以自己统计一下,原生对象的[[class]]内部属性的值一共有10种.分别是:"Array", "Boolean", "Date", "Error", "Function", "Math", "Number", "Object", "RegExp", "String".

　　<二>，ECMAScript 5

　　在ES5.1中,除了规范写的更详细一些以外,Object.prototype.toString方法和[[class]]内部属性的定义上也有一些变化,Object.prototype.toString方法的规范如下:

　　在toString方法被调用时,会执行下面的操作步骤:

　　　　如果this的值为undefined,则返回"[object Undefined]".

　　　　如果this的值为null,则返回"[object Null]".

　　　　让O成为调用ToObject(this)的结果.

　　　　让class成为O的内部属性[[Class]]的值.

　　返回三个字符串"[object ", class, 以及 "]"连接后的新字符串.

　　可以看出,比ES3多了1,2,3步.第1,2步属于新规则,比较特殊,因为"Undefined"和"Null"并不属于[[class]]属性的值,需要注意的是,这里和严格模式无关(大部分函数在严格模式下,this的值才会保持undefined或null,非严格模式下会自动成为全局对象).第3步并不算是新规则,因为在ES3的引擎中,也都会在这一步将三种原始值类型转换成对应的包装对象,只是规范中没写出来.ES5中,[[Class]]属性的解释更加详细:

　　所有内置对象的[[Class]]属性的值是由本规范定义的.所有宿主对象的[[Class]]属性的值可以是除了"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"之外的的任何字符串.[[Class]]内部属性是引擎内部用来判断一个对象属于哪种类型的值的.需要注意的是,除了通过Object.prototype.toString方法之外,本规范没有提供任何其他方式来让程序访问该属性的值(查看 15.2.4.2).

　　和ES3对比一下,第一个差别就是[[class]]内部属性的值多了两种,成了12种,一种是arguments对象的[[class]]成了"Arguments",而不是以前的"Object",还有就是多个了全局对象JSON,它的[[class]]值为"JSON".第二个差别就是,宿主对象的[[class]]内部属性的值,不能和这12种值冲突,不过在支持ES3的浏览器中,貌似也没有发现哪些宿主对象故意使用那10个值.

　　<三>，ECMAScript 5

　　ES6中 @@toStringTag很容易改变Object.prototype.toString返回值

let obj = {}

Object.defineProperty(obj, Symbol.toStringTag, {
    get: function() {
        return "newClass"
    }
})

console.log(Object.prototype.toString.call(obj)) // "[object newClass]"

　　<四>， 总结

　　如果我们要判断一个某个对象的内置类型，可以用如下函数

function getClass (a) {
    const str = Object.prototype.toString.call(a);
    return /^\[object (.*)\]$/.exec(str)[1].toLocaleUpperCase();

}

　　测试如下

　　 function foo() {
        console.log(getClass(arguments)); // ARGUMENTS
    }
    foo();
    function* nav() {
        console.log(getClass(arguments)); // ARGUMENTS
        yield 1;
        yield 2;
    }
    let its = nav();
    its.next();
    console.log(getClass({})); // OBJECT
    console.log(getClass([])); // ARRAY
    console.log(getClass(1234)); // NUMBER
    console.log(getClass("wuhan")); // STRING
    console.log(getClass(/^[a-z]+/gi)); // REGEXP
    console.log(getClass(true)); // BOOLEAN
    console.log(getClass(new Date())); // DATE
    console.log(getClass(new Error())); // ERROR
    console.log(getClass(new Function())); // FUNCTION
    console.log(getClass(Math)); // MATH
    console.log(getClass(null)); // NULL
    console.log(getClass(undefined)); // UNDEFINED