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

前言

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

第一題

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

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 將會出現什麼答案?

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 將會出現什麼答案?

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 將會出現什麼答案?

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 將會出現什麼答案?

var name = '小明';
var obj = {
  x: function()  {
  name = '小王';
  console.log(this.name);
  },
  y: '2',
}

obj.x();

1. 小明
2. 小美
3. 小王
4. undefined

點我看解答(請認真思考後再看解答)

答案是：「4」

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

第六題

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

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 將會出現什麼答案?

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 將會出現什麼答案?

var name = '全域';
var auntie = {
  name: '漂亮阿姨',
  callName: function () {
    console.log(this.name);
  }
};
(function() {
  var a = auntie.callName;
  a();
})();

1. 全域
2. 漂亮阿姨
3. undefined

點我看解答(請認真思考後再看解答)

答案是：「1」

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

第九題

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

var name = '全域';
(function () {
  var name = '區域';
  setTimeout(function() {
    console.log(this.name);
  },500)
})();

1. 全域
2. 漂亮阿姨
3. undefined

點我看解答(請認真思考後再看解答)

答案是：「1」

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

第十題

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

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，但後來才呼叫，因此答案是 小美。

參考文獻

• JavaScript 核心篇