浅谈JavaScript 创建对象的三种方式。

转载自品略图书馆  http://www.pinlue.com/article/2020/07/0615/3710979778925.html

 

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库会经常使用类句法。 你掌握了吗？