Javascript中的一切幾乎都是對象，無論是數(shù)組還是函數(shù)。本文將教你使用JavaScript創(chuàng)建對象的三種方法。

對象字面量

JavaScript對象字面量是指用大括號括起來的用逗號分隔的名稱——值對列表。對象字面量用于封裝代碼并將其包裝在有序的包中。

let Person = {

name： “Foziya”，

age： 20，

action： ［“walk”， “ run”］，

greeting： function（） {

console.log（“Hello”）;

}

};

對象字面量的屬性值可以是任何數(shù)據(jù)類型，包括數(shù)組字面量、函數(shù)字面量和嵌套對象字面量。

let shape = {

name： “rectangle”，

color： “red”，

size： {

length： 10，

breadth： 20

}

};

console.log（shape）;

// { name：‘rectangle’，

// color： ‘red’，

// size： { length:10， breadth： 20 } }

console.log（shape.size.length）

// 10

簡寫屬性名稱

假設必須將不同的變量放在一個對象內(nèi)，有一種方法是：

let one = 1;

let two = 2;

let three = 3;

let numbers = {

one： one，

two： two，

three： three

};

console.log（numbers）;

//{ one： 1， two： 2， three： 3 }

使用ECMAScript 2015，可通過較短的表示法實現(xiàn)相同的目的：

let one = 1;

let two = 2;

let three = 3;

let numbers = { one， two， three };

console.log（numbers）;

//{ one： 1， two： 2， three： 3 }

console.log（numbers.one）

// 1

console.log（numbers.one === { one }.one）;

// true

用戶定義的構造函數(shù)

你也可以使用函數(shù)在JavaScript中創(chuàng)建對象。仔細想，其實它們本身已經(jīng)是對象了，因此對象用于創(chuàng)建更多對象。

通常，此方法優(yōu)于對象構造函數(shù)。試想必須創(chuàng)建數(shù)百個具有相同屬性的對象，使用對象構造函數(shù)方法，必須手動將所有屬性添加到所有對象，但是使用構造函數(shù)可以預定義這些屬性。

functionmovies（name， releaseYear， genre， ratings） {

this.name = name;

this.releaseYear =releaseYear;

this.genre = genre;

this.ratings =ratings;

this.watch = （） =》 {

console.log（“WatchOnline”）;

};

}

let DPS = new movies（“Dead Poets Society”， 1989， ［“Drama”， “Teen”］， {

IMDb： “8.1 /10”，

Metacritic： “79%”

}）;

console.log（DPS）;movies {

// name： ‘Dead Poets Society’，

// releaseYear： 1989，

// genre： ［‘Drama’，‘Teen’］，

// ratings： { IMDb：‘8.1 / 10’， Metacritic： ‘79%’ }，

// watch： ［Function］

// }

let rocky = new movies（“Rocky”， 1976， ［“Drama”， “Sports”］， {

IMDb： “8.1 /10”，

Metacritic： “70%”

}）;

console.log（rocky）;

// movies {

// name： ‘Rocky’，

// releaseYear： 1976，

// genre： ［‘Drama’，‘Sports’］，

// ratings： { IMDb：‘8.1 / 10’， Metacritic： ‘70%’ }，

// watch： ［Function］

// }

使用相同的構造函數(shù)，可以創(chuàng)建任意數(shù)量的對象。

重復的屬性名稱

如果兩個屬性使用相同的名稱，則第二個屬性將覆蓋第一個屬性。

let Person = {

name： “NeyVatsa”，

name： “Shashank”

};

console.log（Person.name）;

// Shashank

New關鍵字

對象構造函數(shù)為給定值創(chuàng)建一個對象封裝器。如果該值不存在或未定義，它將創(chuàng)建并返回至一個空對象。否則的話，它將返回至一個與給定值類型一致的對象。

也可以使用new關鍵字創(chuàng)建對象。使用Javascript中的內(nèi)置對象構造函數(shù)，創(chuàng)建一個新的空對象；或者，此關鍵字可以與用戶定義的構造函數(shù)一起使用。首先來看一個例子：

let movies = newObject（）;

console.log（movies）

//{}

下一步是向此空對象添加屬性和方法，可通過簡單的點標記來實現(xiàn)：

let movies = newObject（）;

console.log（movies）

//{}

movies.name = “Dead Poets Society”;

movies.releaseYear = 1989;

movies.genre = ［“Drama”， “Teen”］;

movies.ratings = {

IMDb： “8.1 /10”，

Metacritic： “79%”

};

movies.watch = （） =》 {

console.log（“WatchOnline”）;

};

console.log（movies）;

// { name： ‘Dead Poets Society’，

// releaseYear： 1989，

// genre： ［ ‘Drama’， ‘Teen’ ］，

// ratings： { IMDb： ‘8.1 / 10’，Metacritic： ‘79%’ }，

// watch： ［Function］ }

movies.watch（）;

// Watch Online

但我不建議這種做法，因為后臺有作用域解析，可以檢查構造函數(shù)是內(nèi)置的還是用戶定義的。

使用ES6類創(chuàng)建對象

此方法與通過用戶定義的構造函數(shù)使用new關鍵字非常類似。類是面向對象編程（OOP）的主要組件，可以創(chuàng)建實際上是對象的許多類實例。在ES6規(guī)范的支持下，現(xiàn)在可以用類替換構造函數(shù)。

classMovies {

constructor（name，releaseYear， genre， ratings） {

this.name = name;

this.releaseYear = releaseYear;

this.genre = genre;

this.ratings =ratings;

}

watch（） {

console.log（“WatchOnline”）;

}

}

let rocky = new Movies（“Rocky”， 1976， ［“Drama”， “Sports”］， {

IMDb： “8.1 /10”，

Metacritic： “70%”

}）;

console.log（rocky）;

// Movies {

// name： ‘Rocky’，

// releaseYear： 1976，

// genre： ［‘Drama’，‘Sports’］，

// ratings： { IMDb：‘8.1 / 10’， Metacritic： ‘70%’ }

// }

rocky.watch（）;

//Watch Online

上面示例中，我已經(jīng)定義了構造函數(shù)中的所有參數(shù)。方法可以是類的一部分，而聲明可以稍后添加到類的創(chuàng)建實例中，成為“對象”：

/*

above example

*/

rocky.buy = function（） {

console.log（“Buy theMovie”）;

};

rocky.buy（）;

// Buy the Movie

而這里方法是對象的一部分，不會影響原始類。

在JavaScript這一基于原型的繼承語言中，類和構造函數(shù)都模仿面向對象的繼承模型。熟悉類非常有幫助，React這樣的流行JavaScript庫會經(jīng)常使用類句法。

你掌握了嗎？