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