對象的創(chuàng)建方式

• 對象字面量：最直接的方式，通過鍵值對的形式定義對象。

var mrPeng = {
    name: '彭于晏',
    age: 18,
    sex: 'boy',
};

• new Object() ：構造函數方式創(chuàng)建一個空對象。

var obj = new Object();

• 自定義構造函數：通過new關鍵字調用自定義的構造函數來創(chuàng)建特定類型的對象。

function Car(name, height) {
    this.name = name;
    this.height = height;
}
var car = new Car('Toyota', 1500);

• 模擬構造函數：模擬一個構造函數，但不使用new關鍵字，需手動實現。

function Person(name, age){
    var self = {};
    self.name = name;
    self.age = age;
    return self;
}
let p = Person('Alice', 30);

包裝類

進度一

先來看看這段JS代碼：

   var num = 123;
   num.a = 'aaa'; 
   console.log(num.a); // undefined

簡單解釋一下代碼：代碼中先聲明了一個Num，并賦值為123，再在Num上掛上一個屬性a，其值為字符串aaa，然后打印輸出Num中a的值

如果你也是這樣想的話，那么你心中輸出的結果不就是字符串aaa嘛?？墒禽敵龅慕Y果真的是字符串aaa嗎？？？

當然不是，我可以清楚的告訴你，該段代碼輸出的是undefined。說明屬性a并沒有掛在num上，畢竟num不是對象，那竟然沒掛上去，訪問不存在的東西時，不應該報錯嗎？那又為什么輸出的是undefined呢？

首先，我們通過該段代碼能知道：在JS中原始值（原始類型數據）（如數字Number、字符串String、布爾值boolean等）不能擁有屬性和方法，屬性和方法只有對象才能擁有。

那么如果我們將var num = 123;改寫成var num = new Number(123);呢，我們就得到了一個對象，可是對象里面沒有key，只有一個值為123。展開Number(123)這個對象看一下，就會看到有一個[[PrimitiveValue]]:123,意思就是說這是一種特殊的對象Number(123)，這個對象就是我們說的包裝類。

你說他是對象他就是對象，你說他是數字他也是數字，他能當成數字來用。

   var num = new Number(123);
   console.log(num*2);// 輸出246
   num.a = 'aaa'; 
   console.log(num.a); //輸出aaa

這就說明當你將他用來當對象，他就是對象，用來當數字，他就是數字。

var num = 123;這種創(chuàng)建的叫數字字面量，而var num = new Number(123);創(chuàng)建的叫Number對象（數字對象）。對象是可以有屬性和方法的，而原始值是沒有的。

進度二

讓我們來看看先這段代碼：

var str ='asdf'   
console.log(str.length)  //輸出4

為什么這個能輸出4呢?總不能說剛剛得到的結論是錯的吧

在解決上面這個問題前先來看看這段代碼：

   var num = 4;
   num.len = 3; //
   console.log(num.len); // undefined

根據上面的結論，我們能知道這里的 len是不能掛在原始值上的，輸出的肯定是undefined，沒錯吧。

我們來解析一下上面那段代碼，看看在v8引擎是怎樣實現的：

• 首先，在執(zhí)行var num = 4;時 ，v8會將代碼執(zhí)行為new Number(4),也就是所有的字面量都會執(zhí)行成這個樣子，包括字符串和布爾會執(zhí)行成new String()和new Boolean() ，將其轉換為對象，也就是包裝類。
• 然后，v8在執(zhí)行這個代碼num.len = 3;時，就會將len屬性掛在Number這個對象上，且值為3。因為在JS中數字對象就是為了彌補數字字面量的不足，在JS中萬物皆對象，所有的東西都要往對象上靠
• 最后，在執(zhí)行console.log(num.len);之前就會突然醒悟過來，也就是在讀取該值或在執(zhí)行前會使用 str.valueof()方法 ，判斷這個對象（數字對象）是否能轉化為原始值(str.valueof()方法只能操作包裝類)，如果能轉化為原始值，那么就會將屬性和方法移除,執(zhí)行delete num.len。然而在輸出的時候，num.len先在Number對象中查找，找不到就會聲明一個len屬性再對象中，但是沒有值啊，所以輸出的就是undefined，而不不是報錯?。。?/li>

訪問對象不存在的屬性，會返回undefined

訪問不存在的不變量，會報錯??！

那么現在我們來解決上面那個問題：

var str ='asdf'   
console.log(str.length)  //輸出4

• 首先，一樣的，在執(zhí)行var str ='asdf' 時，v8會執(zhí)行為var str =new String('asdfg')包裝類
• 然后，str調用length方法，并且輸出，他沒有往原始值上掛屬性，直接調用的話，會去對象（包裝類）中查找該方法，找不到該方法就會去，該對象的原型上找，也就是我們之前提到的，按照他的原型鏈去查找該方法，而String這個構造函數中是有該方法的，可以直接調用。

總結

• 包裝類（String, Number, Boolean）是JavaScript為原始值提供的對象包裝器，允許我們像操作對象一樣操作原始值，包括訪問屬性和方法，只不過屬性和方法并不是原始值身上的，而是String, Number, Boolean的構造函數（對象）上的。

• 原始值是不能擁有屬性和方法，屬性和方法只有對象才能擁有

• 重要特性：每當試圖訪問原始值的屬性或方法時，JavaScript會自動創(chuàng)建包裝類，執(zhí)行完畢后立即銷毀，確保原始值的不變性。這就是為什么直接給原始值添加屬性沒有效果的原因。

• valueOf()：為了使 valueOf 在類型轉換過程中有用，它必須返回一個原始值（基本類型值）。所有的原始類型（基本類型）都有自己的 valueOf() 方法。JavaScript 調用 valueOf 方法來將對象轉換成原始值（基本類型值）。你很少需要自己調用 valueOf 方法；當遇到需要基本類型值的對象時，JavaScript 會自動的調用該方法。

• 原始值對象，v8 執(zhí)行到包裝類時，會通過valueOf()試探該包裝類是不是原始值，如果是，則秉承原始值不用具有屬性和方法的這一規(guī)則，再移除掉給包裝類添加的屬性

以上就是深入理解JavaScript對象與包裝類的詳細內容，更多關于JavaScript對象與包裝類的資料請關注腳本之家其它相關文章！

最新評論