0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

使用JavaScript创建对象的方法和案例

如意 来源:读芯术 作者:读芯术 2020-07-06 09:41 次阅读

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库会经常使用类句法。

你掌握了吗?

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 编程
    +关注

    关注

    88

    文章

    3431

    浏览量

    92218
  • 对象
    +关注

    关注

    1

    文章

    38

    浏览量

    17288
  • javascript
    +关注

    关注

    0

    文章

    507

    浏览量

    53379
收藏 人收藏

    评论

    相关推荐

    JavaScript权威指南 pdf 下载

    移植的DHTML动画等常见任务。本书还包括详细的参考手册,涵盖了JavaScript的核心API、遗留的客户端API和W3C标准DOM API,记述了这些API中的每一个JavaScript对象
    发表于 12-08 10:46

    JavaScript中的Object

    ,所以 sayName 方法的引?指向的是同一个堆内存对象。● 书中是这样写的:使?动态原型模式时,不能使用对象字?量重写原型。前面已经解释过了,如果在已经创建了实例的情况下重写原型,
    发表于 09-18 09:05

    Math对象属性和方法

    valueOf() 方法返回 Math 对象的原始值。该原始值由 Math 对象派生的所有对象继承。valueOf() 方法通常由
    发表于 10-27 12:21

    JavaScript 【1】 基础数据类型

    Boolean;var cars=new Array;var person= new Object; JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象
    发表于 07-17 10:32

    JavaScript 【2】对象

    (), 它会返回函数的定义:实例objectName.methodName有多种方式可以创建,使用和修改 JavaScript 对象。同样也有多种方式用来创建,使用和修改属性和
    发表于 07-17 10:33

    JavaScript【8】JSON

    ;www.taobao.com"} ]} JSON 格式化后为 JavaScript 对象JSON 格式在语法上与创建 JavaScript 对象
    发表于 07-17 10:45

    如何用java映射创建java对象和调用java对象

    java是一种解析语言,java程序是通过java虚拟机解析.class的方式运行起来。因此,java中就存在java映射的概念。下面介绍如何用java映射创建java对象和调用java对象
    发表于 04-11 14:43

    java如何创建对象的分析

    作为Java开发者,我们每天创建很多对象,但我们通常使用依赖管理系统,比如Spring去创建对象。然而这里有很多创建
    发表于 09-27 14:36 0次下载

    实例分析Java中创建对象

    Java中有5种创建对象的方式,下面给出它们的例子还有它们的字节码 Paste_Image.png 如果你运行了末尾的的程序,你会发现方法1,2,3用构造函数创建
    发表于 09-28 13:29 0次下载

    JavaScript创建对象的方式

    JavaScript中有几种创建对象的方式,本文将一一介绍,工厂模式、构造函数模式、原型模式、动态原型模式、组合使用构造函数模式和原型模式。
    的头像 发表于 02-22 09:32 3583次阅读
    <b class='flag-5'>JavaScript</b><b class='flag-5'>创建</b><b class='flag-5'>对象</b>的方式

    浅谈JavaScript创建对象的3种方法

    在OOP中,对象文字是指用大括号括起来的用逗号分隔的名称 - 值对列表。名称是字符串,值是可用的任何基本数据类型,例如数组,字符串,数字,函数等等。
    发表于 01-01 15:05 628次阅读
    浅谈<b class='flag-5'>JavaScript</b><b class='flag-5'>创建</b><b class='flag-5'>对象</b>的3种<b class='flag-5'>方法</b>

    使用简单工厂方法实现硬盘对象创建

    简单工厂方法定义一个用于创建对象的类,该类接受一个参数,通过参数决定创建不同的对象
    的头像 发表于 05-14 14:07 1043次阅读

    JavaScript中动态的创建QML对象

    在实际QML应用开发中,我们可以在JavaScript中动态的创建QML对象。这样做可以延迟对象的实例化,当我们在需要创建
    的头像 发表于 09-01 10:42 1245次阅读

    Java中创建对象有哪些方式

    1 问题 作为Java开发者,经常创建很多对象,你是否知道Java中创建对象有哪些方式呢?
    的头像 发表于 02-24 10:29 837次阅读

    javascript的内置对象有哪些

    你全面了解JavaScript的能力和应用场景。 一、基本数据类型对象: String(字符串对象):用于处理和操作文本数据。 Number(数字对象):用于处理和操作数字数据。 Bo
    的头像 发表于 12-03 11:39 681次阅读