一、认识对象
（一） 对象的属性
对象(object):
，表示属性和值的
object.png
- ①.k（键名）,v（值）之间用冒号分隔，每组k:v之间用逗号分隔，最后一个k:v可以不写逗号，k不可重名，不能是关键字、保留字。
- ②.如果对象的属性键名不符合javascript标识符命名规范，则这个键名必须用引号包裹
- ③.用“点语法 ”访问对象中指定键的值，例如上图的
xiaoming.name - ④.如果属性名不符合javascript标识符命名规范，则必须使用方括号写法来访问。
xiaoming['favorite-book']; -
⑤.如果属性名以变量形式存储，必须使用方括号形式。
变量存储的属性名访问.png - ⑥.直接使用赋值运算符重新对某属性赋值即可修改属性。
- ⑦属性的创建：如果对象本身没有某个属性值，使用“点语法”赋值，这个属性就会被创建出来
- ⑧属性的删除：如果要删除某个对象的属性，需要使用delete操作符。
//属性更改示例
var obj = {
a:10
};
obj.a = 30;
obj.a ++;
console.log(obj.a) //31
//属性创建示例
obj.b = 50;
console.log(obj) //{a: 31, b: 50}
//删除属性示例
delete obj.a //{b: 50}
（二）对象的方法
如果对象
，则成为对象的
。
对象的方法.png
- ①.方法即是函数，方法是对象的“函数属性”。
- ②.使用“点语法”调用对象方法。
xiaoming.sayHello();
(三) 对象的遍历
对象也可以遍历，遍历对象使用
for...in...循环。
for..in..语法.png
//属性的遍历示例
var obj = {
a: 10,
b: 20
};
for (var k in obj) {
console.log(`属性${k}的值是${obj[k]}`);
}
//属性a的值是10
//属性b的值是20
(四) 对象的深浅克隆
数据类型复习.png
对象是引用类值
不能使用
var obj2 = obj1这样的语法克隆一个对象。
使用==或者===进行对象的比较，，而不是比较值是否相同。
(1) 对象的浅克隆
浅克隆：克隆对象的“表层”，即如果对象的某些属性值又是引用类型值，则不进一步克隆他们，只是传递他们的引用。
- 使用for...in...循环即可实现对象的浅克隆。
//属性的浅克隆示例
var obj1 = {
a: 1,
b: 2,
c: [33, 44, 55]
};
var obj2 = {}
for (var k in obj1) {
//遍历一个obj1的属性，就给obj2添加一个同样的属性。
obj2[k] = obj1[k];
console.log(`obj2属性${k}的值是${obj2[k]}`);
}
//obj2属性a的值是1,obj2属性b的值是2,obj2属性c的值是33,44,55
obj1.c.push(88);
console.log(`obj2属性c的值是${obj2.c}`); //obj2属性c的值是33,44,55,88
上例为什么是浅克隆呢？ c属性的值是引用类型值，本质上obj1和obj2的c属性是内存中同一个数组，并没有被克隆分开。obje2也被添加了88这个值。
(2) 对象的深克隆
深克隆：
，不论对象的属性值是否是引用类型值。对象深克隆需要使用递归。
function deepClone(o) {
//判断参数是对象还是数组
if (Array.isArray(o)) {
var result = [];
for (var i = 0; i < o.length; i++) {
result.push(deepClone(o[i]));
}
} else if (typeof o == 'object') {
//如果是对象
var result = {};
for (var k in o) {
result[k] = deepClone(o[k]);
}
} else {
//基本类型值
var result = o;
}
return result
}
var obj2 = deepClone(obj1);
console.log(obj1 == obj2); //false
obj1.c.pop()
console.log(obj1); //{a: 1, b: 2, c: Array(2)}少了
console.log(obj2); //{a: 1, b: 2, c: Array(3)} 不变
二、认识函数的上下文规则
(一)函数的上下文
函数中使用
,表示
- 与中文“这”类似，函数中的this具体指代什么
var xiaoming = {
nickname: '小明',
age: 12,
sayHello: function () {
console.log(`我是${this.nickname},我${this.age}岁了`);
}
};
xiaoming.sayHello(); // 我是小明,我12岁了
另外一种情况
this指代window对象
- 同一个函数，用不同的形式调用它，函数的上下文不同。
如上列代码：
①.对象打点调用函数，函数中的this指代这个打点对象
xiaoming.sayHello();
②.圆括号直接嗲用函数，函数中的this指代window对象。
(二) 上下文规则
①.规则1：
规则1示例一.png
规则1示例二.png
规则1示例三.png
规则1示例四.png
②.规则2：
规则2示例一.png
规则2示例二.png
③.规则3：
格式： 数组[下标]（ ）
规则3示例一.png
类数组对象：所有为自然数序列(从0开始)，且有length属性的对象。
arguments对象，就是最常见的类数组对象。
规则3示例二.png
④.规则4：
规则4示例一.png
⑤.规则5：
⑥.规则6：
（三）call和apply
函数.call(上下文);
函数.apply(上下文);
<script>
function sum() {
alert(this.c + this.m + this.e);
}
var xiaoming = {
c: 100,
m: 90,
e: 80,
}
sum.call(xiaoming);
sum.apply(xiaoming);
</script>
call和apply区别演示.png
上下文规则总结:
上下文规则总结.png
