摘要：函數式對象的一個子類型，中的函數是一等公民內置對象中還有一些對象子類型，通常被稱為內置對象。內容對象的內容是由一些存儲在特定命名位置的任意類型的值組成的，我們稱之為屬性。

對象兩種定義形式

聲明(文字)形式

構造形式

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

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

對象是 JavaScript 的基礎。在 JavaScript 中一共有六種主要類型（術語語言類型）

string

number

boolean

null

undefined

object

注意，簡單基本類型（string，number，boolean，undefined，null）本身并不是對象。
null 有時會被當做對象類型，但這其實只是語言本身的一個 bug，即對 null 執行 typeof null 時會返回"object" 。實際上，null 本身是基本類型。

函數式對象的一個子類型，JavaScript 中的函數是“一等公民”

JavaScript 中還有一些對象子類型，通常被稱為內置對象。有些內置對象的名字看起來和簡單基礎類型一樣，不過實際上它們的關系更復雜，

String

Number

Boolean

Object

Function

Array

Date

RegExp

Error

這些內置函數可以當做構造函數（由 new 產生的函數調用）來使用，從而可以構造一個對應子類型的新對象。舉例來說：

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

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

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

Object.prototype.toString...我們可以認為子類型在內部借用了 Object 中的 toString（）方法。

由于 javascript 弱類型的編程語言，原始值 "I am string"在必要的時候回自動把字符串字面量轉換成一個 String 對象。

思考下面代碼：

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

使用以上兩種方法，我們都可以直接在字符串字面量上訪問屬性和方法，之所以可以這么做，是因為引擎自動把字面量轉換成 String 對象，所以可以訪問屬性和方法。

null 和 undefined 沒有對應的構造形式，他們只有文字形式。相反，Date 只有構造，沒有文字形式。

對象的內容是由一些存儲在特定命名位置的（任意類型的）值組成的，我們稱之為屬性。

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

myObject.a;    //2  屬性訪問
myObject["a"]; //2  鍵訪問

myObject["a_arr"];  //3

.操作符要求屬性命名滿足標識符的命名規范，而["..."]語法可以接受任意 UTF-8/Unicode 字符串為屬性名

在對象中，屬性名永遠都是字符串。如果你使用 string（字面量）以外的其他值作為屬性名，那它首先會被轉換為一個字符串。即使是數字也不例外，雖然在數組下標中使用的的確是數字，但是在對象屬性名中數字會被轉換成字符串，所以當心不要搞混對象和數字的用法。

var myObject = {}

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

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

ES6 增加了可計算屬性名，可以再文字形式中使用[]包裹一個表達式來當做屬性名：

var prefix = "foo";

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

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

可計算屬性名最常用的場景可能是 ES6的符號（Symbol）

它是一種新的基礎數據類型，包含一個不透明且無法預測的值

數組也支持[]訪問形式，數組期房的是數值下標，也就是說值存儲的位置（索引）是整數。

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

數組也是對象，所以雖然每個下標都是整數，你仍然可以給數組添加屬性

注意： 如果你試圖向數組添加一個屬性，當時屬性名“看起來”想一個數字，那他會編程一個數值下標（因此會修改數組的內容而不是添加一個屬性）

javascript 初學者最常見的問題之一就是如何復制一個對象。實際上我們無法選擇默認一個復制算法。

舉例來說，思考一下這個對象：

function anotherFunction(){/**/}

var anohterObject = {
    c: true
};

var anotherArray = [];

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

anotherArray.push( anotherObject, myObject);

對象復制時，我們應該判斷它是淺復制還是深復制。

對于淺拷貝來說，復制出的新對象中 a 的值會復制舊對象中 b、c、d 引用的對象是一樣的。

對于深拷貝來說，除了復制 myObject 以外還會復制 anotherObject 和 anotherArray。這時問題就來了，anotherArray 引用了 anotherObject 和 myObject，所以又需要復制 myObject，這樣就會由于循環引用導致死循環。

有一巧妙的復制方法：

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

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

相對于深復制，淺復制就非常易懂并且問題要少得多，所以 ES6定義了 Object.assign(...)方法來實現淺復制。

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

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

在 ES5之前，JavaScript 語言本身并沒有提供可以直接檢測屬性特性的方法，比如判斷屬性是否可讀。

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

思考下面代碼：

var myObject = {
    a:2
};

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

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

Vue 的雙向綁定的基礎就是基于這個函數，重寫 get set 方法，在使用發布-訂閱模式來完成數據的動態更新

詳情可以看Vue 動態數據綁定(一)和Vue 動態數據綁定三大難點

configurable:false 時:

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

但是可以將 writable的狀態由 true->false(無法 false->true)

delete 無效

對象常量

結合 writable：false 和 configurable：false

var myObject ={};

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

禁止擴展

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

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

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

在費嚴格模式下，創建屬性 b 會靜默失敗。在嚴格模式下，將會拋出 TypeError 錯誤。

密封

Object.seal（...）會創建一個"密封"的對象，這個訪問實際上會在一個現有對象上調用 Object.preventExtensions(...)并把所有現有屬性標記為configurable：false。

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

凍結

Object.freeze(...)會創建一個凍結對象，這個方法實際上會在一個現有對象調用 Object.seal(...)并把所有“數據訪問”屬性 wirtable：false，這樣就無法修改他們的值了

更多內容可以訂閱本人微信公眾號，一起開啟前端小白進階的世界！