零基础学习JS--基础篇--使用对象

JavaScript 的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合,一个属性包含一个名和一个值。一个属性的值可以是函数,这种情况下属性也被称为方法。除了浏览器里面预定义的那些对象之外,你也可以定义你自己的对象。本章节讲述了怎么使用对象、属性、函数和方法,怎样实现自定义对象。

对象概述

javascript 中的对象 (物体),和其他编程语言中的对象一样,可以比照现实生活中的对象 (物体) 来理解它。

在 javascript 中,一个对象可以是一个单独的拥有属性和类型的实体。我们拿它和一个杯子做下类比。一个杯子是一个对象 (物体),拥有属性。杯子有颜色,图案,重量,由什么材质构成等等。同样,javascript 对象也有属性来定义它的特征。

对象和属性

一个 javascript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 javascript 变量基本没什么区别,仅仅是属性属于某个对象。属性定义了对象的特征。你可以通过点符号来访问一个对象的属性。

objectName.propertyName;

和其他 javascript 变量一样,对象的名字 (可以是普通的变量) 和属性的名字都是大小写敏感的。你可以在定义一个属性的时候就给它赋值。例如,我们创建一个 myCar 的对象然后给他三个属性,make,model,year。具体如下所示:

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

对象中未赋值的属性的值为undefined(而不是null)。

myCar.noProperty; // undefined

JavaScript 对象的属性也可以通过方括号访问或者设置. 对象有时也被叫作关联数组,因为每个属性都有一个用于访问它的字符串值。例如,你可以按如下方式访问 myCar 对象的属性:

myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

你也可以通过存储在变量中的字符串来访问属性:

var propertyName = "make";
myCar[propertyName] = "Ford";propertyName = "model";
myCar[propertyName] = "Mustang";

你可以在 for...in 语句中使用方括号标记以枚举一个对象的所有属性。为了展示它如何工作,下面的函数当你将对象及其名称作为参数传入时,显示对象的属性:

function showProps(obj, objName) {var result = "";for (var i in obj) {if (obj.hasOwnProperty(i)) {result += objName + "." + i + " = " + obj[i] + "\n";}}return result;
}

因而,对于函数调用 showProps(myCar, "myCar") 将返回以下值:

myCar.make = Ford;
myCar.model = Mustang;
myCar.year = 1969;

枚举一个对象的所有属性

有三种原生的方法用于列出或枚举对象的属性:

  • for...in 循环 该方法依次访问一个对象及其原型链中所有可枚举的属性。
  • Object.keys(o) 该方法返回对象 o 自身包含(不包括原型中)的所有可枚举属性的名称的数组。
  • Object.getOwnPropertyNames(o) 该方法返回对象 o 自身包含(不包括原型中)的所有属性 (无论是否可枚举) 的名称的数组。

创建新对象

JavaScript 拥有一系列预定义的对象。另外,你可以创建你自己的对象。从 JavaScript 1.2 之后,你可以通过对象初始化器(Object Initializer)创建对象。或者你可以创建一个构造函数并使用该函数和 new 操作符初始化对象。

使用对象初始化器:

除了通过构造函数创建对象之外,你也可以通过对象初始化器创建对象。使用对象初始化器也被称作通过字面值创建对象。

通过对象初始化器创建对象的语法如下:

var obj = {property_1: value_1, // property_# 可以是一个标识符...2: value_2, // 或一个数字...["property" + 3]: value_3, //  或一个可计算的 key 名...// ...,"property n": value_n,
}; // 或一个字符串

这里 obj 是新对象的名称,每一个 property_i 是一个标识符(可以是一个名称、数字或字符串字面量),并且每个 value_i 是一个其值将被赋予 property_i 的表达式。obj 与赋值是可选的;如果你不需要在其他地方引用对象,你就不需要将它赋给一个变量。(注意在接受一条语句的地方,你可能需要将对象字面量括在括号里,从而避免将字面量与块语句相混淆)

是不是觉得而很复杂?看下面例子就不再复杂了;

下例创建了有三个属性的 myHonda 对象。注意它的 engine 属性也是一个拥有自己属性的对象。

var myHonda = { color: "red", wheels: 4, engine: { cylinders: 4, size: 2.2 } };
使用构造函数:

作为另一种方式,你可以通过两步来创建对象:

  1. 通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。
  2. 通过 new 创建对象实例。

为了定义对象类型,为对象类型创建一个函数以声明类型的名称、属性和方法。例如,你想为汽车创建一个类型,并且将这类对象称为 car ,并且拥有属性 make, model,和 year,你可以创建如下的函数:

function Car(make, model, year) {this.make = make;this.model = model;this.year = year;
}

注意通过使用 this 将传入函数的值赋给对象的属性。

现在你可以象这样创建一个 mycar 对象:

var mycar = new Car("Eagle", "Talon TSi", 1993);

该创建了 mycar 并且将指定的值赋给它的属性。因而 mycar.make 的值是字符串 "Eagle", mycar.year 的值是整数 1993,依此类推。

你可以通过调用 new 创建任意数量的 car 对象。例如:

var kenscar = new Car("Nissan", "300ZX", 1992);
var vpgscar = new Car("Mazda", "Miata", 1990);

一个对象的属性值可以是另一个对象。例如,假设你按如下方式定义了 person 对象:

function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;
}

然后按如下方式创建了两个 person 实例:

var rand = new Person("Rand McKinnon", 33, "M");
var ken = new Person("Ken Jones", 39, "M");

那么,你可以重写 car 的定义以包含一个拥有它的 owner 属性,如:

function Car(make, model, year, owner) {this.make = make;this.model = model;this.year = year;this.owner = owner;
}

你可以按如下方式创建新对象:

var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
var car2 = new Car("Nissan", "300ZX", 1992, ken);

注意在创建新对象时,上面的语句将 rand 和 ken 作为 owner 的参数值,而不是传入字符串字面量或整数值。接下来你如果想找出 car2 的拥有者的姓名,你可以访问如下属性:

car2.owner.name;

注意你总是可以为之前定义的对象增加新的属性。例如,语句

car1.color = "black";

为 car1 增加了 color 属性,并将其值设为 "black." 然而,这并不影响其他的对象。想要为某个类型的所有对象增加新属性,你必须将属性加入到 car 对象类型的定义中,即为对象类型定义属性。

为对象类型定义属性:

你可以通过 prototype属性为之前定义的对象类型增加属性。这为该类型的所有对象,而不是仅仅一个对象增加了一个属性。下面的代码为所有类型为 car 的对象增加了 color 属性,然后为对象 car1 的 color 属性赋值:

Car.prototype.color = null;
car1.color = "black";

对象属性索引

在 JavaScript 1.1 及之后版本中,如果你最初使用名称定义了一个属性,则你必须通过名称来访问它;而如果你最初使用序号来定义一个属性,则你必须通过索引来访问它。

这个限制发生在你通过构造函数创建一个对象和它的属性(就象我们之前通过 Car 对象类型所做的那样)并且显式地定义了单独的属性(如 myCar.color = "red")之时。如果你最初使用索引定义了一个对象属性,例如 myCar[5] = "25",则你只可能通过 myCar[5] 引用它。

定义方法

一个方法是关联到某个对象的函数,或者简单地说,一个方法是一个值为某个函数的对象属性。定义方法就像定义普通的函数,除了它们必须被赋给对象的某个属性。

objectName.methodname = function_name;var myObj = {myMethod: function(params) {// ...do something}// 或者 这样写也可以myOtherMethod(params) {// ...do something else}
};

这里 objectName 是一个已经存在的对象,methodname 是方法的名称,而 function_name 是函数的名称。

你可以在对象的上下文中象这样调用方法:

object.methodname(params);

你可以在对象的构造函数中包含方法定义来为某个对象类型定义方法。例如,你可以为之前定义的 car 对象定义一个函数格式化并显示其属性:

function displayCar() {var result = `A Beautiful ${this.year} ${this.make} ${this.model}`;pretty_print(result);
}

这里 pretty_print 是一个显示横线和一个字符串的函数。注意使用 this 指代方法所属的对象。

你可以在对象定义中通过增加下述语句将这个函数变成 Car 的方法:

this.displayCar = displayCar;

因此,Car 的完整定义看上去将是:

function Car(make, model, year, owner) {this.make = make;this.model = model;this.year = year;this.owner = owner;this.displayCar = displayCar;
}

然后你可以按如下方式为每个对象调用 displayCar 方法:

car1.displayCar();
car2.displayCar();

通过this引用对象

JavaScript 有一个特殊的关键字 this,它可以在方法中使用以指代当前对象。例如,假设你有一个名为 validate 的函数,它根据给出的最大与最小值检查某个对象的 value 属性:

function validate(obj, lowval, hival) {if (obj.value < lowval || obj.value > hival) {alert("Invalid Value!");}
}

定义getter和setter

一个 getter 是一个获取某个特定属性的值的方法。一个 setter 是一个设定某个属性的值的方法。你可以为预定义的或用户定义的对象定义 getter 和 setter 以支持新增的属性。定义 getter 和 setter 的语法采用对象字面量语法。

下面例子描述了 getter 和 setter 是如何为用户定义的对象 o 工作的。

var o = {a: 7,get b() {return this.a + 1;},set c(x) {this.a = x / 2;},
};console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25

o 对象的属性如下:

  • o.a — 数字
  • o.b — 返回 o.a + 1 的 getter
  • o.c — 由 o.c 的值所设置 o.a 值的 setter

原则上,getter 和 setter 既可以:

  • 使用 使用对象初始化器 定义
  • 也可以之后随时使用 getter 和 setter 添加方法添加到任何对象

当使用 使用对象初始化器 的方式定义 getter 和 setter 时,只需要在 getter 方法前加 get,在 setter 方法前加 set,当然,getter 方法必须是无参数的,setter 方法只接受一个参数 (设置为新值),例如:

var o = {a: 7,get b() {return this.a + 1;},set c(x) {this.a = x / 2;},
};

删除属性

你可以用 delete 操作符删除一个不是继承而来的属性。下面的例子说明如何删除一个属性:

//Creates a new object, myobj, with two properties, a and b.
var myobj = new Object();
myobj.a = 5;
myobj.b = 12;//Removes the a property, leaving myobj with only the b property.
delete myobj.a;

如果一个全局变量不是用 var 关键字声明的话,你也可以用 delete 删除它:

g = 17;
delete g;

比较对象

在 JavaScript 中 objects 是一种引用类型。两个独立声明的对象永远也不会相等,即使他们有相同的属性,只有在比较一个对象和这个对象的引用时,才会返回 true.

// 两个变量,两个具有同样的属性、但不相同的对象
var fruit = { name: "apple" };
var fruitbear = { name: "apple" };fruit == fruitbear; // return false
fruit === fruitbear; // return false

备注: "===" 运算符用来检查数值是否相等:1 === "1"返回 false,而 1 == "1" 返回 true

// 两个变量,同一个对象
var fruit = { name: "apple" };
var fruitbear = fruit; // 将 fruit 的对象引用 (reference) 赋值给 fruitbear
// 也称为将 fruitbear“指向”fruit 对象
// fruit 与 fruitbear 都指向同样的对象
fruit == fruitbear; // return true
fruit === fruitbear; // return true

了解更多关于比较操作符的用法,查看 Comparison operators (en-US).

附:以上内容均为个人在MDN网站上学习JS的笔记,若有侵权,将在第一时间删除,若有错误,将在第一时间修改。

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

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

相关文章

苹果cms模板保护设置,防止被扒

苹果cms模板保护设置&#xff0c;防止被扒 如今互联网时代&#xff0c;网站模板前端被扒是常有的事&#xff0c;如何防止模板数据被扒&#xff1f; 保护设置方法&#xff1a; 登录宝塔 找到安装模板的网站 设置禁止访问文件 方法参考截图后缀填&#xff1a;php|html 目录填&a…

OA系统中的九大常用审批场景,你都晓得吗?

Hi&#xff0c;我是贝格前端工场&#xff0c;今天继续来剖析OA的功能&#xff0c;这次重点分析审批功能&#xff0c;欢迎老铁们点赞评论转发。 一、OA的审批功能和流程 OA的审批功能是指在办公自动化系统中&#xff0c;通过电子化的方式实现对各种申请、请求或业务流程的审批管…

项目管理工具及模板(甘特图、OKR周报、任务管理、头脑风暴等)

项目管理常用模板大全&#xff1a; 1. 项目组OKR周报 2. 项目组传统周报工作法 3. 项目甘特图 4. 团队名单 5. 招聘跟进表 6. 出勤统计 7. 年度工作日历 8. 项目工作年计划 9. 版本排期 10. 项目组任务管理 11. 项目规划模板 12. 产品分析报告 13. 头脑风暴 信息化项目建设全套…

阻塞队列学习

1、什么是阻塞队列&#xff1f; 顾名思义&#xff0c;就是支持阻塞的队列&#xff0c;相比于其他的队列&#xff0c;阻塞队列支持以下特性&#xff1a; 队列为空的时候&#xff0c;获取元素的线程会等待队列变为非空。队列为满的时候&#xff0c;存储元素的线程会等待队列可以…

Python 单元测试

本篇为Python的单元测试的方法及示例 目录 概念 结果 示例 对函数进行测试 创建函数文件 创建测试文件 测试结果 对类进行测试 创建待测试类 创建测试文件 文档测试 创建函数 进行测试 总结 概念 用来对一个函数、一个类或者一个模块来进行正确性校验工作 结果 …

提取B站视频教程详情

提取B站视频教程详情 背景 B站这个视频列表是真的体验感太差了,有时候想把章节复制下来,再对应的章节下面做笔记,实在是太难搞了,于是就有了这篇文文章 根据关键字获取视频id Test public void list() {String url "https://api.bilibili.com/x/web-interface/wbi/sea…

虚拟机(KVM)克隆

当需要批量部署虚拟机时&#xff0c;可以使用克隆虚拟机的方式来进行。 使用图形界面来克隆虚拟机。 [rootzhoujunru_node1 zhou]# virsh list --allId Name State ------------------------------ vm01 shut off- vm01-clone shut off克隆完成。

Django入门 整体流程跑通

Django学习笔记 一、Django整体流程跑通 1.1安装 pip install django //安装 import django //在python环境中导入django django.get_version() //获取版本号&#xff0c;如果能获取到&#xff0c;说明安装成功Django目录结构 Python310-Scripts\django-admi…

Centos7 安装mongodb 7.0

官方手册参考&#xff1a; https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-red-hat/ Mongodb支持的版本 安装 MongoDB 社区版 按照以下步骤使用包管理器安装 MongoDB Community Edition yum。 配置包管理系统 ( yum) 创建一个/etc/yum.repos.d/mongodb-o…

Mabatis缓存详细介绍

MyBatis缓存分为一级缓存和二级缓存&#xff0c;是 MyBatis 中用于提高性能的两种缓存机制。 一级缓存 定义&#xff1a; 一级缓存指的是在同一个 SqlSession 中执行相同的查询语句时&#xff0c;第二次及后续的查询会直接从内存中获取结果&#xff0c;而不需要再次查询数据库…

容量治理三板斧:扩容、限流与降级

前言 随着现代软件系统日益复杂和用户规模的不断增长&#xff0c;分布式架构成为了保持系统高可用性与高性能的标准解决方案。然而&#xff0c;随之而来的是对系统容量治理的新挑战。在这样的背景下&#xff0c;容量治理成为了分布式系统设计和运维中不可或缺的一环。要确保系…

Python 主线任务之列表和操作列表,知其然知其所以然【玩转Python】

主线任务 主线任务之数据类型已进行66.6%&#xff0c;今日主线任务为“列表和操作列表”的了解和掌握。了解“列表”是什么的同时也不要忽略“怎么用”。即"知其然知其所以然"&#xff0c;方能达到学习的更优效果。 接下来让我们一起开启今日份的Python的主线任务。…

Orange3数据预处理(转换器组件)

该组件接收数据&#xff0c;然后重新应用之前在模板数据上执行的转换。 这些转换包括选择变量的子集以及从数据中出现的其他变量计算新的变量&#xff0c; 例如&#xff0c;离散化、特征构建、主成分分析&#xff08;PCA&#xff09;等。 在Orange3中&#xff0c;描述的这个组件…

php运行报错: Class ‘SimpleXMLElement‘ not found in

前言 CentOS7php 8.1.27CentOS7 利用remi yum源安装php8.1 php运行报错&#xff1a; Class ‘SimpleXMLElement’ not found in [12-Mar-2024 05:47:29 UTC] PHP Warning: Undefined array key "token" in /data/www/a.php on line 3 [12-Mar-2024 05:47:29 UTC]…

初窥机器学习

人工智能 近几年来&#xff0c;人工智能&#xff08;AI&#xff09;已成为家喻户晓的术语&#xff0c;我们在游戏、电影&#xff08;还记得J.A.R.V.I.S吗&#xff1f;&#xff09;和书籍中经常看到它的提及和描绘&#xff0c;但人工智能究竟是什么呢&#xff1f; 人工智能简单…

Linux下阻塞IO驱动实验实例三

一. 简介 前面两篇学习了两种针对应用程序阻塞式访问设备时,驱动的处理方法。文章地址如下: Linux下阻塞IO驱动实验实例一-CSDN博客 Linux下阻塞IO驱动实验实例二-CSDN博客 本文继续学习另外一种针对阻塞式访问设备,驱动的实现方式,核心还是使用等待队列的机制。 二. …

【Python】新手入门学习:什么是硬编码?如何避免硬编码?

【Python】新手入门学习&#xff1a;什么是硬编码&#xff1f;如何避免硬编码&#xff1f; &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教…

Python爬虫-使用Prefect框架实现一个可视化爬虫项目

前言 本文是该专栏的第19篇,后面会持续分享python爬虫干货知识,记得关注。 相信有的同学,在处理爬虫项目的时候,有时也会需要你将爬虫项目进行一个可视化展示,方便管理者能及时详细的了解当前爬虫任务的执行进度以及执行情况,甚至需要做一个爬虫监控预警的可视化任务。 …

初学Vue+Element——Element使用

0 引言 前端的开发模式为MVVM(Model-View-ViewModel)&#xff0c;而Vue侧重于VM开发&#xff0c;主要用于数据绑定到视图的&#xff0c;而ElementUI则侧重于V开发的前端框架&#xff0c;主要用于开发美观的页面的。 1 ElementUI介绍 Element&#xff1a;是饿了么公司前端开发…

项目实战-tpshop商城项目

项目实战-tpshop商城项目 环境部署准备软件工具准备远程连接测试远程连接测试-查看虚拟机IP地址远程连接测试-检测本机与虚拟机是否连通远程连接测试-通过远程工具连接linux服务器 常见问题处理 环境部署项目技术架构介绍部署tpshop项目-tpshop验证数据库验证用户信息表熟悉商品…