全文共1990字，預計學習時長11分鐘
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
而這裡方法是對象的一部分，不會影響原始類。
在JavaScript這一基於原型的繼承語言中，類和構造函數都模仿面向對象的繼承模型。熟悉類非常有幫助，React這樣的流行JavaScript庫會經常使用類句法。
你掌握了嗎？
留言點讚關注
我們一起分享AI學習與發展的乾貨
如轉載，請後臺留言，遵守轉載規範