全文共1990字，預計學習時長11分鐘
圖源：unsplash
Javascript中的一切幾乎都是對象，無論是數組還是函數。本文將教你使用JavaScript創建對象的三種方法。
對象字面量
JavaScript對象字面量是指用大括號括起來的用逗號分隔的名稱——值對列表。對象字面量用於封裝代碼並將其包裝在有序的包中。
let Person = { name: "Foziya", age: 20, action: ["walk", " run"], greeting: function() { console.log("Hello"); }};
對象字面量的屬性值可以是任何數據類型，包括數組字面量、函數字面量和嵌套對象字面量。
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
簡寫屬性名稱
假設必須將不同的變量放在一個對象內，有一種方法是：
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，可通過較短的表示法實現相同的目的：
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
用戶定義的構造函數
你也可以使用函數在JavaScript中創建對象。仔細想，其實它們本身已經是對象了，因此對象用於創建更多對象。
通常，此方法優於對象構造函數。試想必須創建數百個具有相同屬性的對象，使用對象構造函數方法，必須手動將所有屬性添加到所有對象，但是使用構造函數可以預定義這些屬性。
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]// }
使用相同的構造函數，可以創建任意數量的對象。
重複的屬性名稱
如果兩個屬性使用相同的名稱，則第二個屬性將覆蓋第一個屬性。
let Person = { name: "NeyVatsa", name: "Shashank"};console.log(Person.name); // Shashank
New關鍵字
對象構造函數爲給定值創建一個對象封裝器。如果該值不存在或未定義，它將創建並返回至一個空對象。否則的話，它將返回至一個與給定值類型一致的對象。
也可以使用new關鍵字創建對象。使用Javascript中的內置對象構造函數，創建一個新的空對象；或者，此關鍵字可以與用戶定義的構造函數一起使用。首先來看一個例子：
let movies = newObject(); console.log(movies)//{}
下一步是向此空對象添加屬性和方法，可通過簡單的點標記來實現：
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
但我不建議這種做法，因爲後臺有作用域解析，可以檢查構造函數是內置的還是用戶定義的。
使用ES6類創建對象
此方法與通過用戶定義的構造函數使用new關鍵字非常類似。類是面向對象編程（OOP）的主要組件，可以創建實際上是對象的許多類實例。在ES6規範的支持下，現在可以用類替換構造函數。
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
上面示例中，我已經定義了構造函數中的所有參數。方法可以是類的一部分，而聲明可以稍後添加到類的創建實例中，成爲“對象”：
/*above example*/rocky.buy = function() { console.log("Buy theMovie");};rocky.buy();// Buy the Movie
而這裏方法是對象的一部分，不會影響原始類。
圖源：unsplash
在JavaScript這一基於原型的繼承語言中，類和構造函數都模仿面向對象的繼承模型。熟悉類非常有幫助，React這樣的流行JavaScript庫會經常使用類句法。
你掌握了嗎？
推薦閱讀專題
留言點贊發個朋友圈
我們一起分享AI學習與發展的乾貨
編譯組：梁晶晶、陳楓
相關鏈接：
https://hackernoon.com/three-different-ways-to-create-objects-in-javascript-f72b3w6d
如轉載，請後臺留言，遵守轉載規範
推薦文章閱讀
長按識別二維碼可添加關注
讀芯君愛你
