一、認(rèn)識(shí)對象
（一） 對象的屬性
對象(object):
，表示屬性和值的
object.png
- ①.k（鍵名）,v（值）之間用冒號(hào)分隔，每組k:v之間用逗號(hào)分隔，最后一個(gè)k:v可以不寫逗號(hào)，k不可重名，不能是關(guān)鍵字、保留字。
- ②.如果對象的屬性鍵名不符合javascript標(biāo)識(shí)符命名規(guī)范，則這個(gè)鍵名必須用引號(hào)包裹
- ③.用“點(diǎn)語法 ”訪問對象中指定鍵的值，例如上圖的
xiaoming.name - ④.如果屬性名不符合javascript標(biāo)識(shí)符命名規(guī)范，則必須使用方括號(hào)寫法來訪問。
xiaoming['favorite-book']; -
⑤.如果屬性名以變量形式存儲(chǔ)，必須使用方括號(hào)形式。
變量存儲(chǔ)的屬性名訪問.png - ⑥.直接使用賦值運(yùn)算符重新對某屬性賦值即可修改屬性。
- ⑦屬性的創(chuàng)建：如果對象本身沒有某個(gè)屬性值，使用“點(diǎn)語法”賦值，這個(gè)屬性就會(huì)被創(chuàng)建出來
- ⑧屬性的刪除：如果要?jiǎng)h除某個(gè)對象的屬性，需要使用delete操作符。
//屬性更改示例
var obj = {
a:10
};
obj.a = 30;
obj.a ++;
console.log(obj.a) //31
//屬性創(chuàng)建示例
obj.b = 50;
console.log(obj) //{a: 31, b: 50}
//刪除屬性示例
delete obj.a //{b: 50}
（二）對象的方法
如果對象
，則成為對象的
。
對象的方法.png
- ①.方法即是函數(shù)，方法是對象的“函數(shù)屬性”。
- ②.使用“點(diǎn)語法”調(diào)用對象方法。
xiaoming.sayHello();
(三) 對象的遍歷
對象也可以遍歷，遍歷對象使用
for...in...循環(huán)。
for..in..語法.png
//屬性的遍歷示例
var obj = {
a: 10,
b: 20
};
for (var k in obj) {
console.log(`屬性${k}的值是${obj[k]}`);
}
//屬性a的值是10
//屬性b的值是20
(四) 對象的深淺克隆
數(shù)據(jù)類型復(fù)習(xí).png
對象是引用類值
不能使用
var obj2 = obj1這樣的語法克隆一個(gè)對象。
使用==或者===進(jìn)行對象的比較，，而不是比較值是否相同。
(1) 對象的淺克隆
淺克?。嚎寺ο蟮摹氨韺印保慈绻麑ο蟮哪承傩灾涤质且妙愋椭?，則不進(jìn)一步克隆他們，只是傳遞他們的引用。
- 使用for...in...循環(huán)即可實(shí)現(xiàn)對象的淺克隆。
//屬性的淺克隆示例
var obj1 = {
a: 1,
b: 2,
c: [33, 44, 55]
};
var obj2 = {}
for (var k in obj1) {
//遍歷一個(gè)obj1的屬性，就給obj2添加一個(gè)同樣的屬性。
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屬性的值是引用類型值，本質(zhì)上obj1和obj2的c屬性是內(nèi)存中同一個(gè)數(shù)組，并沒有被克隆分開。obje2也被添加了88這個(gè)值。
(2) 對象的深克隆
深克?。?
，不論對象的屬性值是否是引用類型值。對象深克隆需要使用遞歸。
function deepClone(o) {
//判斷參數(shù)是對象還是數(shù)組
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)} 不變
二、認(rèn)識(shí)函數(shù)的上下文規(guī)則
(一)函數(shù)的上下文
函數(shù)中使用
,表示
- 與中文“這”類似，函數(shù)中的this具體指代什么
var xiaoming = {
nickname: '小明',
age: 12,
sayHello: function () {
console.log(`我是${this.nickname},我${this.age}歲了`);
}
};
xiaoming.sayHello(); // 我是小明,我12歲了
另外一種情況
this指代window對象
- 同一個(gè)函數(shù)，用不同的形式調(diào)用它，函數(shù)的上下文不同。
如上列代碼：
①.對象打點(diǎn)調(diào)用函數(shù)，函數(shù)中的this指代這個(gè)打點(diǎn)對象
xiaoming.sayHello();
②.圓括號(hào)直接嗲用函數(shù)，函數(shù)中的this指代window對象。
(二) 上下文規(guī)則
①.規(guī)則1：
規(guī)則1示例一.png
規(guī)則1示例二.png
規(guī)則1示例三.png
規(guī)則1示例四.png
②.規(guī)則2：
規(guī)則2示例一.png
規(guī)則2示例二.png
③.規(guī)則3：
格式： 數(shù)組[下標(biāo)]（ ）
規(guī)則3示例一.png
類數(shù)組對象：所有為自然數(shù)序列(從0開始)，且有l(wèi)ength屬性的對象。
arguments對象，就是最常見的類數(shù)組對象。
規(guī)則3示例二.png
④.規(guī)則4：
規(guī)則4示例一.png
⑤.規(guī)則5：
⑥.規(guī)則6：
（三）call和apply
函數(shù).call(上下文);
函數(shù).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區(qū)別演示.png
上下文規(guī)則總結(jié):
上下文規(guī)則總結(jié).png
