首頁 > 開發者 > JavaScript
標籤：splay fun 自己的 變數聲明 object 函數參數 sed oct 案例
javascript函數以及範圍簡介
尹正傑
著作權聲明：原創作品，謝絕轉載！否則將追究法律責任。
一.基本函數
對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數，函數內的特殊值arguments中封裝了所有實際參數。JavaScript中函數基本上可以分為以下三類：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正傑的基本函數</title> 6 </head> 7 <body> 8 9 <script>10 //1.普通函數定義11 function Get(name) {12 console.log(name); //列印變數13 }14 Get("yinzhengjie");15 16 //2.自動執行函數,17 (function (age) {18 alert(age); //彈窗效果的變數19 })("18");20 21 function func(arg) {22 arg()23 }24 //3.匿名函數,可以當做一個參數傳遞。25 var yzj = function () {alert("尹正傑")};26 func(yzj)27 28 </script>29 30 </body>31 </html>
二.範圍
1.什麼是範圍
JavaScript中每個函數都有自己的範圍，當出現函數嵌套時，就出現了範圍鏈。當內層函數使用變數時，會根據範圍鏈從內到外一層層的迴圈，如果不存在，則異常。變數的範圍是在聲明時決定的而不是調用執行時決定。也就是說，所有的範圍在建立函數且未執行時候就已經存在。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script type="text/javascript"> //如果不寫類型的話，預設就是type="text/javascript",注釋方法和golang類似。 9 var a=100,b=200; 10 window.a =100;11 window.b = 200;12 function A() {13 var a=33,b=99;14 function B() {15 var a=11,b=22;16 console.log(a+b);17 }18 return B() 19 }20 A()21 </script>22 </body>23 </html>
2.詞法分析
我們瀏覽器是如果分析我們的html檔案呢？其實瀏覽器內建了html,css,javascript引擎分別取解析不同的代碼。瀏覽器的js引擎在遇到函數的時候，在函數執行前，會進行一個先行編譯，這個先行編譯的過程就是詞法分析。會形成一個使用中的物件，即Active Object,簡稱AO。詞法分析分大致分為以下三個步驟：
a>.分析函數的參數：
如果沒有參數的話，AO對象沒有任何屬性,例如：AO.age = undefined。如果有的話就回接受參數的值。如AO.age = 100.
b>.分析函數的變數聲明：
會一次性拿到函數內的所有的變數名稱，我們稱如果沒有函數生命運算式就不處理，這些變數名稱為使用中的物件，它會將所有的變數儲存起來，並賦值為undefined，當調用該函數的時候，它才會進行賦值操作。
c>.分析函數的函式宣告運算式
所謂的函式宣告運算式就是關鍵字“function(){}”,如果存在函數名稱和變數名稱重複， 就會用這個變數名稱將之前的變數進行覆蓋喲！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 var str = "locale"; //當然，也可以這樣寫： window.str = "locale";10 11 function t() {12 console.log(str); //輸出“undefined”13 var str = "locale";14 console.log(str); //輸出“locale”15 }16 t();17 </script>18 </body>19 </html>範圍案例1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 function t(age) {10 console.log(age); //此時的age已經被下面的函數運算式覆蓋了，因此它的值為：“function age() {}”，11 var age =99;12 console.log(age); //它的值應該是99，因為我們在他的上一行已經定義了他的值。13 function age() {14 }15 console.log(age); //同理，其值還是9916 }17 t(5);18 </script>19 </body>20 </html>範圍案例2
如果你對詞法分析的知識掌握以及很透徹了，那麼上面的2道企業的面試題，你是否一眼能看出真身呢？
三.閉包函數
1.什麼是閉包函數
官方”的解釋是：閉包是一個擁有許多變數和綁定了這些變數的環境的運算式（通常是一個函數），因而這些變數也是該運算式的一部分。相信很少有人能直接看懂這句話，因為他描述的太學術。我對閉包函數的理解就是父函數可以取到子函數的變數的函數就叫閉包函數。相信學習了範圍，也都明白全域變數和局部變數的意思吧，我們可以知道在函數中，一個局部變數範圍可以很輕鬆的拿到全域變數的數值，但是在全域變數範圍中想要拿到局部範圍的變數就得利用閉包函數啦。
2.閉包的作用
閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變數，另一個就是讓這些變數的值始終保持在記憶體中。我們可以看以下案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正傑的閉包函數</title> 6 </head> 7 <body> 8 <script> 9 function A(){10 var n= 999;11 nAdd = function(){n+=1001};12 function B(){13 alert(n);14 }15 return B;16 }17 var result=A();18 result(); //調用A函數，於是會產生n和nAdd這兩個變數,與此同時還會返回B的執行結果.19 nAdd(); //我們將匿名函數nAdd執行。20 result(); //由於上面執行了nAdd匿名函數，也就是將n的數值增加1001，因此我們看到的結果應該是2000才對。21 </script>22 </body>23 </html>
3.使用閉包的注意點
a>.由於閉包會使得函數中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題，在IE中可能導致記憶體泄露。解決方案是，在退出函數之前，將不使用的局部變數全部刪除。
b>.閉包會在父函數外部，改變父函數內部變數的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變數當作它的私人屬性（private value），這時一定要小心，不要隨便改變父函數內部變數的值。
四.物件導向
其實在javascript編程裡面，並沒有用關鍵字定義一個對象類，它不像python或是golang等其他語言，有類似關鍵字“class”，或是“type .... struct”來聲明一個對象。我們定義javascript的對象時，其實還是用function關鍵字來定義，只不過我們定義函數時並麼有要求首字母是否大寫，而定義一個對象時，潛規則就是函數名的首字母需要大寫。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尹正傑的物件導向</title> 6 </head> 7 <body> 8 <script> 9 //定義一個javascript的類，並初始化內部資料。10 function Foo(name,age) {11 this.Name = name;12 this.Age = age;13 }14 15 //給我們定義j具體的方法.我們稱之為利用原型實現方法重用.16 Foo.prototype = {17 "show":function () {18 alert(this.Name);19 },20 "print":function () {21 alert("尹正傑");22 }23 };24 25 //執行個體化我們定義的對象，產生obj.26 obj = new Foo("尹正傑",18);27 alert(obj.Name);28 alert(obj.print);29 30 </script>31 </body>32 </html>
javascript函數以及範圍簡介
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
