iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
Modern Web

跟著 YDKJS 作者 Kyle Simpson 打造全新 JavaScript Mindset系列 第 19

[day18] YDKJS (Scope) : Nested scope

Nested Scope

對話大家放在心裡面,這邊先給到 line 7

你覺得 question 是什麼顏色?

  • blue
  • green

Variable 的 scope 在 function ask 內部是什麼 ?

var teacher = 'Kyle';
function otherClass(){
	var teacher = "Suzy";
  function ask(question){
  	console.log(teacher, question);
  }
  ask("Why?");
}

otherClass();

寫 function 要求接收一個 parameter,
這個接收的位置,在呼叫 function 真正執行時,會傳一個值,這個時候我們稱做 arguments

parameter 是一個 placeholder
arguments 會真實給一個 value

現在問題是,parameter 屬於哪個 scope ?
我們講過這張圖 :

可以看到 parameter 不用宣告,或是說 function 被 invoked ,
第一件事就是把 arguments 寫入 parameter 。

foo(2) // 2 : arguments
foo(2) invoked foo(a){...}
a = 3 // a : parameter , 3 : arguments
a 是在 function foo 內的 的 local lexical scope.

同樣的,line 7 也會先問 function ask 有沒有看過 teacher,
因為沒有看過,teacher 才會往上找,所以是藍色小球 。

找不到 Scope 的 function 怎麼辦?

解決了 line 7 ,

line 14 怎麼辦?

JavaScript engin:「嘿!紅色木桶的 Scope manager, 我有一個 identifier 是一個 source reference ,叫做 otherClass , 你有聽說過有一個叫做 ask 的小球嗎?」

紅色木桶的 Scope manager : 『No , 我沒看過它。』

訊息 : 「 Reference Error. 」

這時候你可能會 ?????
不是說 JavaScript 很白目,會自動 Dynamic Global Variable ???

JavaScript 自己認為自己很聰明 要符合幾個條件:

  1. 前提是,你是 target reference 。

這邊是 source reference ,很抱歉,直接 Error,

沒有找到 variable : ReferenceError。

進一步補充說明 undefined V.S. undeclared

undefined:變數存在,但是此時還沒有值。

undeclared:在任何 Scope 中,從來沒有正式宣告(formally declared)

我們沒有分配一顆任何顏色的小球給他。
1. strict mode : Reference Error.
2. non- strict mode : 如果是 target reference ,我們才動態幫它臨時宣告,且因為最上層是 global,他會是一個 global identifer.

Lexical Scope Eleavtor

最下面是我們開始的 Scope,
往上找到頂層(全域 作用域)就結束。

應該放到這邊解釋比較好。


題外話:最近這幾篇比較沒有連貫的感覺,因為一直在思考後面 Scope 的安排,
如果你已經熟悉 Scope ,可能會發現我寫的有點慢,
後面就會加快了,和之前寫 Coercion 一樣。


上一篇
[day17] YDKJS (Scope) : 不要耍白目 JavaScript! (Dynamic Global Variable, Strict Mode)
下一篇
[day19] YDKJS (Scope) : Kyle Simpson 史上超級無敵討厭 匿名函式(Anonymous function)
系列文
跟著 YDKJS 作者 Kyle Simpson 打造全新 JavaScript Mindset31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言