• 說明：該文屬于 大前端全棧架構(gòu)白寶書專欄，目前階段免費(fèi)，如需要項(xiàng)目實(shí)戰(zhàn)或者是體系化資源，文末名片加V！
• 作者：哈哥撩編程，十余年工作經(jīng)驗(yàn), 從事過全棧研發(fā)、產(chǎn)品經(jīng)理等工作，目前在公司擔(dān)任研發(fā)部門CTO。
• 榮譽(yù)：2022年度博客之星Top4、2023年度超級(jí)個(gè)體得主、谷歌與亞馬遜開發(fā)者大會(huì)特約speaker、全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者。

---

• ?? 白寶書系列
  • ?? 啟示錄 - 攻城獅的自我修養(yǎng)
  • ?? Python全棧白寶書
  • ?? ChatGPT實(shí)踐指南白寶書
  • ?? 產(chǎn)品思維訓(xùn)練白寶書
  • ?? 全域運(yùn)營(yíng)實(shí)戰(zhàn)白寶書
  • ?? 大前端全棧架構(gòu)白寶書

? 對(duì)象的方法

如果某個(gè)屬性值是函數(shù)，則它被稱為對(duì)象的“方法”

示例代碼：下面的對(duì)象中，byeBye這個(gè)屬性的值是一個(gè)函數(shù)，那么這個(gè)屬性是這個(gè)對(duì)象的方法

var xiaomumu = {
    name: '小沐沐',
    age: 2,
    sex: '男',
    hobbies: ['秋千', '滑梯'],
    'favorite-books': ['抱抱', '我的爸爸'],
    byeBye: function () {                 
        console.log('揮手再見');
    }
};

方法的調(diào)用

可以通過打點(diǎn)的方式調(diào)用對(duì)象的方法

示例代碼：

var xiaomumu = {
    name: '小沐沐',
    age: 2,
    sex: '男',
    hobbies: ['秋千', '滑梯'],
    'favorite-books': ['抱抱', '我的爸爸'],
    byeBye: function () {                 
        console.log('揮手再見');
    }
};
xiaomumu.byeBye();   // 在控制臺(tái)輸出 揮手再見

學(xué)到這里，我們可以總結(jié)出方法和函數(shù)的區(qū)別了：方法也是函數(shù)，只不過方法是對(duì)象的“函數(shù)屬性”，它需要打點(diǎn)調(diào)用，比如以前我們學(xué)過的一些方法有console.log()、Math.ceil()等，log就是console對(duì)象的方法，ceil是Math對(duì)象的方法

? 對(duì)象的遍歷

和遍歷數(shù)組一樣，我們也可以對(duì)對(duì)象進(jìn)行遍歷，其實(shí)就是使用循環(huán)的方式來訪問對(duì)象中的每個(gè)屬性

遍歷對(duì)象需要使用for...in...循環(huán)，for…in…循環(huán)可以遍歷對(duì)象的每個(gè)鍵

語法如下：

for (var k in obj) {      // k是循環(huán)變量，它會(huì)依次成為對(duì)象的每一個(gè)鍵；obj是對(duì)象的名字
    consloe.log(k);        
    consloe.log(obj[k]);   // obj[k]是k對(duì)應(yīng)的屬性值，注意必須使用方括號(hào)，不能使用打點(diǎn)
};

下面我們來遍歷xiaomumu這個(gè)對(duì)象，把它的屬性名和屬性值輸出到控制臺(tái)：

var xiaomumu = {
    name: '小沐沐',
    age: 2,
    sex: '男',
    hobbies: ['秋千', '滑梯'],
    'favorite-books': ['抱抱', '我的爸爸'],
    byeBye: function () {
        console.log('揮手再見');
    }
};

// 變量xiaomumu對(duì)象
for (var k in xiaomumu) {
    console.log('屬性名' + k + '對(duì)應(yīng)的屬性值' + xiaomumu[k]);
}

? 對(duì)象的深淺克隆

先來復(fù)習(xí)一下基本類型值和引用類型值

因?yàn)?code>對(duì)象是引用類型值，所以：

• 對(duì)象不能通過var obj2 = obj1的方式來克隆一個(gè)對(duì)象，這樣“克隆”出來的變量會(huì)和原變量指向同一個(gè)堆內(nèi)存區(qū)域，當(dāng)改變一個(gè)對(duì)象的值時(shí)，另一個(gè)值也會(huì)發(fā)生改變
• 使用或者=進(jìn)行比較時(shí)，比較的是它們是否為內(nèi)存中的同一個(gè)對(duì)象，而不是比較值是否相同

我們實(shí)際敲一些代碼來證明對(duì)象是引用類型值：

var obj1 = {
    a: 10
}

var obj2 = obj1;

obj1.a++;
console.log(obj2.a);   // 11(改變obj1的值，obj2的值也會(huì)改變)

console.log({} == {});    //false  (用==比較，答案是false，因?yàn)閮蓚€(gè)空數(shù)組指向的內(nèi)存地址不同)
console.log({ a: 1 } === { a: 1 });  //false  （用===比較，答案也是false）

?? 對(duì)象的淺克隆

淺克隆，只克隆對(duì)象的“表層”，如果對(duì)象的某些屬性值又是引用類型值，則不進(jìn)一步克隆它們，只是傳遞它們的引用

使用for…in…循環(huán)既可以實(shí)現(xiàn)對(duì)象的淺克隆

示例代碼：

var xiaomumu = {
    name: '小沐沐',
    age: 2,
    sex: '男',
    hobbies: ['秋千', '滑梯'],
};

var muxiaomu = {};

// 淺克隆，只克隆表層
for (var k in xiaomumu) {
    muxiaomu[k] = xiaomumu[k];  // 把xiaomumu的鍵值賦值給muixiaomu的鍵值
}

console.log(muxiaomu);   // 和原對(duì)象看起來完全相同

console.log(muxiaomu == xiaomumu);    //false，證明指向的堆內(nèi)存地址不同了，對(duì)象被成s功克隆
console.log(muxiaomu.hobbies == xiaomumu.hobbies);  // true,證明這個(gè)hobbies屬性沒有被正在的克隆,所以這種克隆方式是“淺克隆”

?? 對(duì)象的深克隆

深克隆，克隆對(duì)象的全部，不論對(duì)象的屬性值是否又是引用類型值，都能將它們實(shí)現(xiàn)克隆

和數(shù)組的深克隆類似，對(duì)象的深克隆也需要使用遞歸，面試?？?/strong>

var xiaomumu = {
    name: '小沐沐',
    age: 2,
    sex: '男',
    hobbies: [
        '秋千',
        {
            '吃水果': ['藍(lán)莓', '香蕉', '西瓜']
        },
        '滑梯']
};

// 深克隆
function deepClone(o) {
    //判斷o是對(duì)象還是數(shù)組
    if (Array.isArray(o)) {
        // 數(shù)組
        var result = [];
        for (var i = 0; i < o.length; i++) {
            result.push(deepClone(o[i]));   // 遞歸
        }
    } else if (typeof o == 'object') {
        //對(duì)象
        var result = {};
        for (var k in o) {
            result[k] = deepClone(o[k]);   // 遞歸
        }
    } else {
        // 基本類型
        var result = o;
    }
    return result;   // 絕對(duì)不能忘記書寫
};

var muxiaomu = deepClone(xiaomumu);   //深克隆一個(gè)對(duì)象

console.log(muxiaomu);