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

发布时间:2024年01月15日

在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]
文章来源:https://blog.csdn.net/weixin_42019349/article/details/135598826
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。