JavaScript——对象的创建

目录

任务描述

相关知识

对象的定义

对象字面量

通过关键字new创建对象

通过工厂方法创建对象

使用构造函数创建对象

使用原型(prototype)创建对象

编程要求

任务描述

本关任务:创建你的第一个 JavaScript 对象。

相关知识

JavaScript 是一种基于对象(Object-based)的语言,在 JavaScript 中,对象的创建和 Java 不同,既有 Java 使用的构造函数方式,也有其他方法。

对象的定义

JavaScript 中的一切都是对象,这是该语言一个很大的特点。像字符串、数组等已经定义的对象叫做内置对象。用户自己也可以定义对象,叫做自定义对象。本实训讲的对象特指自定义对象,自定义对象指数据和函数(又叫方法)的集合。数据指变量名和变量的值构成的组合。如图1所示:

图1

下面介绍五种创建对象的方法,其中通过对象字面量和使用构造函数创建对象最常用。

对象字面量

这是最常用的创建对象的方法,通过新建一个键值对的集合(对象字面量)创建对象,如下:

var song = {name:"Liekkas",time:180,"song language":English,singer: {singerName:"Sofia Jannok",singerAge:30}
};

键值对中的键指的是属性的名字,若其中含有空格,名字需要用双引号包含在内。值指的是属性的值,可以是基本类型:如字符串,数字,布尔型,也可以是一个对象。键值对之间用逗号隔开,最后一个键值对后面没有逗号,所有的键值对在一个大括号中。

通过关键字new创建对象

通过new关键字创建对象也是一个常用的方法。如下:

var Store = new Object();    // 创建对象的一个实例
Store.name = "lofo Market";
Store.location = "NO.13 Five Avenue";
Store.salesVolume = 1000000;

通过上面的代码,我们就能创建一个名为Store的对象。

通过工厂方法创建对象

工厂方法就是通过函数创建对象,函数封装了创建对象的过程。

这是一种通过函数创建对象的方法,函数封装了对象的创建过程,创建新对象时只需要调用该函数即可。这种方法适合于一次创建多个对象。

// 对象的创建函数
function createStoreObject(name,location,salesVolume) {var store = new Object();store.name = name;store.locaion = location;store.salesVolume = salesVolume;store.display = function() {console.log(this.name);};return store;
}
// 利用该函数创建一个对象
var store1 = createStoreObject("panda express","No.1,People Street",200000);

这样就创建了一个名为store1的对象,注意这个对象除了属性之外还有一个方法display。要创建更多的类似store1的对象,直接调用该函数即可。

使用构造函数创建对象

上面虽然也是通过函数创建对象,但不是构造函数,只是普通函数。构造函数名必须以大写字母开头,函数体内没有返回语句。

// 构造函数
function Store(name,location,salesVolume) {this.name = name;this.locaion = location;this.salesVolume = salesVolume;
}
// 创建对象的实例
var myStore = new Store("KeyExp","No.1,L.Street",540000);

上面的代码首先是Store对象的构造函数,然后用该构造函数创建了Store对象的一个实例myStore

使用原型(prototype)创建对象

当我们创建一个函数时,函数就会自动拥有一个prototype属性,这个属性的值是一个对象,这个对象被称为该函数的原型对象。也可以叫做原型。

当用new关键字加函数的模式创建一个对象时,这个对象就会有一个默认的不可见的属性[[Prototype]],该属性的值就是上面提到的原型对象。如图2所示:

图2

JavaScript 中每个对象都有一个属性[[Prototype]],指向它的原型对象,该原型对象又具有一个自己的[[Prototype]],层层向上直到一个对象的原型为null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。如图3所示:

图3

这种方法是对使用构造函数创建对象的改进,使用构造函数创建一个对象时,会把构造函数中的方法(上面的构造函数只有属性的键值对,没有方法)都创建一遍,浪费内存,使用原型不存在这个问题。

function Store() {};
Store.prototype.name = "SF Express";
Store.prototype.locaion = "Hong Kong";
Store.prototype.salesVolume = 1200000000;
// 创建对象
var myStore = new Store();
// 创建一个新的对象
var hisStore = new Store();
hisStore.name = "STO Express";    // 覆盖了原来的name属性

这种方法的好处是,创建一个新的对象时,可以更改部分属性的值。

编程要求

本关的编程任务是补全右侧代码片段中 Begin 至 End 中间的代码,具体要求如下:

  • 使用对象字面量方法创建名为student的对象,有两个属性namegender,他们的值分别是mainJs()函数的参数a和参数b

  • 使用已给的构造函数Car(plate,owner)创建一个对象myCar,它的两个属性的值分别是参数c和参数d

  • 使用原型创建一个对象myJob,它的构造函数是Job(company,salary),它的两个属性的值已经被设置,你需要用参数e覆盖属性company的值;

function Car(plate,owner) {this.plate = plate;this.owner = owner;
}function Job() {};
Job.prototype.company = "myCompany";
Job.prototype.salary = 12000;function mainJs(a,b,c,d,e) {//请在此处编写代码/*********bigin*********/var student = {name: a,gender: b,};var myCar = new Car(c, d);var myJob = new Job();myJob.company = e;/*********end*********/return student.name+student.gender+myCar.plate+myCar.owner+myJob.company;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/38969.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面向物联网行业的异常监控追踪技术解决方案:技术革新与运维保障

在现代高度数字化和互联的环境中,物联网技术已经深入到我们生活的方方面面。特别是在家庭和工业环境中,物联网系列通讯作为连接各类设备的关键枢纽,其稳定性和可靠性显得尤为重要。本文将介绍一种创新的监控系统,旨在实时跟踪和分…

MySQL数据库的主从复制与读写分离

一、MySQL数据库的主从复制 1.主从复制的概述及原理 (1)主从复制的意义 在实际的生产环境中,如果对数据库的读和写都在同一个数据库服务器中操作,无论是在安全性、高可用性还是高并发等各个方面都是完全不能满足实际需求的。因此&#xff…

C语言使用先序遍历创建二叉树

#include<stdio.h> #include<stdlib.h>typedef struct node {int data;struct node * left;struct node * right; } Node;Node * createNode(int val); Node * createTree(); void freeTree(Node * node);void preOrder(Node * node);// 先序创建二叉树 int main()…

【高性能服务器】多进程并发模型

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 对于常见的C/S模型…

事务的影子拷贝-系统架构师(二十)

1、&#xff08;重点&#xff09;企业信息集成按照组织范围分为企业内部的信息集成和外部信息集成。在企业内部信息集成中&#xff0c;&#xff08;&#xff09;实现了不同系统之间的互操作&#xff0c;使的不同系统之间能够实现数据和方法的共享。&#xff08;&#xff09;实现…

QT学习积累——如何提高Qt遍历list的效率

目录 引出Qt遍历list提高效率显示函数的调用使用&与不使用&除法的一个坑 总结自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自定义信号重载带参数的按钮触发信号触发信号拓展 lambda表达式返回值mutable修饰案例 引出 QT学习积累——如何提高Qt遍历list…

CSF视频文件格式转换WMV格式(2024年可用)

如果大家看过一些高校教学讲解视频的话&#xff0c;很可能见过这样一个难得的格式&#xff0c;".csf "&#xff0c;非常漂亮 。 用暴风影音都可以打开观看&#xff0c;会自动下载解码。 但是一旦我们想要利用或者上传视频的时候就麻烦了&#xff0c;一般网站不认这…

为什么PS5运行游戏的效果往往比号称更强大的Xbox Series X更好?

在第九代游戏机即将进入第四个年头之际&#xff0c;有一个问题仍未得到解答&#xff1a;索尼的 PS5 游戏机的性能如何经常超越纸面性能更强大的微软 Xbox X 系列&#xff1f; 几个明显的例子包括《生化危机 4》、《使命召唤&#xff1a;黑色行动&#xff1a;冷战》和新一代更新…

【支撑文档】系统安全保证措施(word原件)

软件安全保证措施word 软件所有全套资料获取进主页或者本文末个人名片直接。

跨平台营销的智能协同:Kompas.ai如何整合多渠道策略

引言 在数字化营销的今天&#xff0c;消费者的注意力分散在多个平台上。品牌要想有效地吸引和保持消费者的关注&#xff0c;就必须采取跨平台营销策略。Kompas.ai&#xff0c;作为一款智能营销工具&#xff0c;能够帮助品牌实现这一目标。 跨平台营销的重要性 跨平台营销能够…

智慧园区大数据云平台建设方案(Word原件)

第一章 项目建设背景及现状 第二章 园区创新发展趋势 第三章 工业园区大数据存在的问题 第四章 智慧工业园区大数据建设目的 第五章 智慧园区总体构架 第六章 系统核心组件 第七章 智慧工业园区大数据平台规划设计 获取方式&#xff1a;本文末个人名片直接获取。 软件资料清单…

超融合服务器挂载硬盘--linux系统

项目中需要增加服务器的硬盘容量&#xff0c;通过超融合挂载了硬盘后&#xff0c;还需要添加到指定的路径下&#xff0c;这里记录一下操作步骤。 一&#xff1a;通过管理界面挂载硬盘 这一步都是界面操作&#xff0c;登录超融合控制云台后&#xff0c;找到对应的服务器&#…

uniapp中实现跳转到外部链接(也就是a标签的功能)

uniapp中实现跳转到外部链接&#xff08;也就是a标签的功能&#xff09; 项目中需要做到跳转到外部链接&#xff0c;网上找了很多都不是很符合自己的要求&#xff0c;需要编译成app后是跳转到游览器打开链接&#xff0c;编译成web是在新窗口打开链接。实现的代码如下&#xff1…

矩阵、混剪、大盘,3大功能升级优化!助力企业高效管理!

在数字化转型的浪潮中&#xff0c;企业对于工具与技术的需求愈发强烈。 为满足市场需求&#xff0c;本月【云略】为各企业上线了便捷功能&#xff0c;赋能企业经营决策和业务增长。 矩阵管理 √【矩阵号管理】抖音支持设置城市IP 内容管理 √【混剪任务】支持关联智能发布计…

PDF文档如何统计字数,统计PDF文档字数的方法有哪些?

在平时使用pdf阅读或者是处理文档的时候&#xff0c;常常需要统计文档的字数。pdf在查看文字时其实很简单。 PDF文档是一种常见的电子文档格式&#xff0c;如果需要对PDF文档中的字数进行统计&#xff0c;可以使用以下方法&#xff1a; Adobe Acrobat DC&#xff1a;Adobe Ac…

AI大模型,爆发了

随着ChatGPT用户增速放缓&#xff0c;AI创业公司马太效应加剧&#xff0c;第一轮AI投资热潮逐渐褪去&#xff0c;AI大模型进入“冷静期”。擅长后发制人的腾讯&#xff0c;姗姗来迟&#xff0c;推出了混元大模型&#xff0c;为这一轮AI热潮画上了句号。 AI大模型&#xff0c;开…

OpenHarmony开发实战:GPIO控制器接口

功能简介 GPIO&#xff08;General-purpose input/output&#xff09;即通用型输入输出。通常&#xff0c;GPIO控制器通过分组的方式管理所有GPIO管脚&#xff0c;每组GPIO有一个或多个寄存器与之关联&#xff0c;通过读写寄存器完成对GPIO管脚的操作。 GPIO接口定义了操作GP…

Langchain-Chatchat本地部署记录,三分钟学会!

1.前言&#xff1a; 最近AI爆发式的火&#xff0c;忆往昔尤记得16,17那会移动互联网是特别火热的&#xff0c;也造富了一批公司和个人&#xff0c;出来了很多精妙的app应用。现在轮到AI发力了&#xff0c;想想自己也应该参与到这场时代的浪潮之中&#xff0c;所以就找了开源的…

【微服务网关——https与http2代理实现】

1.https与http2代理 1.1 重新认识https与http2 https是http安全版本http2是一种传输协议两者并没有本质联系 1.1.1 https与http的区别 HTTP&#xff08;超文本传输协议&#xff09;和 HTTPS&#xff08;安全超文本传输协议&#xff09;是用于在网络上交换数据的两种协议。H…

科普文:一文搞懂jvm原理(三)执行引擎之垃圾回收器

概叙 科普文&#xff1a;一文搞懂jvm(一)jvm概叙-CSDN博客 科普文&#xff1a;一文搞懂jvm原理(二)类加载器-CSDN博客 科普文&#xff1a;一文搞懂jvm原理(三)执行引擎-CSDN博客 科普文&#xff1a;一文搞懂jvm原理(四)运行时数据区-CSDN博客 前面我们介绍了jvm&#xff0c…