细说JavaScript对象(JavaScript对象详解)

news2024/12/22 19:17:07

在JavaScript中对象作为数据类型之一,它的数据结构区别于其余5中数据类型,从数据结构角度看对象就是数据值的几个,其书就结构就是若干组名值对,类似于其他语言中的哈希、散列
关联数组等,但对象在JavaScript中不仅仅扮演着数据类型的角色,同时也是JavaScript语言的实现基础,可通过内置对象实现各种操作,因此JavaScript也比叫做基于对象的编程语言
细说JavaScript对象(JavaScript对象详解)

一、理解对象

1、什么是对象

对象除了是一种数据结构它在js中还有另外一个功能,就是编程设计的一种模式,就是用对象的数据结构实现了js语言设计,例如window是一个对象,alert作为window对象的一个属性存在,其实window对象包含js中的所有方法,因为window对象是浏览器的一个全局对象,js所有开发的编码都是在这个全局对象下完成的,或者说是挂载在这个window对象下的。

2、对象有什么用

对象这种特殊的数据结构能够弥补其他数据结构存储信息不足的问题,我们可以使用对象存储大量的数据,或者一组相关联的数据
除了存储数据的功能对象的功能还包括网上的数据传输,例如JSON(JavaScript Object Notation)是js的一个子集
JSON数据结构与对象保持一致,对象的字面量表示就相当于一个JSON数据,这种数据传输起来更轻便

{"name":"知数SEO","sex":"女","age":8}
3、如何使用对象

在开发中我们经常将具有一个特定功能的代码段写成一个对象,比如

var calculator = {
	add:function(num1,num2){
		return num1 + num2;
	}
	sub:function(num1,num2){
		return num1 - num2;
	}
	mul:function(num1,num2){
		return num1 * num2;
	}
	div:function(num1,num2){
		return num1 / num2;
	}
}

二、创建对象

1、字面量创建
// 	字面量创建对象的方式是最简单的一种方式,语法:
{属性名1:属性值2,属性名2:属性值2,...属性名n:属性值n}

// 对象字面量以大括号{}定界,其中存储了若干组数据信息,每组数据信息之间以逗号分隔,同时每组数据信息内部以冒号分隔,两端分别是属性名和属性值,属性名有两种形式
// 标准格式
{"name":"zhishunet","sex":"女"}

// 简写格式
{name:"zhishunet",sex:"女"}
2、构造函数创建
// 使用构造函数创建对象 语法就是使用关键字new来创建一个对象,语法:
new Object();

// 添加属性的语法
对象名.属性名 = 属性值;
// 或者
对象名[属性名] = 属性值;

// 例子
var person = new Object();
person.name = "知数SEO";
person.sex = "女";
person['age'] = 8;
person['demo'] = function(){
	alert("你好");
}

 // 注意:当函数出现在对象中时,我们更希望称其为方法。
3、工厂模式
// 工厂模式就是改造后的构造函数,这种改造一定是由于构造函数不能满足开发者的部分需求导致的,构造函数创建出的对象不具备约束性和规范性,会出现大量的重复代码,工厂模式具体的实现方式就是利用函数的特性封装了具备特性规范的函数

var createPerson = function(name,sex,age){
	var person = new Object;
	person.name = name;
	person.sex = sex;
	person.age = age;
	return person; //返回这个对象
}

// 工厂模式下创建对象虽然具有统一性,但却没有解决对象识别的问题,就是如何判断多个对象出自一个函数
4、自定义构造函数
function Person(name,sex,age){
	this.name = name;
	this.sex = sex;
	this,age = age;
}

var Person1 = new Person("知数SEO","女",8);
var Person2 = new Person("zhishunet","男",10)

// 与工厂模式相比区别
// 1、将createPerson改为Person
// 2、没有显式的创建一个对象
// 3、将所有属性赋值给this对象
// 4、没有使用return返回指定对象

// 自定义构造函数很好的解决了是否出自同一个构造函数的问题,我们可以使用instanceof来进行测试
console.log(person1 instanceof Person); // true
console.log(person2 instanceof Person); // true

三、对象属性

对象中存储数据信息的方式就是属性和值的格式,涉及到对象属性的增加、删除、修改、查询

1、属性的添加
var Person = new Object();
person.sex = "女"; // 小数点模式
person['age'] = 8; // 中括号模式
2、属性的删除
// 使用delete运算符,用来删除对象的属性
var obj = {"name":"知数SEO"};
delete obj.name;
alert(obj.name); // undefined
3、属性的查询
// 用运算符in
var obj = {"name":"知数SEO"};
console.log('name' in obj);
4、属性的遍历
// 遍历就是将对象的属性进行循环展示,语法格式:
for(变量 in 对象){
	语句;
}

var company = {
	name:"知数网络";
	age:10;
	words:"专注企业品牌推广营销";
};

for(var attr in company){
	console.log(attr);
}

四、对象的存储

1、存储机制

变量是存储在内存中的,给变量赋值为不同的数据类型则均是在内存中的操作,在js中基本的数据类型在栈内存中引用的数据类型存放在堆内存中,存放在栈内存中的变量是大小固定的,这些基本的数据类型都是定长的,分配的内存空间也是一定的。而在堆内存中存放的变量并非定长的,它的值可以动态增加和删除,存储的空间也可以根据数据的大小进行缩小或扩展
注意:
对某个字母或文字进行修改时,实际上生成了新的字符串,并对原变量的值进行了覆盖
而对象中针对某个属性进行增加或修改时,其实是在原来对象上的一次修改

2、垃圾回收机制

对于js内存占满会导致浏览器崩溃,所以浏览器自带了垃圾回收机制,它能够对不再使用的变量进行清理和回收,具体是如何运行的呢?
垃圾回收机制最常用的方式就是标记清楚,其中标记清楚模式是指当变量进入环境时,对其做一个开始标记,而环境指的是全局作用域和局部作用域,在全局作用域中的变量是在全局有效的,而在局部作用域中的变量尽在局部作用域中生效,意思就是当变量在局部作用域中使用完成时或作一个结束标记,垃圾回收机制会自动对其占用的内存空间进行清理
除标记清里外还包括其他的回收模式,比如根据变量多少、变量所占的内存空间等规则进行垃圾回收、清理内存

3、内存优化

引用数据类型之所以称为引用数据类型是因为在变量中存储的值是一个指针(或称为内存地址)(定长),它指向的是堆内存中存储的对象

五、ES6对象新特性

1、属性的简洁表示法
// ES6允许直接写变量和函数,作为对象的属性和方法
var foo = 'bar';
var baz = {foo};
baz;  // {foo:"bar"}

// 等同于
var baz = {foo:"bar"};


// 除了属性简写,方法也可以简写
// ES5写法
var o = {
	method:function(x){
		return x;
	}
}
//ES6写法
var 0 = {
	methed(x){
		retrun x;
	}
}
2、属性名的表达式
// js语言定义对象的属性有两种方法
// 方法一 直接用标识符作属性名
obj.foo = true;

// 方法二 用表达式作属性名
obj['a' + 'bc'] = 123;

// ES6允许使用字面量定义对象时用表达式作为对象的属性名,即把表达式放在方括号内
let key = "foo";
let obj = {
	[key] = true,
	['a' + 'bc'] = 123
}
// 例子
let key = 'zhishunet';
var obj = {
	"zhishuseo":"知数SEO",
	[key] = '知数',
}

console.log(a['zhishuseo']);
console.log(a[key]);
console.log(a['zhishunet']);

// 注意
// 属性名的表达式与属性的简洁表示法不能同时使用,属性名的表达式如果是一个对象,则默认情况下会自动将对象转换为字符串[Object Object]

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

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

相关文章

【MySQL高级】——InnoDB数据存储结构

1. 数据库的存储结构&#xff1a;页 <1> 磁盘与内存交互的基本单位&#xff1a;页 <2> 页结构概述 <3> 页的大小 <4> 页的上层结构 2. 页的内部结构 <1> 页的分类 <2> 页的结构 <3> File Header&#xff08;文件头&#xff09; 1.…

AUTO SEG-LOSS SEARCHING METRIC SURROGATES FOR SEMANTIC SEGMENTATION

AUTO SEG-LOSS: 搜索度量替代语义分割 论文链接&#xff1a;https://arxiv.org/abs/2010.07930 项目链接&#xff1a;https://github.com/fundamentalvision/Auto-Seg-Loss ABSTRACT 设计合适的损失函数是训练深度网络的关键。特别是在语义分割领域&#xff0c;针对不同的场…

Nginx安装http2和ssl模块

Nginx安装http2和ssl模块 Nginx在执行默认安装命令的时候&#xff0c;并不会编译启用ngx_http_v2_module模块。故在修改Nginx配置文件启用http2.0协议的时候会报错。 一.检查Nginx安装了哪些模块 #进入Nginx的安装目录 cd /usr/local/nginx #执行命令查看安装了哪些模块 ./sbi…

腾讯云服务器定价_云服务器价格_云服务器计费模式

腾讯云服务器租用价格表&#xff1a;轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三年、2核4G5M带宽218元一年&#xff0c;2核4G5M带宽756元三年、轻量4核8G12M服务器446元一年、646元15个月&#xff0c;云服务器CVM S5实例2核2G配置280.8元一年…

java基本类型与包装类型之间的关系

JAVA基本类型和包装类型 前言 Java语言中的数据类型分为基本数据类型和引用类型&#xff0c;而我们进行Java开发的时候都听说过基本数据类型和包装类型&#xff0c;今天我们就来详细聊一聊Java中的基本数据类型和包装类型之间的区别。 基本数据类型 Java中的基本数据类型一共有…

2024腾讯云服务器购买指南一步步全流程攻略(超详细)

腾讯云服务器购买流程很简单&#xff0c;有两种购买方式&#xff0c;直接在官方活动上购买比较划算&#xff0c;在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵&#xff0c;但是自定义购买云服务器CPU内存带宽配置选择范围广&#xff0c;活动上购买只能选择固定的活动…

运筹说 第80期 | 最小费用最大流问题

前面我们学习了图与网络分析的基础知识及经典问题&#xff0c;大家是否已经学会了呢&#xff1f;接下来小编和大家学习最后一个经典问题——最小费用最大流问题。 最小费用最大流问题是经济学和管理学中的一类典型问题。在一个网络中每段路径都有“容量”和“费用”两个限制的…

微软Office 2021 批量许可版

软件介绍 微软办公软件套件Microsoft Office LTSC 2021 专业增强版2024年1月批量许可版更新推送&#xff01;Office2021正式版和Windows11系统同时于2021年10月份正式推出&#xff0c;Office LTSC 2021相比 Office2019正式版变化不太&#xff0c;最主要强化了LOGO设计趋势&…

运维必存的20个常见的故障排查、修复大全

你们好&#xff0c;我的网工朋友。 “稳定是偶然&#xff0c;异常才是常态”。这句话用来形容运维的工作再合适不过了 对于运维来说&#xff0c;工作最常遇到的就是不稳定性带来的各种故障&#xff0c;经常围绕发现故障、响应故障、定位故障、恢复故障这四大步骤打转。 为此…

mysql高级使用教程

mysql体系结构 1.连接层&#xff1a;主要就是做客户端的连接。 2.服务层&#xff1a;主要就是 缓存&#xff0c;分析器&#xff0c;优化器&#xff0c;执行器。 3.引擎层&#xff1a;就是一些存储引擎&#xff0c;包括索引的存储结构。 4.存储层&#xff1a;数据存储的磁盘…

CSS实现超出部分的省略

1、为什么要省略 在日常开发过程中我们难免会遇到后端返回给我们的的数据太长的情况&#xff0c;此时我们通常采取的是...的省略方式&#xff0c;其中的CSS大致如下&#xff0c;既可以实现对应的省略显示&#xff0c;但有些时候我们有需要用户可以查看具体的完整信息&#xff0…

内网yum仓库 ftp;http方式

ftp方式 服务端 客户端 vim /etc/yum.repos.d/ftp.repo http方式 服务端 yum install httpd -y systemctl start httpd cd /var/www/html/ mkdir centos7 mount /dev/sr0 /var/www/html/centos7 客户端

*(长期更新)软考网络工程师学习笔记——Section 22 无线局域网

目录 一、IEEE 802.11的定义二、IEEE 802.11系列标准三、IEEE 802.11的两种工作模式四、CDMA/CA协议&#xff08;一&#xff09;CDMA/CA协议的定义&#xff08;二&#xff09;CDMA/CA协议的过程 五、AC与AP&#xff08;一&#xff09;接入控制器AC&#xff08;二&#xff09;无…

go的安装及配置

go的官方下载地址&#xff1a;All releases - The Go Programming Language​​​​​​ 1、找到对应的版本包下载&#xff0c;例如 wget https://golang.google.cn/dl/go1.21.6.linux-amd64.tar.gz 2、下载完成后配置解压Go源码包 tar -zxf go1.21.6.linux-amd64.tar.gz 3…

32 二叉树的定义

之前的通用树结构 采用双亲孩子表示法模型 孩子兄弟表示法模型 引出二叉树 二叉树的定义&#xff1a; 满二叉树和完全二叉树 对此图要有印象 满二叉树一定是完全二叉树&#xff0c;但是完全二叉树不一定是满二叉树 小结

博客摘录「 性能优化:__builtin_expect详解」2024年1月15日

性能优化&#xff1a;__builtin_expect详解___builtin_expect对性能的影响-CSDN博客https://blog.csdn.net/chudongfang2015/article/details/75710848 #define LIKELY(x) __builtin_expect(!!(x), 1) __builtin_expect宏定义中为何写成!!(x)&#xff1f; 首先__buildin_expec…

buuctf-Misc 题目解答分解118-120

118.[INSHack2017]sanity 打开压缩包就是一个md 文件 typora 打开 发现flag INSA{Youre_sane_Good_for_you} 119.粽子的来历 解压压缩包 &#xff0c;得到文件夹如下 用010 editor 打开 我是A.doc 这个有些可以 都改成FF 保存 然后再次打开 docx 文件就发现了屈原的诗 其他b…

雍禾医疗好医生:雍禾植发张华医生立志服务好毛发患者

作为中国领先的专门从事毛发医疗服务的医疗集团&#xff0c;雍禾医疗提供诊疗、植发、养固等一站式毛发医疗服务&#xff0c;旗下拥有由专业植发品牌“雍禾植发”、医疗养固品牌“史云逊”、女性美学植发品牌“雍禾发之初”及医学假发品牌“哈发达”等组成的全产业链品牌矩阵。…

【Spring 篇】SpringMVC的数据响应:编织美妙的返回乐章

在Web开发的舞台上&#xff0c;数据响应就如同一场美妙的音乐演奏&#xff0c;而SpringMVC作为这场音乐的指挥者&#xff0c;如何优雅地将数据传递给前端&#xff0c;引发了无尽的思考和探索。本篇博客将带你走进SpringMVC的数据响应世界&#xff0c;解开其中的奥秘&#xff0c…

class_5:在c++中一个类包含另一个类的对象叫做组合

#include <iostream> using namespace std;class Wheel{ public://成员数据string brand; //品牌int year; //年限//真正的成员函数void printWheelInfo(); //声明成员函数 };void Wheel::printWheelInfo() {cout<<"我的轮胎品牌是&#xff1a;"<…