JS，关于对象的知识点，含示例，非常详细！！！

介绍对象

对象是由属性和方法组成的

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

创建对象

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）

1、利用字面量创建对象

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。最简洁最常用。

{ } 里面采取键值对的形式表示

键：相当于属性名

值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

举例：

var star = {
            name : 'a',
            age : 10,
            sex : '男'
        };
        console.log(star.name);
        console.log(star.age);
        console.log(star.sex);
1
2
3
4
5
6
7
8

2、利用 Object 创建对象

语法：

Object()

Object(value)

参数说明：

value：可选参数，表示将该参数对象化。缺少该参数时，返回一个空对象。

3、利用 Object.create()创建对象

语法：

Object.creat(proto)

参数说明：

proto：必选参数，表示以该参数为原型(模板)创建新对象，返回的新对象能够访问该参数的所有属性和方法

原型对象必须是对象、数组、函数、特殊数据null，简单数据类型不能作为原型，否则报错。

对象属性

定义属性

方式1：{属性名:属性值} //这种方式用于声明对象时直接指定属性

方式2：对象.属性名 = 属性值 //这种方式，如果属性不存在，则新建属性并赋值

属性描述符

JS支持为对象的属性设置详细的属性描述符，属性描述符包括属性的数据属性和访问的访问器属性 ，使用函数Object的defineProperty()和definePropertise()为属性设置描述符

数据属性

定义单个属性语法如下：

Object.defineProperty(obj.prop , descriptor)
1

参数说明：

obj：必选参数，表示即将拥有新属性的对象

prop：必选属性，表示新属性的名称

descriptor：必选属性，表示属性描述符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fRDN1MCW-1663511131032)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\48.jpg)]

定义多个属性语法如下：

Object.defineProperty(obj , props)
1

参数说明：

obj：必选参数，表示即将拥有新属性的对象

props：必选参数，表示新属性和描述符的配置对象，该对象的属性名即为新属性名，属性值即为descriptor对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RXYXdSCB-1663511131032)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\49.jpg)]

访问器属性

getter和setter方法

配置属性

配置属性是指设置属性的描述符；属性描述符包括数据属性和访问器属性。

数据属性是指属性是否可配置、可枚举、可写。

访问器属性是指属性的getter、setter函数，可在属性读取时控制

使用defineProperty()定义属性配置的描述符如下

设置enumerable 为 false，既能存放属性，又能避免属性被其他函数访问

可写描述符(writable)

var abert = {
  age : 1
};
Object.defineProperty(abert , 'name',{
  value:'Abert',
  configurable:true,
  enumerable:true,
  writable:false			//表示可读不可写的属性
})；
abert.name  = 'New Abert';	//修改value的值
document.write(abert.name);			//输出的是Abert   没有被修改

Object.defineProperty(abert , 'name',{
  value:'Abert',
  configurable:true,
  enumerable:true,
  writable:true			//表示能修改的属性
})；
abert.name  = 'New Abert';	//修改value的值
document.write(abert.name);			//输出的是 New Abert   输出的是修改后的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

this对象

this用来指向当前函数的调用对象

JS中有两种方法让this指向当前对象

1、使用new调用构造函数，this指向当前对象

2、使用对象调用函数，this指向当前对象

如果没有对象的话指向window

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KApBH6wT-1663511131033)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\16.jpg)]

修改函数的调用对象

JS允许通过多种方式修改函数运行时的this对象。主要方式有三种：

1、调用函数的call()函数，传递指定参数，并修改this对象

call 函数的功能：

其一、让函数立执行；
其二、可改变 this 的指向；
其三、可实现继承问题；

语法：
call() 函数中的第一个参数表示：想让 this 指向的对象 (obj)；
call() 函数中的第二及以后参数表示：传进去的实参；


1
2
3
4
5
6
7
8
9
10
11

对象操作

对象常见操作包括访问对象、检举对象、克隆对象。（JS不支持垃圾回收，不需要销毁对象）

访问对象

JS对象是引用数据类型，访问一个对象无论是传值还是赋值，都是访问该对象的引用

1
2
3
4
5
6
7
8
9
10
11

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VQWeeenT-1663511131033)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\17.jpg)]

枚举对象

对象是一个无序的数据集合，JS确保使用for…in枚举对象属性列表时与属性设置的顺序一致

1
2
3
4
5
6
7
8
9
10
11
12
13

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-54EcNv1d-1663511131034)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\18.jpg)]

for…in 枚举对象的几个特性：

1. 以花括号{}定义的属性可以被枚举
2. 使用Object.defineProperty()设置属性enumerable描述符为false，该属性不能被枚举
3. 修改对象的原始链直接新增属性，该属性也会被枚举
4. 使用Object.defineProperty()为原型链增加enumerable描述符为false的属性，该原型链属性不会被枚举

克隆对象

var 克隆对象名 = JSON.parse(JSON.stringify(被克隆对象名));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R52prEKG-1663511131034)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\19.jpg)]

克隆出的对象与原对象没有联系，是一个新对象

冻结对象

语法：

Object.freeze(obj)

obj:必选参数，表示要冻结的对象
1
2
3

将对象冻结之后，一些写操作和配置操作都会被拒绝，也不能增删属性，让对象变成一个不可变的对象。

Object.defineProperty()定义属性，可以控制属性不被修改和删除

Object.seal()函数也可以用于冻结对象，但是它着重于密封对象，密封后对象不能新增属性、不能配置已有属性，但是原属性在密封前可写，密封后仍可写