摘要：函數(shù)式對(duì)象的一個(gè)子類(lèi)型，中的函數(shù)是一等公民內(nèi)置對(duì)象中還有一些對(duì)象子類(lèi)型，通常被稱(chēng)為內(nèi)置對(duì)象。內(nèi)容對(duì)象的內(nèi)容是由一些存儲(chǔ)在特定命名位置的任意類(lèi)型的值組成的，我們稱(chēng)之為屬性。

對(duì)象兩種定義形式

聲明(文字)形式

構(gòu)造形式

//聲明(文字)形式
var myObj = {
    key: value
    // ...
}

//構(gòu)造形式
var myObj = new Object();
myObj.key = value;

對(duì)象是 JavaScript 的基礎(chǔ)。在 JavaScript 中一共有六種主要類(lèi)型（術(shù)語(yǔ)語(yǔ)言類(lèi)型）

string

number

boolean

null

undefined

object

注意，簡(jiǎn)單基本類(lèi)型（string，number，boolean，undefined，null）本身并不是對(duì)象。
null 有時(shí)會(huì)被當(dāng)做對(duì)象類(lèi)型，但這其實(shí)只是語(yǔ)言本身的一個(gè) bug，即對(duì) null 執(zhí)行 typeof null 時(shí)會(huì)返回"object" 。實(shí)際上，null 本身是基本類(lèi)型。

函數(shù)式對(duì)象的一個(gè)子類(lèi)型，JavaScript 中的函數(shù)是“一等公民”

JavaScript 中還有一些對(duì)象子類(lèi)型，通常被稱(chēng)為內(nèi)置對(duì)象。有些內(nèi)置對(duì)象的名字看起來(lái)和簡(jiǎn)單基礎(chǔ)類(lèi)型一樣，不過(guò)實(shí)際上它們的關(guān)系更復(fù)雜，

String

Number

Boolean

Object

Function

Array

Date

RegExp

Error

這些內(nèi)置函數(shù)可以當(dāng)做構(gòu)造函數(shù)（由 new 產(chǎn)生的函數(shù)調(diào)用）來(lái)使用，從而可以構(gòu)造一個(gè)對(duì)應(yīng)子類(lèi)型的新對(duì)象。舉例來(lái)說(shuō)：

var strPrimitive = "I am string"; //文字形式定義
typeof(strPrimitive);             // "string"
strPrimitive instanceof String;   // false

var strObject = new String("I am string");//構(gòu)造形式定義
typeof(strObject);                        //"object"
strObject instanceof String;              //true

//檢查 sub-type 對(duì)象
Object.prototype.toString.call(strObject);//[object String]

Object.prototype.toString...我們可以認(rèn)為子類(lèi)型在內(nèi)部借用了 Object 中的 toString（）方法。

由于 javascript 弱類(lèi)型的編程語(yǔ)言，原始值 "I am string"在必要的時(shí)候回自動(dòng)把字符串字面量轉(zhuǎn)換成一個(gè) String 對(duì)象。

思考下面代碼：

var strPrimitive = "I am a string";
console.log(strPrimitive.length);   //13
console.log(strPrimitive.charAt(3));//m

使用以上兩種方法，我們都可以直接在字符串字面量上訪問(wèn)屬性和方法，之所以可以這么做，是因?yàn)橐孀詣?dòng)把字面量轉(zhuǎn)換成 String 對(duì)象，所以可以訪問(wèn)屬性和方法。

null 和 undefined 沒(méi)有對(duì)應(yīng)的構(gòu)造形式，他們只有文字形式。相反，Date 只有構(gòu)造，沒(méi)有文字形式。

對(duì)象的內(nèi)容是由一些存儲(chǔ)在特定命名位置的（任意類(lèi)型的）值組成的，我們稱(chēng)之為屬性。

var myObject = {
    a:2,
    "a_arr":3
}

myObject.a;    //2  屬性訪問(wèn)
myObject["a"]; //2  鍵訪問(wèn)

myObject["a_arr"];  //3

.操作符要求屬性命名滿(mǎn)足標(biāo)識(shí)符的命名規(guī)范，而["..."]語(yǔ)法可以接受任意 UTF-8/Unicode 字符串為屬性名

在對(duì)象中，屬性名永遠(yuǎn)都是字符串。如果你使用 string（字面量）以外的其他值作為屬性名，那它首先會(huì)被轉(zhuǎn)換為一個(gè)字符串。即使是數(shù)字也不例外，雖然在數(shù)組下標(biāo)中使用的的確是數(shù)字，但是在對(duì)象屬性名中數(shù)字會(huì)被轉(zhuǎn)換成字符串，所以當(dāng)心不要搞混對(duì)象和數(shù)字的用法。

var myObject = {}

myObject[true] = "foo";
myObject[3] = "bar";
myObject[myObject] = "baz";

myObject["true"];             //"foo"
myObject["3"];                //"bar"
myObject["[object Object]"];  //"baz"

ES6 增加了可計(jì)算屬性名，可以再文字形式中使用[]包裹一個(gè)表達(dá)式來(lái)當(dāng)做屬性名：

var prefix = "foo";

var myObject = {
    [prefix + "bar"]:"hello",
    [prefix + "baz"]:"world",
};

myObject["foobar"]; //hello
myObject["foobaz"]; //world

可計(jì)算屬性名最常用的場(chǎng)景可能是 ES6的符號(hào)（Symbol）

它是一種新的基礎(chǔ)數(shù)據(jù)類(lèi)型，包含一個(gè)不透明且無(wú)法預(yù)測(cè)的值

數(shù)組也支持[]訪問(wèn)形式，數(shù)組期房的是數(shù)值下標(biāo)，也就是說(shuō)值存儲(chǔ)的位置（索引）是整數(shù)。

var arr =[1,"a",2];
arr.length;      //3
arr[0];          //1
arr[1];          //"a"

arr.x = "x";
arr.length;     //3
arr.x;          //"x"

arr["3"] = 3;
arr.length;     //4
arr[3];         //3

數(shù)組也是對(duì)象，所以雖然每個(gè)下標(biāo)都是整數(shù)，你仍然可以給數(shù)組添加屬性

注意： 如果你試圖向數(shù)組添加一個(gè)屬性，當(dāng)時(shí)屬性名“看起來(lái)”想一個(gè)數(shù)字，那他會(huì)編程一個(gè)數(shù)值下標(biāo)（因此會(huì)修改數(shù)組的內(nèi)容而不是添加一個(gè)屬性）

javascript 初學(xué)者最常見(jiàn)的問(wèn)題之一就是如何復(fù)制一個(gè)對(duì)象。實(shí)際上我們無(wú)法選擇默認(rèn)一個(gè)復(fù)制算法。

舉例來(lái)說(shuō)，思考一下這個(gè)對(duì)象：

function anotherFunction(){/**/}

var anohterObject = {
    c: true
};

var anotherArray = [];

var myObject = {
    a: 2,
    b: anotherObject,//引用，不是副本
    c: anotherArray,//另一個(gè)引用
    d: anotherFunction
};

anotherArray.push( anotherObject, myObject);

對(duì)象復(fù)制時(shí)，我們應(yīng)該判斷它是淺復(fù)制還是深復(fù)制。

對(duì)于淺拷貝來(lái)說(shuō)，復(fù)制出的新對(duì)象中 a 的值會(huì)復(fù)制舊對(duì)象中 b、c、d 引用的對(duì)象是一樣的。

對(duì)于深拷貝來(lái)說(shuō)，除了復(fù)制 myObject 以外還會(huì)復(fù)制 anotherObject 和 anotherArray。這時(shí)問(wèn)題就來(lái)了，anotherArray 引用了 anotherObject 和 myObject，所以又需要復(fù)制 myObject，這樣就會(huì)由于循環(huán)引用導(dǎo)致死循環(huán)。

有一巧妙的復(fù)制方法：

var newObj = JSON.parse(JSON.stringify( someObj ));

這種方法需要保證對(duì)象是 Json 安全的的，所以只適用于部分情況。

相對(duì)于深復(fù)制，淺復(fù)制就非常易懂并且問(wèn)題要少得多，所以 ES6定義了 Object.assign(...)方法來(lái)實(shí)現(xiàn)淺復(fù)制。

Object.assign() :第一個(gè)參數(shù)是目標(biāo)對(duì)象，之后可以跟一個(gè)或多個(gè)源對(duì)象。
它會(huì)遍歷一個(gè)或多個(gè)源對(duì)象的所有可枚舉的自由鍵并把他們復(fù)制到目標(biāo)對(duì)象，最后返回目標(biāo)對(duì)象。

var obj = Object.assign({},myObject);
obj.a;     //2
obj.b === anotherObject;//true
obj.c === anotherArray;//true
obj.d === anotherFunction;//true

在 ES5之前，JavaScript 語(yǔ)言本身并沒(méi)有提供可以直接檢測(cè)屬性特性的方法，比如判斷屬性是否可讀。

但是從 ES5開(kāi)始，所有的屬性都具備了屬性描述符。

思考下面代碼：

var myObject = {
    a:2
};

Object.getOwnPropertyDescriptor( myObject,"a" );
// {
//     value:2，
//     writable:true,
//     enumerable:true,
//     configurable:true
// }

可以通過(guò) Object.defineProperty(...) 添加或者修改一個(gè)已有屬性

Vue 的雙向綁定的基礎(chǔ)就是基于這個(gè)函數(shù)，重寫(xiě) get set 方法，在使用發(fā)布-訂閱模式來(lái)完成數(shù)據(jù)的動(dòng)態(tài)更新

詳情可以看Vue 動(dòng)態(tài)數(shù)據(jù)綁定(一)和Vue 動(dòng)態(tài)數(shù)據(jù)綁定三大難點(diǎn)

configurable:false 時(shí):

它將不能再使用Object.defineProperty(...)進(jìn)行配置

但是可以將 writable的狀態(tài)由 true->false(無(wú)法 false->true)

delete 無(wú)效

對(duì)象常量

結(jié)合 writable：false 和 configurable：false

var myObject ={};

Object.defineProperty( myObject, "NUMBER",{
    value:42,
    writable:false，
    configurable：false
});

禁止擴(kuò)展

如果你想禁止一個(gè)對(duì)象添加新屬性并且保存已有屬性，可以使用 Object.preventExtensions(...)

var myObject ={
    a:2
}
Object.preventExtensions(myObject);

myObject.b =3;
myObject.b; //undefined

在費(fèi)嚴(yán)格模式下，創(chuàng)建屬性 b 會(huì)靜默失敗。在嚴(yán)格模式下，將會(huì)拋出 TypeError 錯(cuò)誤。

密封

Object.seal（...）會(huì)創(chuàng)建一個(gè)"密封"的對(duì)象，這個(gè)訪問(wèn)實(shí)際上會(huì)在一個(gè)現(xiàn)有對(duì)象上調(diào)用 Object.preventExtensions(...)并把所有現(xiàn)有屬性標(biāo)記為configurable：false。

密封后，不能添加新屬性，也不能重新配置或刪除任何現(xiàn)有屬性（可以修改屬性的值）

凍結(jié)

Object.freeze(...)會(huì)創(chuàng)建一個(gè)凍結(jié)對(duì)象，這個(gè)方法實(shí)際上會(huì)在一個(gè)現(xiàn)有對(duì)象調(diào)用 Object.seal(...)并把所有“數(shù)據(jù)訪問(wèn)”屬性 wirtable：false，這樣就無(wú)法修改他們的值了

更多內(nèi)容可以訂閱本人微信公眾號(hào)，一起開(kāi)啟前端小白進(jìn)階的世界！