javascript
学习JavaScript 的必备
2019獨角獸企業重金招聘Python工程師標準>>>
?? -------------------該文摘自于匿名教程總結，希望對初學js的同學有幫助，因為它解決了我學習js的眾多迷惑。。。
函數是進行模塊化程序設計的基礎，編寫復雜的Ajax應用程序，必須對函數有更深入的了解。
javascript中的函數不同于其他的語言，每個函數都是作為一個對象被維護和運行的。通過函數對象的性質，可以很方便的將一個函數賦值給一個變量或者將函數作為參數傳遞。在繼續講述之前，先看一下函數的使用語法：
以下是引用片段：
function?func1(…){…}?
var?func2=function(…){…};?
var?func3=function?func4(…){…};?
var?func5=new?Function();??
這些都是聲明函數的正確語法。它們和其他語言中常見的函數或之前介紹的函數定義方式有著很大的區別。那么在JavaScript中為什么能這么寫？它所遵循的語法是什么呢？下面將介紹這些內容。
認識函數對象（Function?Object）
可以用function關鍵字定義一個函數，并為每個函數指定一個函數名，通過函數名來進行調用。在JavaScript解釋執行時，函數都是被維護為一個對象，這就是要介紹的函數對象（Function?Object）。
函數對象與其他用戶所定義的對象有著本質的區別，這一類對象被稱之為內部對象，例如日期對象（Date）、數組對象（Array）、字符串對象 （String）都屬于內部對象。這些內置對象的構造器是由JavaScript本身所定義的：通過執行new?Array()這樣的語句返回一個對 象，JavaScript內部有一套機制來初始化返回的對象，而不是由用戶來指定對象的構造方式。
在JavaScript中，函數對象對應的類型是Function，正如數組對象對應的類型是Array，日期對象對應的類型是Date一樣，可以通 過new?Function()來創建一個函數對象，也可以通過function關鍵字來創建一個對象。為了便于理解，我們比較函數對象的創建和數組對象 的創建。先看數組對象：下面兩行代碼都是創建一個數組對象myArray：
以下是引用片段：
var?myArray=[];?
//等價于?
var?myArray=new?Array();?
同樣，下面的兩段代碼也都是創建一個函數myFunction：?
function?myFunction(a,b){?
??????return?a+b;?
}?
//等價于?
var?myFunction=new?Function("a","b","return?a+b");???
通過和構造數組對象語句的比較，可以清楚的看到函數對象本質，前面介紹的函數聲明是上述代碼的第一種方式，而在解釋器內部，當遇到這種語法時，就會自 動構造一個Function對象，將函數作為一個內部的對象來存儲和運行。從這里也可以看到，一個函數對象名稱（函數變量）和一個普通變量名稱具有同樣的 規范，都可以通過變量名來引用這個變量，但是函數變量名后面可以跟上括號和參數列表來進行函數調用。
用new?Function()的形式來創建一個函數不常見，因為一個函數體通常會有多條語句，如果將它們以一個字符串的形式作為參數傳遞，代碼的可讀性差。下面介紹一下其使用語法：
以下是引用片段：
var?funcName=new?Function(p1,p2,...,pn,body);?
??????參數的類型都是字符串，p1到pn表示所創建函數的參數名稱列表，body表示所創建函數的函數體語句，funcName就是所創建函數的名稱。可以不指定任何參數創建一個空函數，不指定funcName創建一個無名函數，當然那樣的函數沒有任何意義。
需要注意的是，p1到pn是參數名稱的列表，即p1不僅能代表一個參數，它也可以是一個逗號隔開的參數列表，例如下面的定義是等價的：
以下是引用片段：
new??Function("a",?"b",?"c",?"return?a+b+c")?
new?Function("a,?b,?c",?"return?a+b+c")?
new?Function("a,b",?"c",?"return?a+b+c")?
JavaScript引入Function類型并提供new?Function()這樣的語法是因為函數對象添加屬性和方法就必須借助于Function這個類型。
函數的本質是一個內部對象，由JavaScript解釋器決定其運行方式。通過上述代碼創建的函數，在程序中可以使用函數名進行調用。本節開頭列出的函數定義問題也得到了解釋。注意可直接在函數聲明后面加上括號就表示創建完成后立即進行函數調用，例如：
以下是引用片段：
var?i=function?(a,b){?
???????return?a+b;?
}(1,2);?
alert(i);???
這段代碼會顯示變量i的值等于3。i是表示返回的值，而不是創建的函數，因為括號“(”比等號“=”有更高的優先級。這樣的代碼可能并不常用，但當用戶想在很長的代碼段中進行模塊化設計或者想避免命名沖突，這是一個不錯的解決辦法。
需要注意的是，盡管下面兩種創建函數的方法是等價的：
以下是引用片段：
function?funcName(){?
???????//函數體?
}?
//等價于?
var?funcName=function(){?
???????//函數體?
}??
但前面一種方式創建的是有名函數，而后面是創建了一個無名函數，只是讓一個變量指向了這個無名函數。在使用上僅有一點區別，就是：對于有名函數，它可以出現在調用之后再定義；而對于無名函數，它必須是在調用之前就已經定義。例如：
以下是引用片段：
＜script?language="JavaScript"?type="text/javascript"＞?
＜!--?
func();?
var?func=function(){?
???????alert(1)?
}?
//--＞?
＜/script＞??
這段語句將產生func未定義的錯誤，而：
以下是引用片段：
＜script?language="JavaScript"?type="text/javascript"＞?
＜!--?
func();?
function?func(){?
??????alert(1)?
}?
//--＞?
＜/script＞??
則能夠正確執行，下面的語句也能正確執行：
以下是引用片段：
＜script?language="JavaScript"?type="text/javascript"＞?
＜!--?
func();?
var?someFunc=function?func(){?
??????alert(1)?
}?
//--＞?
＜/script＞??
由此可見，盡管JavaScript是一門解釋型的語言，但它會在函數調用時，檢查整個代碼中是否存在相應的函數定義，這個函數名只有是通過function?funcName()形式定義的才會有效，而不能是匿名函數。
函數對象和其他內部對象的關系?
除了函數對象，還有很多內部對象，比如：Object、Array、Date、RegExp、Math、Error。這些名稱實際上表示一個類型，可 以通過new操作符返回一個對象。然而函數對象和其他對象不同，當用typeof得到一個函數對象的類型時，它仍然會返回字符串“function”，而 typeof一個數組對象或其他的對象時，它會返回字符串“object”。下面的代碼示例了typeof不同類型的情況：
以下是引用片段：
alert(typeof(Function)));?
alert(typeof(new?Function()));?
alert(typeof(Array));?
alert(typeof(Object));?
alert(typeof(new?Array()));?
alert(typeof(new?Date()));?
alert(typeof(new?Object()));??
運行這段代碼可以發現：前面4條語句都會顯示“function”，而后面3條語句則顯示“object”，可見new一個function實際上是 返回一個函數。這與其他的對象有很大的不同。其他的類型Array、Object等都會通過new操作符返回一個普通對象。盡管函數本身也是一個對象，但 它與普通的對象還是有區別的，因為它同時也是對象構造器，也就是說，可以new一個函數來返回一個對象，這在前面已經介紹。所有typeof返回 “function”的對象都是函數對象。也稱這樣的對象為構造器（constructor），因而，所有的構造器都是對象，但不是所有的對象都是構造 器。
既然函數本身也是一個對象，它們的類型是function，聯想到C++、Java等面向對象語言的類定義，可以猜測到Function類型的作用所 在，那就是可以給函數對象本身定義一些方法和屬性，借助于函數的prototype對象，可以很方便地修改和擴充Function類型的定義，例如下面擴 展了函數類型Function，為其增加了method1方法，作用是彈出對話框顯示"function"：
以下是引用片段：
Function.prototype.method1=function(){?
??????alert("function");?
}?
function?func1(a,b,c){?
??????return?a+b+c;?
}?
func1.method1();?
func1.method1.method1();??
注意最后一個語句：func1.method1.mehotd1()，它調用了method1這個函數對象的method1方法。雖然看上去有點容易 混淆，但仔細觀察一下語法還是很明確的：這是一個遞歸的定義。因為method1本身也是一個函數，所以它同樣具有函數對象的屬性和方法，所有對 Function類型的方法擴充都具有這樣的遞歸性質。
Function是所有函數對象的基礎，而Object則是所有對象（包括函數對象）的基礎。在JavaScript中，任何一個對象都是 Object的實例，因此，可以修改Object這個類型來讓所有的對象具有一些通用的屬性和方法，修改Object類型是通過prototype來完成 的：
以下是引用片段：
Object.prototype.getType=function(){?
???????return?typeof(this);?
}?
var?array1=new?Array();?
function?func1(a,b){?
??????return?a+b;?
}?
alert(array1.getType());?
alert(func1.getType());??
上面的代碼為所有的對象添加了getType方法，作用是返回該對象的類型。兩條alert語句分別會顯示“object”和“function”。
??????將函數作為參數傳遞
在前面已經介紹了函數對象本質，每個函數都被表示為一個特殊的對象，可以方便的將其賦值給一個變量，再通過這個變量名進行函數調用。作為一個變量，它 可以以參數的形式傳遞給另一個函數，這在前面介紹JavaScript事件處理機制中已經看到過這樣的用法，例如下面的程序將func1作為參數傳遞給 func2：
以下是引用片段：
function?func1(theFunc){?
??????theFunc();?
}?
function?func2(){?
??????alert("ok");?
}?
func1(func2);??
在最后一條語句中，func2作為一個對象傳遞給了func1的形參theFunc，再由func1內部進行theFunc的調用。事實上，將函數作為參數傳遞，或者是將函數賦值給其他變量是所有事件機制的基礎。
例如，如果需要在頁面載入時進行一些初始化工作，可以先定義一個init的初始化函數，再通過window.οnlοad=init;語句將其綁定到頁面載入完成的事件。這里的init就是一個函數對象，它可以加入window的onload事件列表。
傳遞給函數的隱含參數：arguments
當進行函數調用時，除了指定的參數外，還創建一個隱含的對象——arguments。arguments是一個類似數組但不是數組的對象，說它類似是 因為它具有數組一樣的訪問性質，可以用arguments[index]這樣的語法取值，擁有數組長度屬性length。arguments對象存儲的是 實際傳遞給函數的參數，而不局限于函數聲明所定義的參數列表，例如：
以下是引用片段：
function?func(a,b){?
?????alert(a);?
?????alert(b);?
?????for(var?i=0;i＜arguments.length;i++){?
???????????alert(arguments[i]);?
?????}?
}?
func(1,2,3);??
代碼運行時會依次顯示：1，2，1，2，3。因此，在定義函數的時候，即使不指定參數列表，仍然可以通過arguments引用到所獲得的參數，這給 編程帶來了很大的靈活性。arguments對象的另一個屬性是callee，它表示對函數對象本身的引用，這有利于實現無名函數的遞歸或者保證函數的封 裝性，例如使用遞歸來計算1到n的自然數之和：
以下是引用片段：
var?sum=function(n){?
??????if(1==n)return?1;?
??????else?return?n+sum(n-1);?
}?
alert(sum(100));??
其中函數內部包含了對sum自身的調用，然而對于JavaScript來說，函數名僅僅是一個變量名，在函數內部調用sum即相當于調用一個全局變量，不能很好的體現出是調用自身，所以使用arguments.callee屬性會是一個較好的辦法：
以下是引用片段：
var?sum=function(n){?
??????if(1==n)return?1;?
??????else?return?n+arguments.callee(n-1);?
}?
alert(sum(100));??
callee屬性并不是arguments不同于數組對象的惟一特征，下面的代碼說明了arguments不是由Array類型創建：
以下是引用片段：
Array.prototype.p1=1;?
alert(new?Array().p1);?
function?func(){?
???????alert(arguments.p1);?
}?
func();?
運行代碼可以發現，第一個alert語句顯示為1，即表示數組對象擁有屬性p1，而func調用則顯示為“undefined”，即p1不是arguments的屬性，由此可見，arguments并不是一個數組對象。
函數的apply、call方法和length屬性
JavaScript為函數對象定義了兩個方法：apply和call，它們的作用都是將函數綁定到另外一個對象上去運行，兩者僅在定義參數的方式有所區別：
以下是引用片段：
Function.prototype.apply(thisArg,argArray);?
Function.prototype.call(thisArg[,arg1[,arg2…]]);??
從函數原型可以看到，第一個參數都被取名為thisArg，即所有函數內部的this指針都會被賦值為thisArg，這就實現了將函數作為另外一個 對象的方法運行的目的。兩個方法除了thisArg參數，都是為Function對象傳遞的參數。下面的代碼說明了apply和call方法的工作方式：
以下是引用片段：
//定義一個函數func1，具有屬性p和方法A?
function?func1(){?
??????this.p="func1-";?
??????this.A=function(arg){?
????????????alert(this.p+arg);?
??????}?
}?
//定義一個函數func2，具有屬性p和方法B?
function?func2(){?
??????this.p="func2-";?
??????this.B=function(arg){?
?????????????alert(this.p+arg);?
??????}?
}?
var?obj1=new?func1();?
var?obj2=new?func2();?
obj1.A("byA");????//顯示func1-byA?
obj2.B("byB");????//顯示func2-byB?
obj1.A.apply(obj2,["byA"]);?//顯示func2-byA，其中[“byA”]是僅有一個元素的數組，下同?
obj2.B.apply(obj1,["byB"]);?//顯示func1-byB?
obj1.A.call(obj2,"byA");??//顯示func2-byA?
obj2.B.call(obj1,"byB");??//顯示func1-byB??
可以看出，obj1的方法A被綁定到obj2運行后，整個函數A的運行環境就轉移到了obj2，即this指針指向了obj2。同樣obj2的函數B也可以綁定到obj1對象去運行。代碼的最后4行顯示了apply和call函數參數形式的區別。
與arguments的length屬性不同，函數對象還有一個屬性length，它表示函數定義時所指定參數的個數，而非調用時實際傳遞的參數個數。例如下面的代碼將顯示2：
以下是引用片段：
function?sum(a,b){?
??????return?a+b;?
}?
alert(sum.length);??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
轉載于:https://my.oschina.net/yangting880815/blog/403068
總結
以上是生活随笔為你收集整理的学习JavaScript 的必备的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Xcode 中的IOS工程模板
- 下一篇： gradle idea java ssm