深入理解javascript原型和閉包（1）——一切都是物件

王福朋發表於2014-09-17
JavaScript原型物件

“一切都是物件”這句話的重點在於如何去理解“物件”這個概念。

——當然，也不是所有的都是物件，值型別就不是物件。

 

首先我們們還是先看看javascript中一個常用的運算子——typeof。typeof應該算是我們們的老朋友，還有誰沒用過它？

typeof函式輸出的一共有幾種型別，在此列出：

       function show(x) {

            console.log(typeof x);    // undefined
            console.log(typeof 10);   // number
            console.log(typeof 'abc'); // string
            console.log(typeof true);  // boolean

            console.log(typeof function () {});  //function

            console.log(typeof [1, 'a', true]);  //object
            console.log(typeof { a: 10, b: 20 });  //object
            console.log(typeof null);  //object
            console.log(typeof new Number(10));  //object
        }
        show();

以上程式碼列出了typeof輸出的集中型別標識，其中上面的四種（undefined, number, string, boolean）屬於簡單的值型別，不是物件。剩下的幾種情況——函式、陣列、物件、null、new Number(10)都是物件。他們都是引用型別。

判斷一個變數是不是物件非常簡單。值型別的型別判斷用typeof，引用型別的型別判斷用instanceof。

var fn = function () { };
console.log(fn instanceof Object);  // true

 

好了，上面說了半天物件，各位可能也經常在工作中應對物件，在生活中還得應對活生生的物件。有些個心理不正常或者愛開玩笑的單身人士，還對於系統提示的“找不到物件”耿耿於懷。那麼在javascript中的物件，到底該如何定義呢？

物件——若干屬性的集合。

java或者C#中的物件都是new一個class出來的，而且裡面有欄位、屬性、方法，規定的非常嚴格。但是javascript就比較隨意了——陣列是物件，函式是物件，物件還是物件。物件裡面的一切都是屬性，只有屬性，沒有方法。那麼這樣方法如何表示呢？——方法也是一種屬性。因為它的屬性表示為鍵值對的形式。

而且，更加好玩的事，javascript中的物件可以任意的擴充套件屬性，沒有class的約束。這個大家應該都知道，就不再強調了。

先說個最常見的例子：

以上程式碼中，obj是一個自定義的物件，其中a、b、c就是它的屬性，而且在c的屬性值還是一個物件，它又有name、year兩個屬性。

 

這個可能比較好理解，那麼函式和陣列也可以這樣定義屬性嗎？——當然不行，但是它可以用另一種形式，總之函式/陣列之流，只要是物件，它就是屬性的集合。

以函式為例子：

        var fn = function () {
            alert(100);
        };
        fn.a = 10;
        fn.b = function () {
            alert(123);
        };
        fn.c = {
            name: "王福朋",
            year: 1988
        };

上段程式碼中，函式就作為物件被賦值了a、b、c三個屬性——很明顯，這就是屬性的集合嗎。

你問：這個有用嗎？

回答：可以看看jQuery原始碼！

在jQuery原始碼中，“jQuery”或者“$”，這個變數其實是一個函式，不信你可以叫我們們的老朋友typeof驗證一下。

console.log(typeof $);  // function
console.log($.trim(" ABC "));

驗明正身！的確是個函式。那麼我們們常用的 $.trim() 也是個函式，經常用，就不用驗了吧！

很明顯，這就是在$或者jQuery函式上加了一個trim屬性，屬性值是函式，作用是擷取前後空格。

 

javascript與java/C#相比，首先最需要解釋的就是弱型別，因為弱型別是最基本的用法，而且最常用，就不打算做一節來講。

其次要解釋的就是本文的內容——一切（引用型別）都是物件，物件是屬性的集合。最需要了解的就是物件的概念，和java/C#完全不一樣。所以，切記切記！

 

最後，有個疑問。在typeof的輸出型別中，function和object都是物件，為何卻要輸出兩種答案呢？都叫做object不行嗎？——當然不行。

具體原因，且聽下回分解！

 

---------------------------------------------------------------------------

本文已更新到《深入理解javascript原型和閉包》的目錄，更多內容可參見《深入理解javascript原型和閉包》。

另外，歡迎關注我的微博。

學習作者教程：《前端JS高階面試》《前端JS基礎面試題》《React.js模擬大眾點評webapp》《zepto設計與原始碼分析》《json2.js原始碼解讀》

相關文章