JavaScript——对象的创建

news2024/10/5 14:49:35

目录

任务描述

相关知识

对象的定义

对象字面量

通过关键字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.coloradmin.cn/o/1885212.html

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

相关文章

JVM线上监控环境搭建Grafana+Prometheus+Micrometer

架构图 一: SpringBoot自带监控Actuator SpringBoot自带监控功能Actuator&#xff0c;可以帮助实现对程序内部运行情况监控&#xff0c;比如监控内存状况、CPU、Bean加载情况、配置属性、日志信息、线程情况等。 使用步骤&#xff1a; 1. 导入依赖坐标 <dependency><…

H5漂流瓶交友源码_社交漂流瓶H5源码

简介&#xff1a; 一种流行的娱乐性社交新潮流&#xff0c;年轻人玩得比较多。和盲盒有点类似 社交漂流瓶搭建教程 环境&#xff1a;Nginx 1.20.1-MySQL 5.6.50-PHP-7.3 上传源码至网站根目录&#xff0c;创建并导入数据库 数据库信息修改&#xff1a;/config/database.ph…

.net core 的缓存方案

这里主要讲两个缓存的使用&#xff0c;MemoryCache和Redis 先讲讲常见的缓存 1、.net framework web中自带有Cache缓存&#xff0c;这种缓存属于粘性缓存&#xff0c;是缓存到项目中的&#xff0c;项目从服务器迁移的时候缓存的内容也能够随着服务器一起迁移 2、MemoryCache缓存…

聊聊低代码,它到底厉害在哪?

今天想和大家聊聊低代码这个热门话题。 低代码是什么&#xff1f; 简单来说&#xff0c;它是一种通过可视化界面和少量代码就能快速构建应用程序的技术。以往&#xff0c;开发一款应用可能需要数月甚至更长时间&#xff0c;而低代码的出现大大缩短了这个周期。 低代码的发展历…

Spring Boot配置文件properties/yml/yaml

一、Spring Boot配置文件简介 &#xff08;1&#xff09;名字必须为application,否则无法识别。后缀有三种文件类型&#xff1a; properties/yml/yaml&#xff0c;但是yml和yaml使用方法相同 &#xff08;2&#xff09; Spring Boot 项⽬默认的配置文件为 properties &#xff…

Salus: Efficient Security Support for CXL-Expanded GPU Memory——论文泛读

HPCA 2024 Paper CXL论文阅读笔记整理 问题 GPU已成为许多数据密集型应用程序不可或缺的加速器&#xff0c;如科学工作负载、深度学习模型和图分析&#xff0c;这些应用程序对越来越大的内存有着共同的需求。通常&#xff0c;采用统一存储器[12]、[18]、[34]、[67]和多GPU[7]…

2024阿里云大模型自定义插件(如何调用自定义接口)

1&#xff0c;自定义插件入口 2&#xff0c;插件定义&#xff1a;描述插件的参数 2.1&#xff0c;注意事项&#xff1a; 2.1.1&#xff0c;只支持json格式的参数&#xff1b;只支持application/JSON&#xff1b;如下图&#xff1a; 2.1.2&#xff0c;需要把接口描述进行修改&a…

计算机网络 —— 路由协议:RIP、OSPF、BGP、MPLS

路由协议 1. 定义2. IGP2.1 RIP2.2 OSPF 3. BGP4. MPLS 1. 定义 互联网中需要通过路由将数据发送至目标主机。 路由器根据路由控制表(RoutingTable)转发数据包&#xff0c;它根据所收到的数据包中目标主机的IP地址与路由控制表的比较得出下一个应该接收的路由器。 &#xff…

NARF(法线对齐的径向特征)

NARF 全称 normal aligned radial feature(法线对齐的径向特征) &#xff0c;是一种为从深度图像中识别物体而提出的3D关键点检测和描述的算法&#xff0c;该算法由Bastian Steder和 Radu Bogdan Rusu等人于2010年在他们的文章《Point Feature Extraction on 3D Range Scans Ta…

Transformers 介绍和详细说明

Transformers 介绍和详细说明 一、引言 Transformers是一种基于注意力机制的深度学习模型架构&#xff0c;由谷歌团队在2017年的论文《Attention is All You Need》中首次提出。这一模型架构在自然语言处理&#xff08;NLP&#xff09;领域取得了显著成就&#xff0c;并迅速扩…

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

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

恶意域名检测研究与应用综述

域名攻击发展 使用 DGA 的优势在于模糊了控制服务器的节点位置&#xff0c;该方法的灵活性还让网络安全管理员无法阻止所有可能的域名&#xff0c;并且注册一些域名对攻击者来说成本很低。利用 DGA 域名实施的攻击是网络安全中重要的攻击形式。因此&#xff0c;捕获由恶意软件生…

【CentOS7.6】yum 报错:Could not retrieve mirrorlist http://mirrorlist.centos.org

一、报错 1.报错内容如下 在使用 yum makecache 命令时报错&#xff0c;在 yum install -y xxx 的时候报错等等 [roothcss-ecs-a901 yum.repos.d]# yum makecache Loaded plugins: fastestmirror Determining fastest mirrors Could not retrieve mirrorlist http://mirrorl…

第十一章 Nest 创建动态模块

在 NestJS 中&#xff0c;动态模块允许在运行时动态添加和删除模块。这对于创建可扩展的和灵活的应用程序非常有用。 新建一个项目&#xff1a; nest new dynamic-module -p npm创建一个crud的模块&#xff1a; nest g resource test启动项目 浏览器访问 可以发现模块生效了 …

哪些品牌的充电宝牌子比较好用?性价比无线磁吸充电宝推荐

经常外出的朋友&#xff0c;不管是旅行聚会&#xff0c;或是商务出差&#xff0c;一旦手机电量告急&#xff0c;总会令人心生焦虑。共享充电宝不仅充电速度迟缓&#xff0c;而且价格高昂&#xff0c;有线充电宝又显得沉重&#xff0c;线缆还杂乱无章。现在随着科技的发展&#…

将exe文件添加到注册表中,实现开机时自动运行

目录 一、前言 二、代码 三、使用步骤 1.编译生成exe文件、 2.以管理员身份运行代码 3.打开注册表&#xff0c;验证结果 一、前言 在Windows操作系统中&#xff0c;将exe文件的路径添加到注册表下&#xff0c;主要用于实现程序的开机自动运行功能。 注册表路径为&#xf…

6.The hardest part about learing hard things(学一件难的事,难在哪里)

I’ve been recording a lot of podcast interviews for my upcoming book, Ultralearning.One of the reurring themes I’ve noticed in our conversations is that how people feel about learning is the overwhelming cause of the results they experience. 我为我的新书…

2024年6月总结及随笔之打卡网红点

1. 回头看 日更坚持了547天。 读《人工智能时代与人类未来》更新完成读《AI未来进行式》开更并更新完成读《AI新生&#xff1a;破解人机共存密码》开更并持续更新 2023年至2024年6月底累计码字1267912字&#xff0c;累计日均码字2317字。 2024年6月码字90659字&#xff0c;…

Git学习(常用的一些命令)

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 配置相关&#xff1a; 创建与克隆仓库&#xff1a; 基本操作&#xff1a; 分支操作&#xff1a; 远程仓库操作&#xff1a…

mac 安装nvm的教程

在macOS上切换Node.js版本&#xff0c;可以使用nvm&#xff08;Node Version Manager&#xff09;。以下是安装nvm和切换Node.js版本的步骤&#xff1a; 安装nvm 下载方式 终端复制输入&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.…