DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
JavaScript入門知識
>>
JavaScript基礎知識
>> Javascript學習筆記3 作用域
Javascript學習筆記3 作用域
編輯:JavaScript基礎知識  
在Javascript,全局環境本身就一個對象。在浏覽器宿主中這個對象是window,而當Javascript用於其它非浏覽器的宿主,如嵌入式的環境中,可能會是其它的對象。
在這裡也糾正一個觀念,有很多人都認為Javascript只在浏覽器中使用,其實Javascript也能在很多非Web情況下使用,據介紹Javascript在一些基於嵌入式的應用領域表現得也很出色,當然這些我也只是聽過傳說而已。
言歸正傳,當我們寫下:var i=1時,其實就是聲明了一個window作用域的一個變量。
而當我們寫下i=1時,是聲明了一個window的屬性。
看這樣一段代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
這段代碼分別輸出的結果是:undefined world,welcome china, hello china.
我們來分別解釋:
在上文中,我們說過,在Javascript預編譯時,會把所有var變量創建,默認值為undefined,我們在這裡可以舉一個例子:
我們可以寫這樣一段代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
當我們執行運行這段腳本時,可以發現,首先彈出undefined,然後回提示腳本錯誤,提示b不存在。由此就可以表明,a在預編譯的過程中就已經被創建並且初始化為undefined,而b卻只能在實際運行時按順序去解釋。其實在預編譯後的Javascript代碼可以近乎理解如下:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
接下來我們可以談一下函數的作用域問題,每當代碼運行進入一個函數時,Javascript引擎就會自動創建一個新的作用域,然後把這個新作用域作為當前作用域的子作用域,然後把當前的代碼作用域切換到這個新作用域。當代碼退出函數時,這個作用域銷毀,把代碼作用域交還給他的父作用域。
好,准備工作差不多了,接下來我們就來解釋第一個問題:問什麼會輸出undefined world。
首先代碼進行在預編譯,當進入 Test方法時,開啟一個新作用域,然後把全局作用域作為他的父作用域。然後對Test內的方法進行預編譯,和上面的代碼一樣,Test方法被預編譯後方法體大致如下:
復制代碼
代碼如下:
function Test() {
var a = undefined;
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
當然,在當前作用域下無法找到b,於是他就會到他的父作用域下,也就是全局作用域找到了b=“world”。於是也就產生了這樣的結果。
第二次彈出welcome china,沒什麼好說的。
第三次,彈出hello china。我們可以這樣理解,var a 只是 方法Test的一個局部變量,而b由於事先未聲明,因此他會去父作用域中去找到對應的定義。
好,接下來,我們再看一下這個方法的若干個變體。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
首先,我們將方法體內的var a改成a,我們先不看答案,直接來分析,首先,在預編譯階段,方法體內幾乎沒有任何改變,因此此時a和b一樣,都要去他們的父作用域中去尋找,因此第一次出的結果應該是hello world,第二次沒什麼說的:welcome china,第三次由於a和b在本作用域內都沒有事先定義,因此都是再改變父作用域內的值,因此應該輸出welcome china.
我們繼續:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
和上面的分析一樣,應該輸出undefined undefined,welcome china,hello world.
繼續:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
應該是undefined world,welcome china,hello china.
經試驗,都沒問題, 不知道你明白了麼?
因此我們可以得出,每個變量在找不到自己的定義時,都會沿著作用鏈向上尋找,這樣就很可能會出現未預知的錯誤,給排錯添加了很多困難。更麻煩的是,還可能會對父作用域上的變量值進行修改,因此我們在聲明變量時應該盡量加上var,盡管Javascript並不強迫我們這樣做。
上一頁:
Javascript學習筆記4 Eval函數
下一頁:
Javascript學習筆記2 函數
JavaScript基礎知識
javascript學習指南之回調問題
回調地獄對 JavaScript 程序員來說,處理回調是家常,但是處理層次過深的回調就沒有那麼美好了
對Js OOP編程 創建對象的一些全面理解
面向對象是一種對現實世界理解和抽象的方法,是計算機編程技術發展到一定階段後的產物。對象的含義對象可以
JavaScript靜態類型檢查工具FLOW簡介
Flow是Facebook出品的,針對JavaScript的靜態類型檢查工具。其代碼托管在githu
相關文章
使用canvas繪制圓形和貝塞爾曲線
Javascript模擬拆紅包效果
JavaScript函數之美
JavaScript葵花寶典之閉包
原生Javascript插件開發實踐
理解JavaScript執行環境與作用域
JavaScript input框輸入實時校驗
原生javascript實現圖片放大鏡效果
javascript 隨機字符串
使用javascript生成的植物顯示過程特效
JavaScript基礎知識
JSON基礎
正則表達式
關於JavaScript
JavaScript技巧
jQuery入門知識
AJAX入門
JavaScript綜合知識
小編推薦
js 使用form表單select類實現級聯菜單效果
Javascript MD4
JS數組類型檢測
Js刪除數組中某一項或幾項的幾種方法(推薦)
js 網頁煙花效果
淺談JavaScript實現面向對象中的類
JS中數組的操作
JS獲取來源url
使用JS CSS去除IE鏈接虛線框的三種方法
appendChild() 或 insertBefore()使用與區別介紹
熱門推薦
JavaScript編程中的Promise使用大全
javascript中怎麼做對象的類型判斷
Javascript中的Split使用方法與技巧
WEB前端設計師常用工具集錦
arguments對象
裁剪字符串trim()自定義改進版
Ruffy javascript 學習筆記
Javascript基礎教程之變量
javascript深拷貝(deepClone)詳解
大家都在看
js HTML5多圖片上傳及預覽實例解析(不含前端的文件分割)
技術分享 如何使用CSS控制超鏈接文字樣式
JavaScript中Null與Undefined的區別解析
三個很特別的CSS小技巧分享
Extjs NumberField後面加單位實現思路
CSS在表格邊框上的美學應用:修飾之美
JavaScript 中的事件教程
快速搭建原型的工具WDL:微博交互設計
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved