Javascript 的 Global object - window

紅寶鐵軌客
Join to follow...
Follow/Unfollow Writer: 紅寶鐵軌客
By following, you’ll receive notifications when this author publishes new articles.
Don't wait! Sign up to follow this writer.
WriterShelf is a privacy-oriented writing platform. Unleash the power of your voice. It's free!
Sign up. Join WriterShelf now! Already a member. Login to WriterShelf.
寫程式中、折磨中、享受中 ......
747   0  
·
2019/02/26
·
3 mins read


這是一個 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); };

小品啦,希望有用。


WriterShelf™ is a unique multiple pen name blogging and forum platform. Protect relationships and your privacy. Take your writing in new directions. ** Join WriterShelf**
WriterShelf™ is an open writing platform. The views, information and opinions in this article are those of the author.


Article info

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


Share this article:
About the Author

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




Join the discussion now!
Don't wait! Sign up to join the discussion.
WriterShelf is a privacy-oriented writing platform. Unleash the power of your voice. It's free!
Sign up. Join WriterShelf now! Already a member. Login to WriterShelf.