介绍对象
对象是由属性和方法组成的
属性:事物的特征,在对象中用属性来表示(常用名词)
方法:事物的行为,在对象中用方法来表示(常用动词)
创建对象
在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object)
1、利用字面量创建对象
对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。最简洁最常用。
{ } 里面采取键值对的形式表示
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)
举例:
var star = {
name : 'a',
age : 10,
sex : '男'
};
console.log(star.name);
console.log(star.age);
console.log(star.sex);
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)
参数说明:
obj:必选参数,表示即将拥有新属性的对象
prop:必选属性,表示新属性的名称
descriptor:必选属性,表示属性描述符
<script>
var course = {};
var contributorList = [];
Object.defineProperty(course,'name',{value:'JS'});
Object.defineProperty(course,'born',{value:1995});
Object.defineProperty(contributorList,'0',{
value:{
name:'JS',
email:'JS.cn'
}
});
document.write('<pre>',course.name,'</pre>');
document.write('<pre>',course.born,'</pre>');
document.write('<pre>',JSON.stringify(contributorList[0],null,' '),'</pre>');
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fRDN1MCW-1663511131032)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\48.jpg)]
定义多个属性语法如下:
Object.defineProperty(obj , props)
参数说明:
obj:必选参数,表示即将拥有新属性的对象
props:必选参数,表示新属性和描述符的配置对象,该对象的属性名即为新属性名,属性值即为descriptor对象
<script>
var course = {};
Object.defineProperties(course,{
name:{
enumerable : true,
value : 'JS'
},
born:{
enumerable : true,
value : 1995
},
contributorList:{
enumerable:true,
value:[{
name: 'JS',
email:'JS.cn'
}]
}
});
document.write('<pre>',JSON.stringify(course,null,' '),'</pre>');
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RXYXdSCB-1663511131032)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\49.jpg)]
访问器属性
getter和setter方法
配置属性
配置属性是指设置属性的描述符;属性描述符包括数据属性和访问器属性。
数据属性是指属性是否可配置、可枚举、可写。
访问器属性是指属性的getter、setter函数,可在属性读取时控制
使用defineProperty()定义属性配置的描述符如下
描述符 | 含义 | 默认值 |
---|---|---|
configurable | 表示属性是否可配置、可删除 | false |
enumerable | 表示属性是否可枚举 | false |
writable | 表示属性的值是否可以修改 | false |
value | 属性的初始值 | undefined |
get | 属性的getter函数,与writable、value不能同时存在 | undefined |
set | 属性的setter函数,与writable、value不能同时存在 | undefined |
设置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 输出的是修改后的值
this对象
this用来指向当前函数的调用对象
JS中有两种方法让this指向当前对象
1、使用new调用构造函数,this指向当前对象
2、使用对象调用函数,this指向当前对象
如果没有对象的话指向window
<script>
var a = {
name : 'abc',
sayH : function(t){
console.log(this); //指向当前对象
console.log(t);
}
};
a.sayH('JS');
function sayHi(){
console.log(this); //指向window (当前窗口)
}
sayHi();
function Course(name){
this.name = name;
this.say = function(){
console.log(JSON.stringify(this)); //将对象转换为 JSON 字符 //串方法
};
}
var course = new Course('JSxx');
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KApBH6wT-1663511131033)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\16.jpg)]
修改函数的调用对象
JS允许通过多种方式修改函数运行时的this对象。主要方式有三种:
1、调用函数的call()函数,传递指定参数,并修改this对象
call 函数的功能:
其一、让函数立执行;
其二、可改变 this 的指向;
其三、可实现继承问题;
语法:
call() 函数中的第一个参数表示:想让 this 指向的对象 (obj);
call() 函数中的第二及以后参数表示:传进去的实参;
<script>
function fun(){
alert(this);
}
var obj = {};
fun.call(obj);
</script>
对象操作
对象常见操作包括访问对象、检举对象、克隆对象。(JS不支持垃圾回收,不需要销毁对象)
访问对象
JS对象是引用数据类型,访问一个对象无论是传值还是赋值,都是访问该对象的引用
<script>
var a = {name:'aaaa'};
function b(object){
object.name = 'New';
}
console.log(a.name);
b(a); //引用对象,对对象的属性进行修改
console.log(a.name);
console.log(JSON.stringify(a,null,' '));
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VQWeeenT-1663511131033)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\17.jpg)]
枚举对象
对象是一个无序的数据集合,JS确保使用for…in枚举对象属性列表时与属性设置的顺序一致
<script>
var teacher = {
name:'1',
course:'math',
age:18,
studentList:[
'a',
'b'
]
};
for(var key in teacher)
console.log(key,':',teacher[key]);
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-54EcNv1d-1663511131034)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\18.jpg)]
for…in 枚举对象的几个特性:
- 以花括号{}定义的属性可以被枚举
- 使用Object.defineProperty()设置属性enumerable描述符为false,该属性不能被枚举
- 修改对象的原始链直接新增属性,该属性也会被枚举
- 使用Object.defineProperty()为原型链增加enumerable描述符为false的属性,该原型链属性不会被枚举
克隆对象
var 克隆对象名 = JSON.parse(JSON.stringify(被克隆对象名));
<script>
var a = {name:'a'};
var b = a;
console.log(a.name);
console.log(b.name);
b.name = 'b';
console.log(a.name);
console.log(b.name);
//克隆对象,先把对象序列化成字符串,再从字符串解析成一个新的对象
var c = JSON.parse(JSON.stringify(b));
//不会影响b对象
c.name = 'c';
console.log(b.name);
console.log(c.name);
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R52prEKG-1663511131034)(C:\Users\Asus\Desktop\MarkDown\JavaScript\图片\19.jpg)]
克隆出的对象与原对象没有联系,是一个新对象
冻结对象
语法:
Object.freeze(obj)
obj:必选参数,表示要冻结的对象
将对象冻结之后,一些写操作和配置操作都会被拒绝,也不能增删属性,让对象变成一个不可变的对象。
Object.defineProperty()定义属性,可以控制属性不被修改和删除
Object.seal()函数也可以用于冻结对象,但是它着重于密封对象,密封后对象不能新增属性、不能配置已有属性,但是原属性在密封前可写,密封后仍可写