先,上幾道我編寫的 js 題,作為分析的樣本。
請根據代碼,選擇正確的選項。
第一題
var a = 0; function test(){ alert(a); } test();
A. 0
B. null
C. undefined
第二題
var a = 0; function test(){ alert(a); a = 100; } test();
A. 0
B. null
C. undefined
第三題
var a = 0; function test(){ alert(a); var a = 100; } test();
A. 0
B. 100
C. undefined
正確答案:
A , A , C
前兩題沒啥好說的,之前關于閉包的博文中已經講得很清楚了,函數 test 形成了自己的閉包,所以能夠訪問到全局作用域里面的變量 a 。
第三題可能有人會覺得有點奇怪,為啥是 undefined 的呢?雖然我在閉包內定義了 var a = 100 , 可是它分明是在 alert 語句的下面啊,所以不是應該先打印出全局作用域里的 a 嗎?
不要著急,我們來講一個故事吧,當你將這段代碼放進瀏覽器跑起來的那一個瞬間,到底發生了哪些有趣的事情。
當你刷新瀏覽器之后。。。
0.00000001 毫秒的時候
Paste_Image.png
編譯器看到了這句話,
var a = 0;
編譯器 : ‘nice,發現一個活的 a 變量,我要把它丟到作用域中去囚禁它!
于是
0.00000002 毫秒的時候
編譯器 : nice,發現一個活的 test 變量,我擦,還是一個函數類型,作用域,又有新貨了!
作用域 : ‘可以呀,小伙子!’
于是:
編譯器順便把 test 函數給“扒”了,又發現里面有這么一句話:
var a = 100;
編譯器:小樣,別以為你躲在 test 函數的私有作用域里面我就找不到你了,全局作用域中的a和你沒關系,你也進去!
編譯器:嗯,沒找到什么變量定義了,好,我去休息啦。
0.00000003 毫秒的時候
js引擎:終于輪到我出場了。
var a = 0;
a(全局): js引擎大哥,給我吃飯吧 。。。
js引擎: 吵啥子吵,先給你個undefined,吃這個吧 。
于是:
a(全局):只要心中有夢想,undefined也是嚼勁十足!
js引擎: 等號右邊有一個 0 ,我把它給你吧。
a(全局):謝謝引擎大哥。
同樣的,test 變量 也吃上了飯。
a(局部) : 大哥,我別這么偏袒全局作用域啊,同樣是 a 變量,我也要吃飯啊!
js引擎:你在函數內部,我還沒執行函數呢,怎么給你吃飯呀,先給你個undefined吧。
a(局部) :可是我旁邊有一個100啊。
js引擎:我剛才不是說了嗎,我還沒執行你呢,別挑了,有個undefined啃啃也不錯了。
0.00000004 毫秒的時候
test();
js引擎:我要開始執行test函數了。
alert(a);
js引擎:作用域在嗎,我知道alert是一個內置函數,當我在執行它的時候,發現有一個a變量作為參數傳進去了,你見過它么?
作用域:有啊,就那個剛才還吵著要吃飯的家伙。
js引擎:哦,我想起來了,現在它估計還在啃undefined呢,行吧,你把它給我吧,alert方法點名要找他呢。
作用域:OK。
故事到這里就講完了,現在你應該明白為什么第三題的答案是undefined了吧。
附加題:
var a = 0; function test(){ alert(a); if(false){ var a = 100; } } test();
A. 0
B. 100
C. undefined
別猶豫,大聲說出你的答案吧!
可以將答案寫在評論中哦!
avaScript 是網景(Netscape)公司開發的一種基于客戶端瀏覽器、面向(基于)對象、事件驅動式的網頁腳本語言。JavaScript語言的前身叫作Livescript。
文本編輯器
Web瀏覽器
解釋執行(由上而下)
JavaScript1.0——JavaScript1.4
JavaScript/IE3.0、JavaScript1.2/IE4.0;
微軟允許用戶自行設置對JavaScript處理模式。
JavaScript與Java的區別體現在:
首先,它們是兩個公司開發的不同的兩個產品,Java是SUN公司推出的新一代面向對象的程序設計語言,特別適合于Internet應用程序開發;而JavaScript是Netscape公司的產品,其目的是為了擴展Netscape Navigator功能而開發的一種可以嵌入Web頁面中的基于對象和事件驅動的解釋性語言。
其次,JavaScript是基于對象的,而Java是面向對象的,即Java是一種真正的面向對象的語言,即使是開發簡單的程序,必須設計對象。JavaScript是種腳本語言,它可以用來制作與網絡無關的,與用戶交互作用的復雜軟件。它是一種基于對象和事件驅動的編程語言。因而它本身提供了非常豐富的內部對象供設計人員使用。
第三,兩種語言在其瀏覽器中所執行的方式不一樣。Java的源代碼在傳遞到客戶端執行之前,必須經過編譯,因而客戶端上必須具有相應平臺上的仿真器或解釋器,它可以通過編譯器或解釋器實現獨立于某個特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語言,其源代碼在發往客戶端執行之前不需經過編譯,而是將文本格式的字符代碼發送給客戶,由瀏覽器解釋執行。
第四,兩種語言所采取的變量是不一樣的。Java采用強類型變量檢查,即所有變量在編譯之前必須作聲明。JavaScript中變量聲明,采用其弱類型。即變量在使用前不需作聲明,而是解釋器在運行時檢查其數據類型。
第五,代碼格式不一樣。Java是一種與HTML無關的格式,必須通過像HTML中引用外媒體那么進行裝載,其代碼以字節代碼的形式保存在獨立的文檔中。JavaScript的代碼是一種文本字符格式,可以直接嵌入HTML文檔中,并且可動態裝載。編寫HTML文檔就像編輯文本文件一樣方便。
第六,嵌入方式不一樣。在HTML文檔中,兩種編程語言的標識不同,JavaScript使用<script>...</script>來標識,而Java使用<applet> ... </applet> 來標識。
第七,靜態綁定和動態綁定。Java采用靜態聯編,即Java的對象引用必須在編譯時的進行,以使編譯器能夠實現強類型檢查,如不經編譯則就無法實現對象引用的檢查。JavaScript采用動態聯編,即JavaScript的對象引用在運行時進行檢查。
如果想要更高效、更系統地學會javascript,最好采用邊學邊練的學習模式。
今天分享的這套JavaScript學習教程,講解了前端開發中的核心技術JavaScript,俗稱JS
內容涵蓋:JavaScript核心語法、JavaScript內置支持類、JavaScript調試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對象、繼承、JSON等知識點,該視頻可以開啟你的WEB前端之路。
1. .JavaScript教程-JavaScript概述
2. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式1
3. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式2
4. .JavaScript教程-HTML嵌入JavaScript代碼的第二種方式
5. .JavaScript教程-HTML嵌入JavaScript代碼的第三種方式
6. JavaScript教程-JS的標識符
7. .JavaScript教程-JS的變量1
8. .JavaScript教程-JS的變量2
9. JavaScript教程-JS的函數初步1
10. .JavaScript教程-JS的函數初步2
11. .JavaScript教程-全局變量和局部變量
12. .JavaScript教程-JS的數據類型
13. .JavaScript教程-Undefined數據類型
14. .JavaScript教程-Number數據類型
15. .JavaScript教程-Boolean數據類型
16. .JavaScript教程-回顧數據類型
17. .JavaScript教程-String數據類型
18. .JavaScript教程-Object數據類型
19. JavaScript教程-Object數據類型2
20. .JavaScript教程-Object數據類型3
21. .JavaScript教程-null undefined NaN的區別以及等同和全等運算符
22. .JavaScript教程-JS的常用事件
23. .JavaScript教程-回調函數的概念
24. .JavaScript教程-注冊事件的兩種方式
25. JavaScript教程-JS代碼的執行順序
26. .JavaScript教程-JS代碼的執行順序2
27. JavaScript教程-捕捉回車鍵
28. .JavaScript教程-捕捉回車鍵2
29. .JavaScript教程-void運算符
30. .JavaScript教程-JS的控制語句
31. JavaScript教程-設置和獲取文本框的value
32. JavaScript教程-innerHTML和innerText屬性
33. .JavaScript教程-正則表達式
34. .JavaScript教程-郵箱地址的正則表達式
35. JavaScript教程-擴展字符串的trim函數
36. .JavaScript教程-回顧JS
37. JavaScript教程-表單驗證
38. JavaScript教程-表單驗證2
39. JavaScript教程-表單驗證3
40. .JavaScript教程-表單驗證4
41. .JavaScript教程-復選框的全選和取消全選
42. .JavaScript教程-獲取下拉列表選中項的value
43. .JavaScript教程-周期函數setInterval
44. .JavaScript教程-內置支持類Array
45. .JavaScript教程-BOM編程window的open和close
46. .JavaScript教程-BOM編程彈出確認框
47. .JavaScript教程-(補錄)-將當前窗口設置為頂級窗口
48. .JavaScript教程-BOM編程history和location對象
49. .JavaScript教程-JSON在開發中的使用
50. .JavaScript教程-JSON在開發中的使用2
51. JavaScript教程-JSON在開發中的使用3
52. .JavaScript教程-JSON在開發中的使用4
53. JavaScript教程-JSON在開發中的使用5
日常工作總會遇到在<a>標簽中執行js代碼的情況 現在做一個總結,希望對大家有一個幫助。
1、a href="javascript:js_method();"
這是我們平臺上常用的方法,但是這種方法在傳遞this等參數的時候很容易出問題,而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發window.onbeforeunload事件,在IE里面更會使gif動畫圖片停止播放。
W3C標準不推薦在href里面執行javascript語句。
2、a href="javascript:void(0);" onclick="js_method()"
這種方法是很多網站最常用的方法,也是最周全的方法,onclick方法負責執行js函數,而void是一個操作符,void(0)返回undefined,地址不發生跳轉。而且這種方法不會像第一種方法一樣直接將js方法暴露在瀏覽器的狀態欄。
3、a href="javascript:;" onclick="js_method()"
這種方法也是網上很常見的代碼,#是標簽內置的一個方法,代表top的作用。所以用這種方法點擊后網頁后返回到頁面的最頂端。<a href="#"></a> 如果頁面有滾動條 點擊后網頁后返回到頁面的最頂端。
4、a href="#" onclick="js_method();return false;"
這種方法點擊執行了js函數后return false,頁面不發生跳轉,執行后還是在頁面的當前位置。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。