JavaScript中几乎一切都是对象：创建对象的三种方式

本文转载自公众号“读芯术”(ID：AI_Discovery)。

Javascript中的一切几乎都是对象，无论是数组还是函数。本文将教你使用JavaScript创建对象的三种方法。

[[332311]]

对象字面量

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 

而这里方法是对象的一部分，不会影响原始类。

[[332312]]

图源：unsplash

在JavaScript这一基于原型的继承语言中，类和构造函数都模仿面向对象的继承模型。熟悉类非常有帮助，React这样的流行JavaScript库会经常使用类句法。

你掌握了吗?