全文共1990字,预计学习时长11分钟
图源:unsplash
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
而这里方法是对象的一部分,不会影响原始类。
图源:unsplash
在JavaScript这一基于原型的继承语言中,类和构造函数都模仿面向对象的继承模型。熟悉类非常有帮助,React这样的流行JavaScript库会经常使用类句法。
你掌握了吗?
推荐阅读专题
留言点赞发个朋友圈
我们一起分享AI学习与发展的干货
编译组:梁晶晶、陈枫
相关链接:
https://hackernoon.com/three-different-ways-to-create-objects-in-javascript-f72b3w6d
如转载,请后台留言,遵守转载规范
推荐文章阅读
长按识别二维码可添加关注
读芯君爱你