摘要：基本類型類對(duì)象純對(duì)象類數(shù)組其中部分參考了的函數(shù)實(shí)現(xiàn)。比如說所以如果此時(shí)對(duì)象不是由內(nèi)置構(gòu)造函數(shù)生成的對(duì)象，這個(gè)為。判斷對(duì)于類數(shù)組對(duì)象，只要該對(duì)象中存在屬性并且為非負(fù)整數(shù)且在有限范圍之內(nèi)即可判斷為類數(shù)組對(duì)象。

本文主要講解如何準(zhǔn)確判斷JavaScript中出現(xiàn)的各種類型和對(duì)象。（基本類型、Object類、Window對(duì)象、純對(duì)象plainObject、類數(shù)組）其中部分參考了jQuery的函數(shù)實(shí)現(xiàn)。

JavaScript定義的數(shù)據(jù)類型有Undefined、Null、Boolean、Number、String、Object、Symbol（ES6新增）。

其中typeof對(duì)大部分的數(shù)據(jù)類型都能夠準(zhǔn)確識(shí)別，如下：

typeof undefined // "undefined"
typeof null // "object"
typeof true // "boolean"
typeof 1 // "number"
typeof "s" // "string"
typeof {} // "object"
typeof function a() {} // "function"
typeof Symbol("2") // "symbol"

其中返回的字符串首字母都是小寫的。

對(duì)于typeof null === "object"來說，這其實(shí)是一個(gè)bug。

在JavaScript中，Object下還有很多細(xì)分的類型，比如說Date、RegExp、Error、Array、Function。

typeof除了能夠準(zhǔn)確的判斷出Function之外，對(duì)于其他細(xì)分類型均返回object。

當(dāng)toString方法被調(diào)用的時(shí)候，下面的步驟會(huì)被執(zhí)行：

如果this值是undefined，就返回[object Undefined]

如果this的值是null，就返回[object Null]

讓O成為ToObject(this)的結(jié)果

讓class成為O的內(nèi)部屬性[[Class]]的值

最后返回由"[object "和class和"]"三個(gè)部分組成的字符串

該方法至少可以識(shí)別14種類型。

// 以下是11種：
var number = 1;          // [object Number]
var string = "123";      // [object String]
var boolean = true;      // [object Boolean]
var und = undefined;     // [object Undefined]
var nul = null;          // [object Null]
var obj = {a: 1}         // [object Object]
var array = [1, 2, 3];   // [object Array]
var date = new Date();   // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g;          // [object RegExp]
var func = function a(){}; // [object Function]

function checkType() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(Object.prototype.toString.call(arguments[i]))
    }
}

checkType(number, string, boolean, und, nul, obj, array, date, error, reg, func)

// 還有不常見的Math、JSON
console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(JSON)); // [object JSON]

// 還有一個(gè)arguments
function a() {
    console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}
a();

結(jié)合上面我們可以寫一個(gè)type函數(shù)，其中基本類型值走typeof，引用類型值走toString。

var class2type = {};

// 生成class2type映射
"Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item, index) {
    class2type["[object " + item + "]"] = item.toLowerCase();
})

function type(obj) {
    // 一箭雙雕
    if (obj == null) {
        return obj + "";
    }
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[Object.prototype.toString.call(obj)] || "object" :
        typeof obj;
}

通過toLowerCase()小寫化和typeof的結(jié)果是小寫一致。

注意IE6中toString()會(huì)把Undefined和Null都識(shí)別為[object Object]，所以加了一個(gè)判斷，直接調(diào)用+來隱式toString()-> "null"。

這里之所以class2type[Object.prototype.toString.call(obj)] || "object"是考慮到ES6新增的Symbol、Map、Set在集合class2type中沒有，直接把他們識(shí)別成object。

這個(gè)type其實(shí)就是jQuery中的type。

之后可以直接封裝：

function isFunction(obj) {
    return type(obj) === "function";
}

var isArray = Array.isArray || function( obj ) {
    return type(obj) === "array";
}

jQuery3.0中已經(jīng)完全使用Array.isArray()。

plainObject翻譯為中文即為純對(duì)象，所謂的純對(duì)象，就是該對(duì)象是通過{}或new Object()創(chuàng)建的。

判斷是否為“純對(duì)象”，是為了和其他對(duì)象區(qū)分開比如說null、數(shù)組以及宿主對(duì)象（所有的DOM和BOM都是數(shù)組對(duì)象）等。

jQuery中有提供了該方法的實(shí)現(xiàn)，除了規(guī)定該對(duì)象是通過{}或new Object()創(chuàng)建的，且對(duì)象含有零個(gè)或者多個(gè)鍵值對(duì)外，一個(gè)沒有原型(__proto__)的對(duì)象也是一個(gè)純對(duì)象。

console.log($.isPlainObject({})) // true

console.log($.isPlainObject(new Object)) // true

console.log($.isPlainObject(Object.create(null))); // true

jQuery3.0版本的plainObject實(shí)現(xiàn)如下：

var toString = Object.prototype.toString;

var hasOwn = Object.prototype.hasOwnProperty;

function isPlainObject(obj) {
    var proto, Ctor;

    // 排除掉明顯不是obj的以及一些宿主對(duì)象如Window
    if (!obj || toString.call(obj) !== "[object Object]") {
        return false;
    }

    /**
     * getPrototypeOf es5 方法，獲取 obj 的原型
     * 以 new Object 創(chuàng)建的對(duì)象為例的話
     * obj.__proto__ === Object.prototype
     */
    proto = Object.getPrototypeOf(obj);

    // 沒有原型的對(duì)象是純粹的，Object.create(null) 就在這里返回 true
    if (!proto) {
        return true;
    }

    /**
     * 以下判斷通過 new Object 方式創(chuàng)建的對(duì)象
     * 判斷 proto 是否有 constructor 屬性，如果有就讓 Ctor 的值為 proto.constructor
     * 如果是 Object 函數(shù)創(chuàng)建的對(duì)象，Ctor 在這里就等于 Object 構(gòu)造函數(shù)
     */
    Ctor = hasOwn.call(proto, "constructor") && proto.constructor;

    // 在這里判斷 Ctor 構(gòu)造函數(shù)是不是 Object 構(gòu)造函數(shù)，用于區(qū)分自定義構(gòu)造函數(shù)和 Object 構(gòu)造函數(shù)
    return typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);
}

注意最后這一句非常的重要：

hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object)

hasOwn.toString調(diào)用的其實(shí)是Function.prototype.toString()而不是Object.prototype.toString()，因?yàn)?b>hasOwnProperty是一個(gè)函數(shù)，它的原型是Function，于是Function.prototype.toString覆蓋了Object.prototype.toString。

Function.prototype.toString()會(huì)把整個(gè)函數(shù)體轉(zhuǎn)換成一個(gè)字符串。如果該函數(shù)是內(nèi)置函數(shù)的話，會(huì)返回一個(gè)表示函數(shù)源代碼的字符串。比如說：

Function.prototype.toString(Object) === function Object() { [native code] }

所以如果此時(shí)對(duì)象不是由內(nèi)置構(gòu)造函數(shù)生成的對(duì)象，這個(gè)hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object)為false。

function Person(name) {
    this.name = name;
}
var person = new Person("Devin");
plainObject(person) === false; // true
// 其實(shí)就是`hasOwn.toString.call(Ctor) === "function Person(name) { this.name = name; }"

Window對(duì)象有一個(gè)特性：Window.window指向自身。

Window.window === Window; //true

常見的類數(shù)組有函數(shù)的arguments和NodeList對(duì)象。

對(duì)于類數(shù)組對(duì)象，只要該對(duì)象中存在length屬性并且length為非負(fù)整數(shù)且在有限范圍之內(nèi)即可判斷為類數(shù)組對(duì)象。

JavaScript權(quán)威指南中提供了方法：

function isArrayLike(o) {
    if (o && // o is not null, undefined, etc
        // o is an object
        typeof o === "object" &&
        // o.length is a finite number
        isFinite(o.length) &&
        // o.length is non-negative
        o.length >= 0 &&
        // o.length is an integer
        o.length === Math.floor(o.length) &&
        // o.length < 2^32
        o.length < 4294967296) //數(shù)組的上限值
          return true;
    else 
          return false;
}

以上的判斷無論是真的數(shù)組對(duì)象或是類數(shù)組對(duì)象都會(huì)返回true，那我們?nèi)绾螀^(qū)分到底是真的數(shù)組對(duì)象還是類數(shù)組對(duì)象？

其實(shí)只需要先判斷是否為數(shù)組對(duì)象即可。

function utilArray(o) {
    if (Array.isArray(o)) {
        return "array";
    }
    if (isArrayLike(o)) {
        return "arrayLike";
    } else {
        return "neither array nor arrayLike";
    }
}

類數(shù)組對(duì)象并不關(guān)心除了數(shù)字索引和length以外的東西。

比如說：

var a = {"1": "a", "2": "b", "4": "c", "abc": "abc", length: 5};
Array.prototype.join.call(a, "+"); // +a+b++c

其中，"0"和"3"沒有直接省略為兩個(gè)undefined，同樣的abc被忽略為undefined。

如果length多出實(shí)際的位數(shù)會(huì)補(bǔ)undefined（空位也補(bǔ)充undefined），少位則截?cái)嗪竺娴臄?shù)組成員。

var a = {"1": "a", "2": "b", "4": "c", "abc": "abc", length: 6};
Array.from(a); // [undefined, "a", "b", undefined, "c", undefined]

var a = {"1": "a", "2": "b", "4": "c", "abc": "abc", length: 5};
Array.from(a); // [undefined, "a", "b", undefined, "c"]

var a = {"1": "a", "2": "b", "4": "c", "abc": "abc", length: 4};
Array.from(a); // [undefined, "a", "b", undefined]

Array.from

該方法從一個(gè)類似數(shù)組或可迭代對(duì)象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例。

Array.from("foo");
// ["f", "o", "o"]

Array.prototype.slice

該方法返回一個(gè)從開始到結(jié)束（不包括結(jié)束）選擇的數(shù)組的一部分淺拷貝到一個(gè)新數(shù)組對(duì)象。

var a = {"0":"a", "1":"b", "2":"c", length: 3};
Array.prototype.slice.call(a, 0); // ["a", "b", "c"]

ES6擴(kuò)展運(yùn)算符

var a = "hello";
[...a]; //["h", "e", "l", "l", "o"]

參考鏈接：

https://github.com/mqyqingfen...

https://github.com/mqyqingfen...