前端進階系列（第4期）：JavaScript中一切皆爲對象揭祕

寫在前面

之前在閱讀《JavaScript高級語言程序設計》中有提到「在JavaScript中，一切皆爲對象」，當時並無深刻理解其真正的含義，如今想一想其內含着很大的信息量，下面跟着我一步一步的揭開其神祕的面紗。

第一步：類型檢測

在JavaScript中經過typeof進行數據類型檢測。

運行如下代碼：

console.log(typeof undefined); // undefined
console.log(typeof ''); // string
console.log(typeof 123); // number
console.log(typeof true); // boolean
console.log(typeof Symbol()); // symbol
console.log(typeof function() {}); // function
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof null); // object
console.log(typeof new Number(123)); // object
複製代碼

根據上面代碼輸出結果可知，除開基本類型，typeof輸出的其它的都是function和object，即引用類型。

第二步：函數是對象嗎？

首先經過instanceof檢驗一下函數是否是Object的實例。

運行如下代碼：

const func = function(a, b) {
    return a + b;
}

console.log(func instanceof Object); // true
複製代碼

根據上面代碼輸出結果可知，函數 function 也是對象。

若是你們注意到的話，其實上面的代碼等同於

運行如下代碼：

const func = new Function('a', 'b', 'return a + b');

console.log(func instanceof Function); // true
console.log(func instanceof Object); // true
複製代碼

根據上面代碼輸出結果可知，函數 func 既是 Function 的實例又是 Object 的實例。

第三步：常見的內置對象

其實在JavaScript中有不少的內置對象，例如：Number、String、Boolean、Symbol、Array、Function、RegExp、Object、JSON、Date、Set、Map、Error、Math等等，瞭解更多請點擊這裏。

運行如下代碼：

// 實例化數字對象
const num = new Number(123);
console.log(typeof Number); // function
console.log(typeof num); // object

// 實例化字符串對象
const str = new String('hello world');
console.log(typeof String); // function
console.log(typeof str); // object

// Symbol是函數且不能被new 實例化
const smb = new Symbol('smb'); // TypeError Symbol 不能實例化
console.log(typeof Symbol); // function

// Math 內置對象
const max = Math.max(1,5); // 直接調用該類型的靜態方法
console.log(typeof Math); // object

// 實例化數組對象
const arr = [1,2,3,4];
console.log(typeof Array); // function
console.log(typeof arr); // object

// 實例化對象
const obj = {name: '布一', wechat: 'hankewins'};
console.log(typeof Object); // function
console.log(typeof obj); // object

// 自定義一個函數
const Func = function() {}
const func = new Func();

console.log(typeof Func); // function
console.log(typeof func); // object
複製代碼

根據上面代碼輸出結果可知，對象是經過函數來建立的，而函數卻又是一種對象。

注：實例化一個對象不必定非要new一個對象。

對象格式

一般的對象（Object），通常是利用鍵值對錶示的，例以下面這樣：

const obj = {
    name: '布一',
    age: 18,
    wechat: 'Hankewins',
    getName: function() {
        return this.name;
    }
}
複製代碼

那數組和函數不也是對象嗎，它們也能夠這樣表示？

固然不能夠，但它們能夠採用另外一種表示形式。如函數，能夠這樣：

const func = function() {}

func.description = 'JavaScript function';
func.getName = function() {
    return this.description;
}
複製代碼

寫在最後

總之，在javascript的世界裏，一切皆爲對象，且對象就是屬性的集合。

最後拋出一個問題，函數 function 爲何是對象 Object 的實例以及它們之間有什麼關聯？

若是有發現任何問題或者有更好的建議，歡迎直接給我留言。

交流

更多精彩內容請關注github.com/hankewins/b…,若是你以爲還不錯請給個star，很是感謝。