快捷導(dǎo)航

Javascript window對象詳解

更新時(shí)間：2014年11月12日 17:16:14 投稿：hebedich

本文詳細(xì)介紹了JavaScript的window對象。Windows對象是一個(gè)頂層對象，而不是另一個(gè)對象的屬性即瀏覽器的窗口。

首先看我們的源代碼。

<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="utf-8" />  

        <title>深入理解Javascript</title>  

        <script type="text/javascript" charset="utf-8">  

            console.log(this);  

        </script>  

    </head>  

    <body>  

        <h1>深入理解Javascript</h1>  

    </body>  

</html>

我們知道，通過瀏覽器打開這個(gè)頁面，包含在<script> </script>標(biāo)簽中的腳本會(huì)被執(zhí)行，

那我們看一下 console.log(this); 這個(gè)this 到底指向的是誰呢？

在Google Chrome 中我們看到:

在Mozilla Firefox 中我們看到:

我們都看到輸出的Window，那這個(gè)Window 與window是不是相等呢？

接著我們的測試

復(fù)制代碼代碼如下:

<script type="text/javascript" charset="utf-8">  

    console.log(this);  

    console.log('this == window ? ', this == window);   

</script>

運(yùn)行代碼，輸出this == window ?true ，這說明 Window== window，真的是這樣嗎？

為了搞清楚它們之間的關(guān)系，我們又接著測試

復(fù)制代碼代碼如下:

<script type="text/javascript" charset="utf-8">  

    console.log('this = ', this);  

    console.log('this == window ?', this == window);  

    console.log('window = ', window);  

    console.log('Window = ', Window)  

    console.log('Window == window ?', Window == window)  

</script>

看瀏覽器輸出:

Google Chrome :

Mozilla Firefox :

從輸出結(jié)果我們可以推出,

復(fù)制代碼代碼如下:

this是指向Window對象；

this也等于window對象；

window也是指向Window對象；

Window是指向Window{},是瀏覽器提供的對象；

Window不等于window；

為什么會(huì)這樣呢？

我們在瀏覽器控制臺(tái)中查看Window對象的結(jié)構(gòu)；

原來 Window對象包含的一些瀏覽器廠商實(shí)現(xiàn)的API，比如 html5中的規(guī)范 sessionStorage；
它還有一個(gè)window的屬性，這個(gè)屬性的值就是指向Window對象；
我的理解：Window對象是為瀏覽器廠商服務(wù)的，我們不能直接操作Window對象的屬性，Window新增的API會(huì)反映到 window 對象中;
我們操作window 的屬性會(huì)反映到 Window 對象中。
比如定義一個(gè)全局變量 window.a = 'aaa';

JavaScript的所有對象都存在于一個(gè)運(yùn)行環(huán)境之中，這個(gè)運(yùn)行環(huán)境本身也是對象，稱為“頂層對象”。這就是說，JavaScript的所有對象，都是“頂層對象”的下屬。不同的運(yùn)行環(huán)境有不同的“頂層對象”，在瀏覽器環(huán)境中，這個(gè)頂層對象就是window對象。

所有瀏覽器環(huán)境的全局變量，都是window對象的屬性。

可以把window理解成JavaScriptContext 上下文環(huán)境。

您可能感興趣的文章: