JavaScript 对象

最新推荐文章于 2022-11-13 21:39:33 发布
最新推荐文章于 2022-11-13 21:39:33 发布
阅读量346 收藏
点赞数
分类专栏： HTML+CSS+JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51596354/article/details/123177507
版权

JavaScript对象

学习目标

  1. 掌握对象的定义
  2. 掌握对象在程序中使用和实现 重点
  3. 掌握系统自带对象的使用方法 重点
  4. 掌握Math对象的内置函数 重点
  5. 掌握String对象的内置函数 重点 难点
  6. 掌握Date对象的内置函数 重点
  7. 掌握Array对象的内置函数 重点

JavaScript 对象

对象的单词是object（目标；物体），对象抽象的理解就是显示生活中的任何一个事物（可以是具体存在的，也可以是虚拟的），如：一个人、一架飞机、一个商品等等。

而在程序代码中对象就表现为变量和函数。如：现实中的人和软件中的会员

人 ——> 会员
名字 张三 ——> 真实姓名 张三 var $realname=“张三”
小名 小三 ——> 昵称 张大仙 var $nickname=“张大仙”
性别 男 ——> 性别 女 var $sex=“女”
生日 1999/1/1 ——> 生日 1996/12/12 var $birthday="1996-12-12
籍贯 贵州贵阳 ——> 籍贯 北京 var $location=“北京”

上面这种情况，会员对象在程序中就是多个变量组成的，而有些情况只有变量是无法表示一个对象的，需要使用函数来共同表示。如：

对话框对象Dialog
标题文字 温馨提示 var $title=“温馨提示”
内容文字 操作成功 var $content=“操作成功”
底部文字 感谢支持 var $thinks=“感谢支持”
确定按钮 显示 function show(){//代码}
确定按钮 隐藏 function hide(){//代码}
确定按钮 确定 function sure(){//代码}
取消按钮 取消 function cancel(){//代码}

所以，在程序代码中就是使用变量和函数共同来描述一个对象。

  • 变量在对象中叫做属性（成员变量）
  • 函数在对象中叫做操作（成员函数）

创建对象

1、通过new Object()创建
案例01
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
<script type="text/javascript">
    person=new Object();
    person.realname="张三";
    person.nickname="张大仙";
    person.age=23;
    person.sex="男";
    
    document.write(person.realname);
</script>
</html>

输出：张三

2、通过{‘attribute’:“张三”}创建
案例02
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        person = {
   
            'realname':"张三",
            'nickname':"张大仙",
            'age':23,
            'sex':"男",
            "toString":function(){
   
                console.log("你好！")
            }
        };

        document.write(person.realname);
        person.toString();
    </script>
</html>

输出：张三

3、构造函数创建
案例03
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		function Persion(realname, nickname, age, sex) {
   
			this.realname = realname;
            this.nickname = nickname;
            this.age = age;
            this.sex = sex;
			this.toString = function() {
   
				document.write(this.realname + "你好！")
			};
		}

		person = new Persion();
		person.toString();
	</script>
</html>

输出：张三你好！

4、class方式创建
案例04
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		// 创建对象
		class Persion {
   
			constructor(realname, nickname, age, sex) {
   
				this.realname = realname;
				this.nickname = nickname;
				this.age = age;
				this.sex = sex;
			}

			toString() {
   
				return this.realname + ":" + this.sex;
			}
		}
		// 使用
		person = new Persion("张三", "张大仙", 23, "男");
		document.write(person.toString(
最低0.47元/天 解锁文章
抹泪的知更鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript核心技术.pdf 高清下载
04-05
JavaScript核心技术.pdf 高清下载
一、Js基础-JavaScript核心内容精讲
最新发布
qq_41994396的博客
05-06 225
在JavaScript中有3种方式来创建字符串，分别是字符串字面量，直接调用String( )函数，还有就是通过构造函数的方式。字面量字符串字面量就是直接通过单引号或者是双引号定义字符串的方式。注意：单引号和双引号是等价的。直接调用函数直接调用String( )函数，会将传入的任何类型的值转换成字符串类型。在转换的时候，需要遵循如下的规则：第一：如果是Number类型的值，则直接转换成对应的字符串。第二：如果是Boolean类型的值，则直接转换成字符串的"true"或者是"false"第三：如果值为。
Javascript核心技术的基础语法
GL280599ZL的博客
11-13 557
> Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。 > 特点： > 交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等） > 安全性（不可以直接访问本地硬盘） > 跨平台性（由浏览器解析执行，和平台无关）
JavaScript核心技术之Ajax详解
热爱前端的大三在校生
10-10 1112
Ajax 的核心是 XMLHttpRequest 对象。所有现代浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。首先我们在控制台打印一下，看看。
1、JavaScript（js）基本核心技术体系（简述、数据类型，原生对象和内置对象、分支循环、函数）
qq_42541265的博客
01-15 828
一、简述 JavaScript是由Netscape公司开发的基于对象的脚本语言，主要用于交互式页面的开发。 脚本语言：一种不需要编译就可以被解释执行的编程语言。 ECMAScript是JavaScript的标准，JavaScript是ECMAScript的实现。 二、JavaScript的应用领域 在前端网页的交互性 表单校验 页面修饰与特效 制作导航系统 执行基本的算数运算 动态文档生成...
javascript对象
09-14
对象概述 创建对象、原型链 属性操作 get/set 属性标签
sizeof:获取JavaScript对象的大小
05-02
获取一个JavaScript对象的大小（以字节为单位） JavaScript不提供sizeof（类似于C语言），并且程序员无需关心内存分配/重新分配。 但是，根据，每个String值均由16位无符号整数表示，Number使用双精度64位格式IEEE...
详解JavaScript对象类型
10-22
主要为大家详细介绍了JavaScript对象类型，分析了JavaScript六种数据类型，感兴趣的小伙伴们可以参考一下
JavaScript对象创建总结
04-15
javascript对象创建方法总结，通过这些方法的总结，可以对对象有了更深一步的了解，也加深了对对象的巩固认识。
JavaScript对象创建模式实例汇总
10-21
主要介绍了JavaScript对象创建模式,结合实例形式总结分析了JavaScript常见的对象创建模式,包括工厂模式、构造函数模式、原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式等,需要的朋友可以参考下
JavaScript核心技术 PDF扫描版
09-25
JavaScript核心技术 简介: 《JavaScript核心技术》对于各种浏览器、浏览器版本、JavaScript版本、DOM版本的介绍，有助于我们理解所遇到的各种新旧代码，使我们能够对这些代码做出正确的取舍。《JavaScript核心技术》还提供了一些使用JavaScript的最佳实践。无论是新手还是老手，这些如何正确使用JavaScript的经验都能帮助他们养成良好的编程习惯。《JavaScript核心技术》还介绍了一些调试和开发JavaScript的工具，这些工具无疑能够提高我们的开发效率。 《JavaScript核心技术》最后对于Ajax和几个流行的JavaScript库的介绍，无疑会开阔我们在JavaScript使用上的思路。 《JavaScript核心技术》是一本真正意义上的“新书”，不仅介绍了最新的JavaScript知识和方向，还完全覆盖了当今Web开发中关于JavaScript的所有重要话题，它使用了大量实例代码，图文并茂地讲解了使用JavaScript的各个层次和领域的内容。它不是一本参考手册，但却是一本值得拥有的教程。 JavaScript核心技术 目录: 前言 第1章JavaScript初探 1.1规范和实现相互交织的历史 1.2跨浏览器的不兼容性和其他常见的JavaScript传说 1.3你能用JavaScript来做什么 1.4JavaScript初探：“HelloWorld！” 1.5JavaScript沙箱 1.6可访问性和JavaScript的最佳实践 第2章JavaScript数据类型与变量 2.1变量的标识 2.2作用域 2.3简单类型 2.4常量：有名称但不改变 2.5习题 第3章运算符和语句 3.1JavaScript语句的格式 3.2简单语句 3.3条件语句和程序流 3.4条件运算符 3.5逻辑运算符 3.6高级语句：循环语句 3.7习题 第4章JavaScript对象 4.1对象构造函数 4.2Number对象 4.3String对象 4.4正则表达式与RegExp 4.5有专门用途的对象：Date和Math 4.6JavaScript数组 4.7关联数组：不是数组的数组 4.8习题 第5章函数 5.1定义函数：细数所有方式 5.2回调函数 5.3函数和递归 5.4嵌套函数、函数闭包和内存泄漏 5.5作为对象的函数 5.6习题 第6章捕捉事件 6.1O级DOM上的事件句柄 6.22级DOM上的事件句柄 6.3产生事件 6.4习题 第7章表单与即时验证 7.1访问表单 7.2把事件附加在表单上：不同的方法 7.3选择列表 7.4单选按钮和复选框 7.5输入字段和JiT正则表达式 7.6习题 第8章沙箱及之上的cookie、连通性和隐私 第9章基础浏览器对象 第10章DOM：文档对象模型 第11章创建定制的JavaScript对象 第12章构建动态网页：在脚本中加入样式 第13章使用Ajax 第14章好消息：生动的程序库！令人惊异的Web服务！有趣的API！ 附录习题答案
《JavaScript核心技术》
仓
01-10 1330
 Chapter 11. Creating Custom JavaScript Objects JavaScript中所见的四种不同域的对象:    JavaScript内置的对象.    浏览器对象模型中的对象.    文档对象模型中的对象.    开发人员自己的自己定义的对象. JavaScript中的原型(prototypi
又见标题党——怒评《JavaScript核心技术》
aimingoo的专栏
08-08 7324
很少写书评，尤其是在这样出离愤怒的时候。之所以愤怒，是因为今天看到了《JavaScript核心技术》。看到书名，看到那头犀牛，我的第一冲动就是立即下单买进。因为OReilly、机械工业、核心技术，再加上在JavaScript界中无人不知的那头犀牛，大概已经是品质的极境了。然而毕竟是在CSDN的读书区看到这条消息，毕竟还有一个“预读”。但预读中的这份目录却不禁让我疑惑：这会是在讲“
前端进阶必读：《JavaScript核心技术开发解密》核心提炼一
bigname22的博客
07-21 928
前言 最近读勒基本关于前端的数据《JavaScript核心技术开发解密》，《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用，但从未从更深的层面去思考他们是如何运作，为什么会产生这种特性，等等… 这本书先从《JavaScript核心技术开发解密》开始讲解，读完这本书你能学到： 一、三种基础数据结构 栈（stack） 堆（heap） 队列（queue） 不要小看这些数据结构，他们不同的结构以及规则产生了我们平常所知道的一些特性：
JavaScript的核心
weixin_44589858的博客
09-19 281
任何语言的核心都是这个语言在基本层面上是如何工作的。语法、操作符、数据类型、内置功能。 JavaScript的语法实现都是根据ECMAScript标准来的 语法 ECMAScript借鉴了C已经类C的语法。其实这个语言的语法都是抄来抄去的，换的可能只是写法或关键字，当然也有一些语言自己创建的语法，简化了一些复杂的操作。 区分大小写 C和类C语言都是区分大小写的。 标识符 标识符就是变量、函数、属性、函数参数的名称。组成： 第一个字符必须是字母、下划线、美元符号。 其他字符可以是字母、下划线、美元符、数字。
python属性访问顺序_Python 对象属性的访问
weixin_39520595的博客
12-03 148
在 Python 中，一切皆对象。属性访问可以理解为是从一个已有的对象中获得另一个对象的方法。对象属性的访问涉及到对象的 __dict__ 属性、描述符等概念，以及 __getattribute__、__getattr__ 等方法。对象字典属性Python 中的对象有一个 __dict__ 属性，其是一个字典类型，对象当前可用的属性和方法都保存在合格字典中。它存储着对象属性的名称与值的键值对。示例...
HTML
weixin_30467087的博客
11-03 181
前端概述 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8089)) sock.listen(5) while True: connecti...
VUE常问面试题总结
qq_44441669的博客
02-15 1137
Vue 的实例生命周期 （1） beforeCreate 初始化实例后 数据观测和事件配置之前调用 （2） created 实例创建完成后调用 （3） beforeMount 挂载开始前被用 （4） mounted el 被新建 vm.$el 替换并挂在到实例上之后调用 （5） beforeUpdate 数据更新时调用 （6） updated 数据更改导致的 DOM 重新渲染后调用 （7） b...
HTML5功能结合代码例题
weixin_46059358的博客
03-19 141
HTML功能结合代码例题 设定left，和main的相对固定位置，在左侧做出超链接，在右侧ifram里边显示 源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>哔哩哔哩干杯！</title> <style type="text...
JavaScript对象
04-01
JavaScript对象是一种数据类型，可以用来表示现实世界中的事物和概念。对象是由属性和方法组成的集合，它们描述了对象的特性和行为。属性是对象的状态或特征，例如颜色、尺寸、形状等；方法是对象的行为或操作，例如移动、旋转、显示等。 JavaScript对象可以通过字面量或构造函数创建。字面量创建对象时，通过使用花括号 {} 包含属性和方法列表来定义对象。例如： ``` let person = { name: "John", age: 30, sayHi: function() { console.log("Hi, my name is " + this.name); } }; ``` 构造函数创建对象时，通过定义一个函数来作为对象的模板。例如： ``` function Person(name, age) { this.name = name; this.age = age; this.sayHi = function() { console.log("Hi, my name is " + this.name); } } let person = new Person("John", 30); ``` JavaScript对象具有动态性，可以在运行时添加、删除和修改属性和方法。例如： ``` person.gender = "male"; // 添加属性 delete person.age; // 删除属性 person.sayHi = function() { // 修改方法 console.log("Hello, my name is " + this.name); } ``` JavaScript对象还支持原型继承，通过继承一个对象的属性和方法来创建新的对象。例如： ``` let student = Object.create(person); student.major = "Computer Science"; student.sayHi(); // 继承自person对象的方法 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

抹泪的知更鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值