在JavaScript中创建对象的三种不同方式

Javascript中的几乎所有东西都是对象，无论是数组还是函数。 在本文中，我们将学习在JavaScript中创建对象的三种不同方式：

1. 对象文字
2. 新关键字
3. 类

对象文字

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 

属性名称重复

如果两个属性使用相同的名称，则第二个属性将覆盖第一个属性。

let Person = {
  name : "Ney Vatsa" ,
  name : "Shashank"
};
console .log(Person.name);

// Shashank

New 关键字

Object构造函数为给定值创建一个对象包装器。 如果该值为null或undefined ，它将创建并返回一个空对象。 否则，它将返回与给定值对应的类型的对象。

对象   也可以使用new关键字创建。 使用Javascript中的内置对象构造函数， new可以创建一个空对象； 或者，此关键字可以与用户定义的构造函数一起使用： with builtin Object Constructor 。

首先，请看以下示例：

let movies = new Object ();

console .log(movies)
//{}

下一步是向此空对象添加属性和方法。 这可以通过简单的点符号来实现：

let movies = new Object ();

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( "Watch Online" );
};

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

但是，不建议您采用这种做法，因为在后台有一个范围解析器可以检查构造函数是内置的还是用户定义的。

用户定义的构造函数

函数也可以用于在JavaScript中创建对象。 如果您真的考虑过，它们已经是对象了-因此，基本上，对象用于创建更多对象。

通常，此方法优于对象构造函数。 假设您必须创建数百个具有相同属性的对象； 使用对象构造函数方法，您将必须手动将所有属性添加到所有对象，但是使用函数构造函数，可以预定义这些属性。

function movies ( name, releaseYear, genre, ratings )  {
  this .name = name;
  this .releaseYear = releaseYear;
  this .genre = genre;
  this .ratings = ratings;
  this .watch = () => {
    console .log( "Watch Online" );
  };
}

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]
// }

使用相同的函数构造函数，可以创建任意数量的对象。

使用ES6类创建对象

此方法与将new与用户定义的函数构造函数一起使用非常相似。 类是面向对象编程（OOP）的主要组件。 可以创建实际上是对象的许多类实例。 构造函数现在可以用类替换，因为ES6规范支持它们。

class Movies  {
  constructor (name, releaseYear, genre, ratings) {
    this .name = name;
    this .releaseYear = releaseYear;
    this .genre = genre;
    this .ratings = ratings;
  }
  watch() {
    console .log( "Watch Online" );
  }
}
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

在这里，我已经定义了构造函数内部的所有参数。

方法可以是类的一部分，而声明可以稍后添加到类的创建实例“ objects”中：

/*
above example
*/
rocky.buy = function ()  {
  console .log( "Buy the Movie" );
};
rocky.buy();
// Buy the Movie

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

类和构造函数都将面向对象的继承模型模仿到JavaScript，这是一种基于原型的继承语言。

熟悉类非常有帮助，因为流行JavaScript库（例如React）经常使用class语法。

先前发布在https://medium.com/better-programming/three-different-ways-to-create-objects-in-javascript-d3595d693296

翻译自: https://hackernoon.com/three-different-ways-to-create-objects-in-javascript-f72b3w6d