iT邦幫忙

2

javascript 相關的基礎問題

最近在惡補javascript的基礎
有些觀念需要釐清 請教各位大大
Q1

function fx(){
  var a = 1; // 這時候a宣告=1
  a = 2; // 這時候a=2
  var b = g(); 
  a = 3;
  
  return b;
  
  function g (){
    return a; // a=2
  }
}

fx();

執行fx();
output:2
是因為在g()結束的時候有return的緣故
所以在其後 a=3 便不會被執行嗎?

Q2

for (var i = 0; i < 5; i++) {
  setTimeout(function() { console.log(`time:${i}`); });
  console.log(i)
}

output:
0
1
2
3
4
"time:5"
"time:5"
"time:5"
"time:5"
"time:5"
是因為setTimeout本身有時間延遲特性的關係
所以console.log(i)先執行 然後在for loop到最後一位時執行嗎?
另外為何setTimeout console出的i=5 而不是4?

1 個回答

1
dragonH
iT邦大師 1 級 ‧ 2019-07-18 12:11:42
最佳解答

Q1
跟 g() 的 return 沒啥關係

你這樣寫

function fx(){
  var a = 1;
  a = 2;
  var b = a;
  // var b = g();
  a = 3;
  return b;
  function g() {
    return a; // a=2
  }
}

也是會得到2
codepen

Q2

因為 settimeout 跟迴圈共用的是同一個 i

所以當迴圈結束時

i 會等於 5

也就是你看到的結果

參考

看更多先前的回應...收起先前的回應...
dc88 iT邦新手 5 級 ‧ 2019-07-18 12:38:26 檢舉

謝謝大大回覆!
所以Q1會得到 2 的原因其實是因為 b 宣告位置的緣故嗎?

dragonH iT邦大師 1 級 ‧ 2019-07-18 13:05:45 檢舉

在你這情況的話

asqweff11 iT邦新手 5 級 ‧ 2019-07-18 16:44:21 檢舉

0

dragonH iT邦大師 1 級 ‧ 2019-07-18 16:56:26 檢舉

for (var i = 0; i < 5; i++) {
setTimeout(console.log(time:${i}));
console.log(i)
}

你這樣改

settimeout就沒用了

雖然本來就沒有設秒數

不過要跟著 i

改用 let 就好

codepen

dc88 iT邦新手 5 級 ‧ 2019-07-18 18:41:41 檢舉

不好意思 看過大大提供的資料後, Q2 這部分還是不太懂
資料中有一部份這樣描述
" i 屬於函式 foo 的範疇,而非假想的 for loop 的區塊範疇 "

function foo() {
  for(var i = 0; i < 10; i++) {
    console.log(i);
  }
}

我理解為 因為用 var 宣告 i 所以在 for loop 外還是可以獲取 i 的值(值洩漏出去?)

function foo() {
  for(var i = 0; i < 10; i++) {
    console.log(i);
  }
  console.log("i is: " + i)
}
foo();

output:
https://ithelp.ithome.com.tw/upload/images/20190718/201122891FoXsVHmZ7.png
但 i 為什麼會顯示 10 而不是 9 呢?
for loop 的條件不是 i 從 0 開始累加 1 ,數到9(<10)
就脫離迴圈了嗎?

dragonH iT邦大師 1 級 ‧ 2019-07-18 18:52:11 檢舉

因為迴圈每跑完 1 次 就會 + 1 (i++)

直到 i 不符合 迴圈條件 (i < 10) 才會脫離迴圈

i = 9 時 因為還是符合迴圈條件

所以仍然會執行迴圈裡的內容

等到 i = 10 時

就不符合 i < 10 的這條件

所以脫離迴圈

所以最後就會印出 10

dc88 iT邦新手 5 級 ‧ 2019-07-18 23:39:20 檢舉

謝謝大大詳細的講解 總算完全理解了
感恩/images/emoticon/emoticon02.gif

dragonH iT邦大師 1 級 ‧ 2019-07-18 23:53:42 檢舉

/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答