Javascript 的 Global object - window

紅寶鐵軌客
來關注...
關注/停止關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書」就會自動通知您,讓您更容易與作者互動。
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
寫程式中、折磨中、享受中 ......
747   0  
·
2019/02/26
·
3分鐘


這是一個 JavaScript 的小品,我只是發現很少人在討論這個,就順手寫了下來。

Javascript global object 

在 JS 中,window 一直是個我們常用來查瀏覽器狀況的物件,例如,我們要查瀏覽器的內部寬度:window.innerWidth 就是一個很方便的功能,但是其實,這個 window 就是 javascript 中的 global 物件,他很好玩,最簡單的應用就是看看有那些 function 或是 object 已經被載入了,你可以在 console 中試打一下,你就會發現,waha,沒想到我寫了那麼多的程式。

測試 function 被載入了沒

window 在瀏覽器中,就等於 this,不信?試試:console.log(this === window ),它就會跟你說‘是’,我們是同樣的東東,所以,一個很好用的應用就是:window 可以很簡單的用來測試那些 global function 被載入了沒,譬如:

// 新增一個 function 來測試
> funcAbc = function(e) { console.log(e) }
> ƒ (e) { console.log(e) }
> funcAbc("123")
> 123 
// ok,會動!

> 測試這個 function 存在嗎?
> if (window.funcAbc) {console.log("yes")};
> yes // 很好,有!

// 測試一個不存在的 function
> if (window.funcAbcd) {console.log("yes")};
// 很好,沒有輸出,所以可以用來檢查存不存在

// 如果直接用 function 來判斷? 
> if (funcAbc) {console.log("yes")};
> yes
// 咦?也可以用耶

// 只是,你如果用來測試不存在的 function
> if (funcAbcd) {console.log("yes")};
> Uncaught ReferenceError: funcAbcd is not defined at <anonymous>:1:1
// 哈哈,不行,會當掉

可是大家不是都用 typeof 來判斷有沒有嗎?這就是一個 global 跟 local 的問題了,如果你用 typeof 在一個 local block 中來判斷 function 存不存在,你如何確定它說的是 global 還是 local function?用 window.function 就可以確定一定是 global,交互運用,你就可以很清楚地知道這個 function 何處可以使用了。

取得 global 變數值

還有一個少用的應用是,用 window 可以確定讀取使用的是 global 變數,用下面的例子來說:

// 來一個 global 變數
var h1 = "Hello";

// 來一個用 global 變數的 function
function sayOutterHi() { 
    var h1 = "local";
    console.log(window.h1);
}

// 再來一個用 local 變數的 function
function sayInnerHi() { 
    var h1 = "local";
    console.log(h1);
}

// 試試 global 變數的 function
> sayOutterHi()
> global
// 很好,用 window 就可以讀到 global 變數

// 試試 local 變數的 function
> sayInnerHi()
> local
// 哈哈,沒錯

雖然,我們真的不應該用一樣的變數名稱......

let 跟 const 不是 global object 

let 跟 const 是新的東東,ES-2015 以後的新增的東西,它們就不是 global 物件了,他們被稱為是 global Environment Record,什麼跟什麼,反正,let 跟 const 就不是 global 物件就是了,有興趣,自己研究一下吧,我是覺得 JS 一路改,有點煩。

讀取同一來源的網站資料

一個瀏覽器的分頁可以有好幾個 <iframe>,每一個分頁都有它自己的 window 物件跟 global 變數,JavaScript 是允許不同的分頁中,如果是同一來源的(同網址,同 portocol,同一個 port),互相存取,這很有趣,再來一個例子:

var win = window.open("/new_page");

// 要等到新頁開好
win.onload = function(){ alert(win.document.title); };

小品啦,希望有用。


喜歡作者的文章嗎?馬上按「關注」,當作者發佈新文章時,思書™就會 email 通知您。

思書是公開的寫作平台,創新的多筆名寫作方式,能用不同的筆名探索不同的寫作內容,無限寫作創意,如果您喜歡寫作分享,一定要來試試! 《 加入思書》

思書™是自由寫作平台,本文為作者之個人意見。


文章資訊

Categories:
Tags:
Date:
Published: 2019/02/26 - Updated: 2019/08/17
Total: 801 words


分享這篇文章:
關於作者

很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
就,這會一點點,那會一點點⋯⋯




參與討論!
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入


×
登入
申請帳號

需要幫助
關於思書

暗黑模式?
字體大小
成人內容未過濾
更改語言版本?