JS核心-(31)-物件-章節總結測驗

前言

來檢視一下自己的觀念是否正確

Example 1

以下物件格式是否正確? 如果不正確請調整為正確格式，並執行物件中的兩個函式

var person = {
    name: '小明',
    age: 32,
    1: '2',
    gender: 'male',
    'interests': ['吃飯', '睡覺', '打電動'],
    greeting: function () {
        console.log('哈摟，你好');
    },
    '哈摟': function () {
        console.log('我是小明');
    }
};

要判斷是否為正確的話，可以使用 console.log 把東西印出來，如果印的出來就代表格式是正確的

由結果可見在物件中可以使用中文字串以及數字當作是屬性的開頭名稱

如何執行物件中的兩個函式?

person.greeting();
person['哈摟']();

Example 2

運用陣列及 for 迴圈，執行 `greeting` 及 `'哈摟'` 的函式

var person = {
    name: '小明',
    age: 32,
    1: '2',
    gender: 'male',
    'interests': ['吃飯', '睡覺', '打電動'],
    greeting: function () {
        console.log('哈摟，你好');
    },
    '哈摟': function () {
        console.log('我是小明');
    }
};

var personMethod = ['greeting', '哈摟'];

實作

for (var i = 0; i < personMethod.length; i++){

    console.log(personMethod[i]); // greeting | 哈摟

    person[personMethod[i]](); // 執行

}

Example 3

說明最終結果，並解釋其流程

function changeName(data) {
    data.name = '杰倫家';
    return data;
}
var family = {
    deposit: 100000,
    name: '小明家',
    members: {
        father: '老爸',
        mother: '老媽',
        ming: '小明'
    }
};
var family2 = jQuery.extend({}, changeName(family));
family2.members.jay = '杰倫';

console.log('family.name', family.name);
console.log('family.members.jay', family.members.jay);

console.log(family === family2);
console.log(family.members === family2.members);

我們可以透過 excel 表畫圖來思考這幾個 console.log 的結果：

Step 1: 首先我們定義一個物件變數 family，其中 members 又指向另一個物件

Step 2: 接著，物件 family2 透過 jQuery.extend( ) 做淺層複製。我們可以再來看一下 jQuery.extend( ) 的定義

所以， var family2 = jQuery.extend({ }, changeName(family)) 是先將 family 通過 changeName( ) (如下圖，將 0x01 的

name 改為
杰倫家 )，再將內容複製進 0x03 的空物件中。而又因為 jQuery.extend( ) 做的是淺層複製，所以 members 物件

仍舊指向原本的 0x02

Step 3: 由 Step 2 可以得知， members 物件指向 0x02 ，所以 family2.members.jay = '杰倫' 也會影響到 family.members

最後的 console.log 結果

function changeName(data) {
    data.name = '杰倫家';
    return data;
}
var family = {
    deposit: 100000,
    name: '小明家',
    members: {
        father: '老爸',
        mother: '老媽',
        ming: '小明'
    }
};
var family2 = jQuery.extend({}, changeName(family));
family2.members.jay = '杰倫';

console.log('family.name', family.name); // 杰倫家
console.log('family.members.jay', family.members.jay); // 杰倫

console.log(family === family2); // false
console.log(family.members === family2.members); // true

前言