当前位置: 首页 > 科技观察

JavaScript中几乎所有事物都是对象:创建对象的三种方式

时间:2023-03-12 09:48:40 科技观察

Javascript中几乎所有事物都是对象,无论是数组还是函数。本文将教您三种使用JavaScript创建对象的方法。对象字面量JavaScript对象字面量是用花括号括起来的以逗号分隔的名称-值对列表。对象文字用于封装代码并将其包装在有序的包中。letPerson={name:"Foziya",age:20,action:["walk","run"],greeting:function(){console.log("Hello");}};对象字面量的属性值可以是任何数据类型,包括数组字面量、函数字面量和嵌套对象字面量。letshape={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简写属性名假设不同的变量必须放在一个对象中,有一个方法:letone=1;lettwo=2;letthree=3;letnumbers={one:one,two:two,three:three};console.log(numbers);//{one:1,two:2,three:3}使用ECMAScript2015,同样可以用更短的符号来实现:letone=1;lettwo=2;letthree=3;letnumbers={one,two,three};console.log(numbers);//{one:1,two:2,three:3}console.log(numbers.one)//1console.log(numbers.one==={one}.one);//真正的用户自定义构造函数你也可以使用Createobjects中的函数JavaScript。仔细想想,它们本身就已经是对象了,所以对象是用来创建更多对象的。通常,此方法优于对象构造函数。想象一下必须创建数百个具有相同属性的对象,使用对象构造函数方法,您必须手动将所有属性添加到所有对象,但使用构造函数这些属性是预定义的。functionmovies(name,releaseYear,genre,ratings){this.name=name;this.releaseYear=releaseYear;this.genre=genre;this.ratings=ratings;this.watch=()=>{console.log("WatchOnline");};}letDPS=newmovies("DeadPoetsSociety",1989,["Drama","Teen"],{IMDb:"8.1/10",Metacritic:"79%"});console.log(DPS);movies{//name:'DeadPoetsSociety',//releaseYear:1989,//genre:['Drama','Teen'],//ratings:{IMDb:'8.1/10',Metacritic:'79%'},//watch:[函数]//}letrocky=newmovies("洛基",1976,["剧情","体育"],{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]//}使用相同的构造函数,可以创建任意数量的对象。重复的属性名称如果两个属性使用相同的名称,则第二个属性将覆盖第一个。letPerson={name:"NeyVatsa",name:"Shashank"};console.log(Person.name);//ShashankNew关键字对象构造函数为给定值创建一个对象包装器。如果该值不存在或未定义,它将被创建并作为空对象返回。否则,它返回一个与给定值相同类型的对象。也可以使用new关键字创建对象。使用Javascript中的内置对象构造函数创建一个新的空对象;或者,此关键字可以与用户定义的构造函数一起使用。先看一个例子:letmovies=newObject();console.log(movies)//{}下一步是向这个空对象添加属性和方法,这可以通过简单的点符号来实现:letmovies=newObject();console.log(movies)//{}movies.name="DeadPoetsSociety";movies.releaseYear=1989;movies.genre=["Drama","Teen"];movies.ratings={IMDb:"8.1/10",Metacritic:"79%"};电影。watch=()=>{console.log("WatchOnline");};console.log(movies);//{name:'DeadPoetsSociety',//releaseYear:1989,//genre:['Drama','Teen'],//ratings:{IMDb:'8.1/10',Metacritic:'79%'},//watch:[Function]}movies.watch();//WatchOnline但我不推荐这种方式,因为后台有作用域解析,可以检查构造函数是内置的还是用户自定义的。使用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");}}letrocky=newMovies("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();//WatchOnline在上面的例子中,我已经在构造函数中定义了所有的参数。方法可以是类的一部分,稍后可以将声明添加到类的创建实例中,成为“对象”:/*aboveexample*/rocky.buy=function(){console.log("BuytheMovie");};rocky.buy();//BuytheMovie这个方法是对象的一部分,不会影响原来的类。来源:unsplash在基于原型的继承语言JavaScript中,类和构造函数都模仿面向对象的继承模型。熟悉类非常有帮助,像React这样的流行JavaScript库经常使用类语法。你掌握了吗?