javascript 函數(shù)使用說明
什么是函數(shù)(Function)
function sum(a,b){
return a+b;
}
其實通俗的說就是一個有名稱的代碼段,方便重用。
要注意的是:
1.Javascript 的函數(shù)語法,因為Javascript本身就是區(qū)分大小寫的,所以function不能寫作Function或FUNCTION.
2.sum是函數(shù)的名稱,這個并不是必須的,等以后我們會說到。
3.return是返回,如果不寫的話,函數(shù)的返回是undefined.如果要返回多個值,可以返回個數(shù)組或者對象(以后再說)
函數(shù)的調用
下面我們講函數(shù)的基本調用。
var result = sum(1,2)
函數(shù)的參數(shù)
不好意思的說,這個才是本篇文章的重點。
實例一,參數(shù)少于 實際定義參數(shù)的數(shù)目
var result = sum(1);
結果result 為NaN,這就說明了,參數(shù)b的值為undefined,但并不會報錯,這就無形中制造了bug.
實例二,參數(shù)多于 實際定義參數(shù)的數(shù)目
sum(1,2,3,4,5)
結果為3.發(fā)現(xiàn)多于的參數(shù)被忽略了。
實例三,沒有參數(shù)的函數(shù)
function args(){return arguments;}
每個函數(shù)里都有一個默認的數(shù)組那就是arguments .它就是每個函數(shù)默認的參數(shù)為[] 。如果我們調用函數(shù)如下
args(1,2,3,4,5,6);
會發(fā)現(xiàn)arguments的值為[1,2,3,4,5,6]。這下容易了,我們可以改造下上面的sum方法
sum(1,2,3,4);function sum(){
var res= 0;
for(i=0;i<arguments.length;i++){
res+=arguments[i];
}
return res;
}
結果為10,這個sum函數(shù)靈活多了吧。^_^
Functions are data
這一篇是函數(shù)里比較重要的概念,那就是函數(shù)是一個數(shù)據(jù)??磦€例子
function f(){return 1;}
var f=function(){return 1;}
這兩個函數(shù)定義都是相同的。
typeof f;
f的值為"function",所以說Javascript 的 函數(shù)是個數(shù)據(jù)類型。它有比較兩個重要的特點
1.它包含了代碼
2.能被執(zhí)行
看個例子
var sum = function(a,b){return a+b;}
var add = sum;
sum=undefined;
typeof sum;
typeof add;
add(1,2);
我們把函數(shù)sum做為一個值賦給了add,發(fā)現(xiàn)刪除了sum不影響add的調用。所以函數(shù)也就是個正常的賦值。
匿名函數(shù)(Anonymous Functions)
Javascript中,可以不用寫賦值的代碼,如
"abcd" 1 [1,2,3]
這樣都不會報錯,這些數(shù)據(jù)叫做匿名的。同樣的函數(shù)做為數(shù)據(jù)也可以是匿名的
function(a){return a}
匿名函數(shù)的作用有兩個
1.可以把匿名函數(shù)做為一個參數(shù)傳入到另一個函數(shù)中。
2.你可以理解運行這個匿名函數(shù)
下面就會詳細討論這兩個功能的作用了。
回調函數(shù)(Callback Functions)
因為函數(shù)和其他數(shù)據(jù)一樣可以被賦值,刪除,拷貝等,所以也可以把函數(shù)作為參數(shù)傳入到另一個函數(shù)中。
實例一
function invoke_and_add(a,b){
return a()+b();
}
function one(){
return 1;
}
function two(){
return 2;
}
invoke_and_add(one ,two);
結果為3;
再來看看匿名函數(shù)的用法。
實例二
invoke_and_add(function(){return 1;},function(){return 2;}),直接一個函數(shù)體傳進去,沒有函數(shù)名。
我們稱,invoke_and_add為回調函數(shù)
我們用匿名函數(shù)替代了 one,two兩個函數(shù)。
通過上面兩個實例,回調函數(shù)的定義為:傳遞一個函數(shù)A到另一個函數(shù)B中,并且這個函數(shù)B執(zhí)行函數(shù)A。我們就說函數(shù)A叫做回調函數(shù)。 說白了,就是被人直接調用的函數(shù),在一個函數(shù)執(zhí)行另一個函數(shù)!
如果沒有名稱,就叫做匿名回調函數(shù)
回調函數(shù)的作用
主要有三個
1.當函數(shù)作為參數(shù)傳遞的時候,不用為這個函數(shù)定義一個名稱,這樣的好處是減少了全局變量。
2.節(jié)省了大量的代碼。
3.提高了程序的性能。
自調用函數(shù)(Self-invoking Functions)
自調用函數(shù)也是匿名函數(shù)的一種表現(xiàn)形式,這個函數(shù)在定義之后,直接調用。如下
(
function(){
alert('haha');
}
)()
看起來還挺怪異,不過確實很簡單。
自調用函數(shù)很方便使用,可以不用定義更多的全局變量。還有個好處,就是這個函數(shù)不能被執(zhí)行兩遍。真是非常適合做初始化的工作。
許多著名的javascript庫特別多的源碼中使用了這個功能,例如本人喜歡的Jquery.
內部函數(shù)(Inner Functions)
把函數(shù)作為一個值來思考一下,既然一個值可以定義在函數(shù)中,把函數(shù)做為數(shù)據(jù)放在函數(shù)中也未嘗不可。如下:
function a(param){
function b(theinput){
return theinput *2;
}
return 'The result is '+b(param);
}
也可以這么寫
var a = function(param){
var b = function(theinput){
return theinput*2;
};
return 'The result is '+b(param);
};
b函數(shù)是在a函數(shù)之中的 ,也就是意味著,在a函數(shù)的外部是無法訪問b函數(shù)的。所以也稱之為私有函數(shù)(private function)
a(2);
a(8);
b(2);
發(fā)現(xiàn)b(2)是沒有定義的。也就確定了它確實是私有函數(shù)。
內部函數(shù)的是使用還是有很多好處的。
1.可以有更少的全局變量。過多的使用全局變量就有可能由于命名沖突而產生過多的bugs
2.私有性,可以設計更好的接口函數(shù)供外部訪問。
返回值為函數(shù)的函數(shù)(Functions that Return Functions)
在前幾篇文章已經介紹了函數(shù)要有返回值,即使沒有寫return,函數(shù)也會返回一個undefine。
接下來看看返回值為函數(shù)的情況
function a(){
alert('a');
return function(){
alert('b');
};
}
在這個例子中,a函數(shù)執(zhí)行了alert('a'),以及它返回了另一個函數(shù)b。關于返回b的調用我們可以這樣來用。
var newFunc = a();
newFunc();
執(zhí)行結果為 alert a和alert b
如果不想賦值調用這個函數(shù)也可以簡寫如下
a()();
函數(shù)的自身重寫
因為函數(shù)可以返回一個函數(shù),那就意味著可以用一個新的函數(shù)替代一個舊的函數(shù),根據(jù)前一個例子來改進一下
a=a();
第一次運行函數(shù)a,就alert a,再次運行函數(shù)a,就alert b,這個功能對初始化非常有用。這個函數(shù)a重寫了自己,避免在以后調用初始化的功能(上個例子為alert a)。
當然我們還有更簡單的方法來重寫a函數(shù)那就是在a函數(shù)的內部重寫它,來看看代碼
function a(){
alert("a")
a=function(){
alert("b");
}
}
只有在初次調用a函數(shù)才會執(zhí)行 alert a 在以后的調用中,都會執(zhí)行alert b
下面結合前幾節(jié)看個綜合的例子
var c = function(){
function a(){
alert('a')
}
function b(){
alert('b')
}
a();
return b;
}();//alert('a');
c();//alert('b');
這個例子有以下幾點需要注意
1. a函數(shù),b函數(shù)是內部函數(shù)。
2. return b 返回的是個函數(shù)的引用。
3. 子調用函數(shù)重寫了函數(shù)c。
如果能明白這個例子,關于內部函數(shù),子調用函數(shù)和返回值為函數(shù)的函數(shù)就可以都理解了。
閉包(Closures)閉包屬于比較難的一部分,在學習閉包之前,先來學習以下Javascript的作用域(Scope)
作用域鏈(Scope Chain)
函數(shù)內部定義的變量,在函數(shù)外不能訪問,或者變量定義在代碼段中(如if,for中),在代碼段之外也不可訪問。
var a =1;
function f(){
var b=1;
return a;
}
f();//a=1
b;//b 沒有定義
a 是全局變量,而b定義在函數(shù)f之中。所以:
在f函數(shù)中,a和b都可以訪問。
在f函數(shù)之外,a可以訪問,而b不可以
再次看個例子
var a = 1;
function f(){
var b = 1;
function n(){
var c =3;
}
}
如果定義一個函數(shù)n在函數(shù)f中,函數(shù)n不但可以訪問自己作用域的c,而且還能訪問所謂的父作用域的b和a
這就是作用域鏈(Scope Chain)
詞法作用域(Lexical Scope)
在Javascript中,也有詞法作用域(Lexical Scope),這個意思是,函數(shù)在定義的時候就生成了它的作用域,而不是在調用的時候,看個例子就明白了。
function f1(){var a=1;f2();}
function f2(){return a;}
f1();//a沒有定義
先看看函數(shù)f1,調用了函數(shù)f2,因為函數(shù)局部變量a也在f1中,可能期望函數(shù)f2也訪問a,但事實卻不是這樣。
因為這個時候f2函數(shù)已經定義完畢了,而它的范圍沒有a被找到。不管是函數(shù)f1還是函數(shù)f2,僅僅能訪問的是本身的局部變 量或者全局變量。
用閉包來破壞這個作用域鏈(Breaking the Chain with Closure)
讓我們舉例來說明閉包吧。
實例1
function f(){
var b="b";
return function(){
return b;
}
}
函數(shù)f包含了變量b,在全局作用域中不可能訪問b,結果為沒有定義(undefined)。
看看這個函數(shù)的返回值為一個函數(shù)。這個新的函數(shù)可以訪問f范圍中的變量b??慈缦麓a
var n = f();
n();//訪問b
由于函數(shù)f本身就是全局的,而它返回的函數(shù)又是個新的全局函數(shù),而它又可以訪問函數(shù)f的作用域。
實例2
這個例子和上個例子結果是一樣的,但是有一點不同,函數(shù)f并不返回一個函數(shù),而是新建一個全局變量n,代碼如下
var n;
function f(){
var b = "b";
n=function(){
return b;
}
}
所以可以直接n()來訪問函數(shù)f里的變量b
通過上面兩個例子我們就可以說當一個函數(shù)指向了它的父作用域,其作用是指向局部變量,就可以稱之為閉包。
閉包其實就提供了一個借口,一個讓外部訪問內部的變量的方法
當我們創(chuàng)建了個傳遞參數(shù)的函數(shù)f,這個參數(shù)就變成了函數(shù)f的局部變量了。我們可以創(chuàng)建一個f的內部函數(shù)來返回這個參數(shù)
function f(arg){
var n =function(){
return args;
}
arg++;
return n;
}
var m= f(123);
m();//124
閉包在循環(huán)中的應用
再循環(huán)中很容易引起一些bug,雖然表面是正常的。
看如下的代碼
function f(){
var a = [];
var i;
for(i=0;i<3;i++){
a[i] = function(){
alert(i);
return i;
}
}
return a;
}
var a= f();
a[0]();//3
a[1]();//3
a[2]();//3
新建個循環(huán),我們的目的是每次循環(huán)都新建一個函數(shù),函數(shù)返回的是循環(huán)的序列值也就是i。我們看看以上代碼的運行結果
都是為3.而我們期望的結果是1,2,3。
到底是為什么呢?我們新建了三個閉包,都指向了變量i。閉包并沒有記住變量i的值,它僅是變量i的引用。在循環(huán)結束后,i的值是3,所以結果都是3了。
來看看正確的寫法
function f() {
var a = [];
var i;
for(i = 0; i < 3; i++) {
a[i] = (function(x){
return function(){
alert(x);
return x;
}
})(i);
}
return a;
}
var a = f();
a[0]();//0
a[1]();//1
a[2]();//2
我們又用了一個閉包,把變量i變成了局部變量x了,x變量每次都是不同的值了。如果沒有徹底理解自調用函數(shù)那就如下寫法就可以明白了
function f() {
function makeClosure(x) {
return function(){
return x;
}
}
var a = [];
var i;
for(i = 0; i < 3; i++) {
a[i] = makeClosure(i); //makeClosure,用來記憶i的值。
}
return a;
}
相關文章
JavaScript函數(shù)中上下文有哪些規(guī)則
上下文是從英文context翻譯過來,指的是一種環(huán)境。在軟件工程中,上下文是一種屬性的有序序列,它們?yōu)轳v留在環(huán)境內的對象定義環(huán)境。在對象的激活過程中創(chuàng)建上下文,對象被配置為要求某些自動服務。又比如計算機技術中,相對于進程而言,上下文就是進程執(zhí)行時的環(huán)境2021-10-10
解析js如何獲取當前url中的參數(shù)值并復制給input
本篇文章是對js獲取當前url中的參數(shù)值并復制給input的方法進行了詳細的分析介紹,需要的朋友參考下2013-06-06
Javascript 學習筆記之 對象篇(二) : 原型對象
Javascript 并沒有類繼承模型,而是使用原型對象 prototype 進行原型式繼承。盡管人們經常將此看做是 Javascript 的一個缺點,然而事實上,原型式繼承比傳統(tǒng)的類繼承模型要更加強大。舉個例子,在原型式繼承頂端構建一個類模型很簡單,然而反過來則是個困難得多的任務。2014-06-06
JavaScript中的Number數(shù)字類型學習筆記
對數(shù)字類型支持得不夠強大是很多人吐槽JavaScript的原因,anyway...這里整理了JavaScript中的Number數(shù)字類型學習筆記,適合入門及基礎知識復習,需要的朋友可以參考下2016-05-05

