【JavaScript对象】

news2024/11/25 21:23:16

JavaScript对象

  • 1 本节目标
  • 2 对象
    • 2.1 什么是对象
    • 2.2 为什么需要对象
  • 3 创建对象的三种方式
    • 3.1 利用字面量创建对象
    • 3.2 利用new Object创建对象
    • 3.3 利用构造函数创建对象
    • 3.4 变量、属性、函数、方法总结
    • 3.5 构造函数和对象
  • 4 new关键字
  • 5 遍历对象属性

1 本节目标

  • 说出为什么需要对象
  • 使用字面量创建对象
  • 使用构造函数创建对象
  • 说出new的执行过程
  • 遍历对象

2 对象

2.1 什么是对象

  • 对象是一个具体的事物。
  • 在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
  • 对象是由属性和方法组成的。
    1>属性:事物的特征,在对象中用属性来表示(常用名词)
    2>方法:事物的行为,在对象中用方法来表示(常用动词)

2.2 为什么需要对象

  • 保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组.
  • 若要保存一个人的完整信息,如使用数组:var arr = ['张三疯', '男', 128, 154];。JS中的对象表达结构更清晰,更强大。张三疯的个人信息在对象中的表达结构如下:
// 张三疯.姓名 = '张三疯';
person.name = '张三疯';
// 张三疯.性别 = '男';
person.sex = '男';
// 张三疯.年龄 = 128;
person.age = 128;
// 张三疯.身高 = 154;
person.height = 154;

3 创建对象的三种方式

  • 在JavaScript中,现阶段我们可以采用三种方式创建对象(object):
    1>利用字面量创建对象
    2>利用new Object创建对象
    3>利用构造函数创建对象

3.1 利用字面量创建对象

  • 对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。
// 第一步:创建对象
// var obj = {}; // 创建了一个空的对象
var obj = {
	uname:'张三疯',
	age: 18,
	sex: '男',
	sayHi: function() {
		console.log('hi~');
	}
}
  • 注意:
    1>里面的属性或者方法我们采取键值对的形式(键 属性名 : 值 属性值)。
    2>多个属性或者方法中间用逗号隔开。
    3>方法冒号后面跟的是一个匿名函数。
// 第二步:使用对象
// 调用对象的属性方法一:我们采取的是:对象名.属性名
console.log(obj.uname);
// 调用对象的属性方法二:我们采取的是:对象名['属性名']
console.log(obj['age']);
// 调用对象的方法sayHi:我们采取的是:对象名.方法名() 千万别忘记加小括号
obj.sayHi();

3.2 利用new Object创建对象

var obj = new Object(); // 创建了一个空的对象
// 追加对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
	console.log('hi~');
}
  • 注意:
    1>我们是利用等号赋值的方式添加对象的属性和方法。
    2>每个属性和方法之间用分号结束。
// 第二步:使用对象
// 调用对象的属性方法一:我们采取的是:对象名.属性名
console.log(obj.uname);
// 调用对象的属性方法二:我们采取的是:对象名['属性名']
console.log(obj['age']);
// 调用对象的方法sayHi:我们采取的是:对象名.方法名() 千万别忘记加小括号
obj.sayHi();

3.3 利用构造函数创建对象

  • 之所以使用构造函数,就是因为前面两种创建对象的方式一次只能创建一个对象。要创建多个对象,里面很多的属性和方法是大量相同的,用前两种方法,我们只能复制。因此我们可以利用函数的方法,重复这些相同的代码,我们把这个函数称为构造函数。
  • 又因为这个函数不一样,里面封装的不是普通代码,而是对象,因此构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。
  • 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,他总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
// 构造函数的语法格式:
function 构造函数名() {
	this.属性 =;
	this.方法 = function() {}
}
new 构造函数名();
// 举例:
// 我们需要创建四大天王的对象  相同的属性有:名字 年龄 性别   相同的方法:唱歌
function Star(uname,age,sex) {
	this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
		console.log(sang);
    }
}
var ldh = new Star('刘德华',18,'男'); // 调用函数返回的是一个对象
console.log(ldh.name);
console.log(ldh['age']);
ldh.sing('冰雨');
var zxy = new Star ('张学友',19,'男');
  • 注意:
    1>构造函数名字的首字母要大写。
    2>构造函数不需要return就可以返回结果。
    3>调用构造函数,必须使用new。
    4>我们只要new Star()调用函数,就创建了一个对象 ldh{}。
    5>属性和方法前必须添加this。

3.4 变量、属性、函数、方法总结

  • 变量和属性的相同点
// 他们都是来存储数据的
var num = 10; // 变量
var obj = {
	age = 18; // 属性
}
console.log(obj.age);
  • 变量和属性的不同点
    1>变量:单独声明并赋值,使用时直接写变量名(单独存在)
    2>属性:在对象里面的,不需要声明,使用的时候必须是对象.属性
  • 函数和方法的相同点:都是实现某种功能,做某件事。
var obj = {
	// 方法
	fn: function() {

	}
}
// 函数
function fn() {

}
fn();
  • 函数和方法的不同点
    1>函数是单独声明并且调用的
    2>方法在对象里面,调用的时候是对象.方法()

3.5 构造函数和对象

// 1.构造函数 明星 泛指的某一大类 类似于java语言里面的 类(class)
function Star(uname,age,sex) {
	this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
		console.log(sang);
    }
}
// 2.对象 特指 是一个具体的事物 刘德华 == {name: '刘德华', age: 18, sex: '男', sing: ƒ}
var ldh = new Star('刘德华',18,'男'); // 调用函数返回的是一个对象
console.log(ldh);
// 3.我们利用构造函数创建对象的过程,我们也称为对象的实例化
  • 构造函数,如Star(),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类(class)。
  • 创建对象,如new Star(),特指某一个,通过new关键字创建对象的过程我们也可以称为对象实例化。
    在这里插入图片描述

4 new关键字

  • new关键字执行过程:
    1> new 构造函数可以在内存中创建一个空的对象。
    2> this 就会指向刚才创建的空对象。
    3> 执行构造函数里面的代码,给空的对象里面添加属性和方法。
    4>返回这个对象(所以构造函数里面不需要return)。
    在这里插入图片描述

5 遍历对象属性

  • for...in语句用于对数组或者对象的属性进行循环操作。
  • 语法格式:
for ( 变量 in 对象) {
            
}
  • 举例:
var obj = {
	name: '小王同学',
	age: 18,
	sex: '女'
	fn: function() {}
}
/* console.log(obj.name);
console.log(obj.age);
console.log(obj.sex); */

for(var k in obj) {
	console.log(k); // 输入k变量 得到的是属性名 name age sex
	console.log(obj[k]); // 输入obj[k] 得到的是属性值  小王同学 18 女
}

在这里插入图片描述

  • 我们使用for in里面的变量,我们喜欢写k或者key

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

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

相关文章

[附源码]计算机毕业设计JAVA小区物业管理系统论文

[附源码]计算机毕业设计JAVA小区物业管理系统论文 项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM my…

Qt编写视频监控系统67-录像计划(支持64通道7*24录像设置)

一、前言 录像计划这个功能一直挂了很久,之前做的也都有保存视频文件功能,其中还分了三大种,第一种是手动开启和停止录像;第二种是按照指定时长比如10s保存文件;第三种是定时30分钟一个文件一直保存。这三种功能直接写…

转铁蛋白修饰的去氢骆驼蓬碱磁纳米脂质体TF-HM-MPS

转铁蛋白又名运铁蛋白(Transferrin,TRF、Tf),负责运载由消化管吸收的铁和由红细胞降解释放的铁。以三价铁复合物(Tf-Fe3)的形式进入骨髓中,供成熟红细胞的生成。转铁蛋白主要存在于血浆中&#…

Kafka牛逼在哪里?

一、Kafka存在哪些方面的优势 1. 多生产者 可以无缝地支持多个生产者,不管客户端在使用单个主题还是多个主题。 2. 多消费者 支持多个消费者从一个单独的消息流上读取数据,而且消费者之间互不影响。 3. 基于磁盘的数据存储 支持消费者非实时地读取…

易基因|DNA甲基化揭示应激反应影响婴儿免疫相关基因的表观遗传调控机制 | 表观发育

易基因|DNA甲基化揭示应激反应影响婴儿免疫相关基因的表观遗传调控机制 | 表观发育 大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因。 2021年,《Brain, Behavior, and Immunity》杂志发表题为“Biobehavioral org…

3-FreeRTOS任务和协程

概述 “任务”的特征 简单来说,FreeRTOS实时系统能够创建多个独立的任务,任务之间互不干扰。任务创建之后并不是一起运行的,而是通过优先级顺序进行任务的调用,和调度也没有依赖关系。所以不管什么时候程序只能执行一个任务&…

MBA管理类联考英语二题型答题时间及次序问题

还有不到一个月时间,2023年MBA联考也进入到最后的收官阶段,这个阶段对于多数已经系统复习过的考生,一般需要进行通盘梳理备考,而不是专注于单个模块的复习。在做试卷或真题的过程中,如何才能更有利于分数这个问题需要大…

[附源码]Python计算机毕业设计Django电影院网上售票系统

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

Mysql:sql去重的几种方式(大数据hive也可参考)

文章目录前言准备创建表测试数据目标探索distinct 去重group by 去重实现方案方案一方案二方案三前言 我们做数据分析的时候经常会遇到去重问题,下面总结 sql 去重的几种方式,后续如果还有再补充,大数据分析层面包括 hive、clickhouse 也可参…

TStor OneCOS 技术专栏——轻松单桶万亿

TStor OneCOS简介 TStor OneCOS海量对象存储(后面简称OneCOS),是基于腾讯云公有云存储架构打造的完全自研的分布式软件定义存储,轻松支持单桶万亿对象和EB级容量,集群容量无限伸缩,同时支持高密大盘等多种…

【个人记录 | UNet | 整理ing】

【代码】 麋鹿 读后感: V1讲框架流程、V2V3狠真实,日常各种报错|预处理|size|格式|维度;“又出错了 狠棒狠棒 T T” 看V1脑袋有个框架,后面两个有较多设计预处理等报错.注意num_classes和weight_path V1(视频教程)、…

标记二肽Dansyl-Ala-Arg、87687-46-5

二肽Dansyl-Ala-Arg 编号:200087 CAS号:87687-46-5 三字母:Dansyl-Ala-Arg-COOH 描 述:羧肽酶 M 的荧光底物。由于底物和裂解产物 Dansyl-Ala-OH 具有同等荧光(λex 340 nm;λem 495 nm)&…

PyQt5安装详细教程

先展示一下安装好后的效果如下: 一、安装PyQt5 1、通过使用豆瓣镜像在命令提示符 (WINR)里输入cmd打开窗口进行安装: 点击确定后 输入pip install PyQt5 -i https://pypi.douban.com/simple,等待安装 当下载界面出现Successfully&#xff08…

[附源码]计算机毕业设计springboot良辰之境影视评鉴系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

小红书数据分析工具 | 新中式内容营销怎么做?

一句周杰伦的“国风就是最diao的”,让许多博主纵身涌入一片创作之海,吹起了暗藏在每一个中国人民心底的中国之风。新中式作为一直新锐队伍,发展潜力仍然很大,由于新中式风格所喜爱的人群是特定的,新中式服饰如何在小红…

吉时利2600A系列/2611A数字源表

2600A系列数字源表 吉时利最新的I-V源-测量仪器,既可以用作桌面级I-V特性分析工具,也可以成为多通道I-V测试系统的组 成部分。对于桌面级的应用,2600A系列提供一款嵌入式TSP Express测试软件,允许用户快速、方便地进行常 用的I-V测…

Kettle入门教程

目录 一、Kettle是什么 二、Kettle的两种设计 三、Kettle核心组件 四、安装与启动 五、使用 5.1 简单介绍 5.2 输入 5.3 输出 5.4 转换 5.5 脚本 一、Kettle是什么 Kettle最早是一个开源的ETL(Extract-Transform-Load,数据仓库技术&#xff09…

[附源码]计算机毕业设计springboot基于Web的软考题库平台

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

8、多进程之间的通信

多进程之间的常用通信方法有两种,及Queue和Pipe 一、Queue Queue([maxsize]):创建共享的进程队列。maxsize是队列中允许的最大项数。如果省略此参数,则无大小限制。底层队列使用管道和锁定实现。另外,还需要运行支持线程以便队列中…

Docker网络模式之bridge-尚文网络xUP楠哥

~~全文共1572字,阅读需约5分钟。 进Q群11372462,领取专属报名福利,包含云计算学习路线图代表性实战训练大厂云计算面试题资料! 当docker已经启动后,会生成一个名字叫做docker0的虚拟网桥,给到一个默认的IP地址为172.1…