JavaScript 核心觀念(44)-函式以及 This 的運作-this 課後練習

前言

接下來將會集中練習 this 囉~

第一題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
8
9
10
11
12
13
function callName() {
console.log(this.name);
}
var auntie = {
name: '漂亮阿姨',
callName: callName,
watch: {
name: 'Magic Watch',
callName: callName
}
}
auntie.callName();
auntie.watch.callName();
  1. 漂亮阿姨 / Magic Watch
  2. Magic Watch / 漂亮阿姨
  3. 漂亮阿姨 / undefined
  4. Magic Watch / undefined
點我看解答(請認真思考後再看解答)

答案是:「1」

首先這題基本觀念在於 this 的呼叫方式,在此由於 callName() 是基於 auntie 物件下呼叫的,因此 this 就會指向到 漂亮阿姨

而第二個答案也是相同,this 是在 watch 呼叫,因此 this 答案就會是 Magic Watch

第二題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function callName() {
console.log(this.name);
}
var auntie = {
name: '漂亮阿姨',
callName: callName,
watch: {
name: 'Magic Watch',
callName: callName
}
}
var callName1 = auntie;
var callName2 = auntie.watch;
var callName3 = callName1.callName();
var callName4 = callName2.callName;

callName3;
callName4;
  1. 漂亮阿姨 / Magic Watch
  2. Magic Watch / 漂亮阿姨
  3. 漂亮阿姨 / function callName()
  4. Magic Watch / function callName()
點我看解答(請認真思考後再看解答)

答案是:「3」

這一題其實有點刻意建立很多變數來混淆視聽,其實認真一看只是差別在於有無呼叫而已唷。

第三題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
8
9
10
11
12
13
var name = '小明';
function namefu () {
console.log(this.name);
};

var a = {
name: '小王',
myname: namefu,
};

namefu.name='小美';

a.myname();
  1. 小明
  2. 小美
  3. 小王
  4. undefined
點我看解答(請認真思考後再看解答)

答案是:「3」

主要考的觀念一樣,不管怎麼樣 this 終究會基於怎麼呼叫而決定它參考誰。

第四題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
8
9
10
var name = '小明';
var obj = {
x: function () {
name = '小王';
console.log(this.name);
},
y: '2',
}

obj.x();
  1. 小明
  2. 小美
  3. 小王
  4. undefined
點我看解答(請認真思考後再看解答)

答案是:「4」

請注意,由於 this 是在 obj 底下呼叫,但底下並沒有 name 屬性,因此為 undefined

第五題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
8
9
10
var name = '小明';
var obj = {
x: function() {
name = '小王';
console.log(this.name);
},
y: '2',
}

obj.x();
  1. 小明
  2. 小美
  3. 小王
  4. undefined
點我看解答(請認真思考後再看解答)

答案是:「4」

這題似乎是我出錯到重複了。

第六題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var name = '小明';
var obj = {
x: {
name: '小虎',
myname: function () {
console.log(this.name);
setTimeout(function () {
console.log(this.name);
},500)
}
},
y: '2',
name: '小王',
}

var a = obj.x.myname();
a;
  1. 小明 / 小王
  2. 小虎 / undefined
  3. 小虎 / 小明
  4. 小虎 / 小王
點我看解答(請認真思考後再看解答)

答案是:「3」

這一題第一個 this 比較沒什麼問題,因為在 x 底下呼叫因此是 小虎,但是第二個是因為 simple call 關係,因此會指向到 Window 導致答案是 小明

第七題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
8
9
10
function callName(name) {
console.log(this.name, name);
}

var name = '全域阿婆';
var auntie = {
name: '漂亮阿姨',
}
callName(undefined, '小明');
callName.call(auntie, '小明');
  1. 全域阿婆 / undefined漂亮阿姨 / 小明
  2. undefined / 小明漂亮阿姨 / 小明
  3. undefined / 小明全域阿婆 / 小明
  4. 漂亮阿姨 / undefined全域阿婆 / 小明
點我看解答(請認真思考後再看解答)

答案是:「1」

首先第一個 callName(undefined, '小明'); 因為是直接呼叫 this 因此指向會是 window,所以是全域阿婆,而 undefined 則是因為第一個參數傳入的關係。

而第二個因為使用了 call 指定了 this 指向變成指向到 auntie,所以第一個 this 就會是 漂亮阿姨 第二個則是 小明

第八題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
8
9
10
11
var name = '全域';
var auntie = {
name: '漂亮阿姨',
callName: function () {
console.log(this.name);
}
};
(function() {
var a = auntie.callName;
a();
})();
  1. 全域
  2. 漂亮阿姨
  3. undefined
點我看解答(請認真思考後再看解答)

答案是:「1」

這一題非常簡單,因為是直接呼叫的關係,因此是 全域

第九題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
var name = '全域';
(function () {
var name = '區域';
setTimeout(function() {
console.log(this.name);
},500)
})();
  1. 全域
  2. 漂亮阿姨
  3. undefined
點我看解答(請認真思考後再看解答)

答案是:「1」

這一題一樣是 全域 就算放進 setTimeout 中依然是直接呼叫 this

第十題

請問 this 將會出現什麼答案?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var name = '小明';

function callName(name) {
console.log(this.name);
}

var obj = {
name: '小美',
family: {
name: '小王',
},
};

callName.name = '小光';

var a = callName.bind(obj, '小城');
a();
  1. 小明
  2. 小美
  3. 小王
  4. 小光
  5. 小城
點我看解答(請認真思考後再看解答)

答案是:「2」

這一題主要是考 bind 並不是立即執行,因此在此將 this 指向到 obj,但後來才呼叫,因此答案是 小美

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ