javascript學(xué)習(xí)筆記(四)function函數(shù)部分
函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。
Jscript 支持兩種函數(shù):一類是語(yǔ)言內(nèi)部的函數(shù)(如eval() ),另一類是自己創(chuàng)建的。
在 JavaScript 函數(shù)內(nèi)部聲明的變量(使用 var)是局部變量,所以只能在函數(shù)內(nèi)部訪問(wèn)它。(該變量的作用域是局部的)。
您可以在不同的函數(shù)中使用名稱相同的局部變量,因?yàn)橹挥新暶鬟^(guò)該變量的函數(shù)才能識(shí)別出該變量。
函數(shù)的調(diào)用方式
1、普通調(diào)用:functionName(實(shí)際參數(shù)...)
2、通過(guò)指向函數(shù)的變量去調(diào)用:
var myVar = 函數(shù)名;
myVar(實(shí)際參數(shù)...);
返回函數(shù)的函數(shù)
1. 當(dāng)函數(shù)無(wú)明確返回值時(shí),返回的值就是"undefined"。
2. 當(dāng)函數(shù)有返回值時(shí),返回值是什么就返回什么。
我們可以通過(guò)使用 return 語(yǔ)句實(shí)現(xiàn)將函數(shù)返回調(diào)用它的地方。
在使用 return 語(yǔ)句時(shí),函數(shù)會(huì)停止執(zhí)行,并返回指定的值。
函數(shù)通常會(huì)返回一個(gè)唯一值,那么這個(gè)值也可能是另一個(gè)函數(shù):
<script type="text/javascript">
var box = function(){
var a=1;
return function(){
alert(a++)
}
}
alert(box());//彈出"function(){alert(a++)}"
</script>
在這里,我們只需將返回值賦值給某個(gè)變量,然后就可以像使用一般函數(shù)那樣調(diào)用它了:
<script type="text/javascript">
var box = function(){
var a=1;
return function(){
alert(++a)
}
}
var newFunc = box();
newFunc();//2
</script>
如果想讓返回的函數(shù)立即執(zhí)行,亦可以使用box()()來(lái)執(zhí)行這段代碼。
ECMAScript所有函數(shù)的參數(shù)都是按值傳遞的,言下之意就是參數(shù)不會(huì)按引用傳遞。
PS:如果存在按引用傳遞的話,那么函數(shù)里的那個(gè)變量將會(huì)是全局變量,在外部也可以訪問(wèn)。
(1)值類型:數(shù)值、布爾值、null、undefined。
(2)引用類型:對(duì)象、數(shù)組、函數(shù)。
引用類型值:指的是那些保存在堆內(nèi)存中的對(duì)象,意思是,變量中保存的實(shí)際上只是一個(gè)指針,這個(gè)指針執(zhí)行內(nèi)存中的另一個(gè)位置,由該位置保存對(duì)象;
創(chuàng)建匿名函數(shù)
function(){
return ‘Lee'; //單獨(dú)的匿名函數(shù)是無(wú)法運(yùn)行的,就算能運(yùn)行也無(wú)法調(diào)用,因?yàn)闆](méi)有名字
}
這種匿名函數(shù)的用法在JQuery中非常多。直接聲明一個(gè)匿名函數(shù),立即使用。用匿名函數(shù)的好處就是省得定義一個(gè)用一次就不用的函數(shù),而且免了命名沖突的問(wèn)題,js中沒(méi)有命名空間的概念,因此很容易函數(shù)名字沖突,一旦命名沖突以最后聲明的為準(zhǔn)。
通過(guò)自我執(zhí)行來(lái)執(zhí)行匿名函數(shù):
//通過(guò)自我執(zhí)行來(lái)執(zhí)行匿名函數(shù)
<script type="text/javascript">
(function (){ // (匿名函數(shù))();第一圓括號(hào)放匿名函數(shù),第二個(gè)圓括號(hào)執(zhí)行
alert('Lee');
})();
</script>
把匿名函數(shù)自我執(zhí)行的返回值賦給變量:
//把匿名函數(shù)自我執(zhí)行的返回值賦給變量
<script type="text/javascript">
var box = (function (){
alert('Lee');
})(); //彈出”Lee”;
alert(box); //彈出 undefined,如果寫出alert(box()),那么只會(huì)彈出一個(gè)"Lee"
</script>
自我執(zhí)行匿名函數(shù)的傳參:
//自我執(zhí)行匿名函數(shù)的傳參
<script type="text/javascript">
(function (age){
alert(age);
})(100); //彈出100
</script>
javascript創(chuàng)建動(dòng)態(tài)函數(shù):
JavaScript支持創(chuàng)建動(dòng)態(tài)函數(shù),動(dòng)態(tài)函數(shù)必須用Function對(duì)象來(lái)定義(Function是javascript中的一個(gè)對(duì)象,是固定不變的,規(guī)定Function對(duì)象的"F"必須大寫,當(dāng)是function的時(shí)候,我們知道是定義函數(shù)的時(shí)候所使用的一個(gè)關(guān)鍵字:function funName(x,y),當(dāng)是Function的時(shí)候(F大寫的時(shí)候),我們知道是javascript中的對(duì)象)
創(chuàng)建動(dòng)態(tài)函數(shù)的基本格式:var 變量名 = new Function("參數(shù)1","參數(shù)2","參數(shù)n","執(zhí)行語(yǔ)句");
看下面的一段代碼:
<script type="text/javascript">
var square = new Function ("x","y","var sum ; sum = x+y;return sum;");
alert("square(2,3)的結(jié)果是:"+square(2,3)); //square(2,3)的結(jié)果是:5
</script>
square是動(dòng)態(tài)創(chuàng)建的函數(shù),在Function對(duì)象后面的括號(hào)里的每一部分內(nèi)容都必須是字符串形式的,也就是說(shuō)都必須用引號(hào)(""或者是'')括起來(lái)
這段代碼:
var square = new Function ("x","y","var sum ; sum = x+y;return sum;");
和下面這段代碼:
function square (x,y){
var sum;
sum = x+y;
return sum;
}
是一摸一樣的,只不過(guò)一個(gè)是動(dòng)態(tài)函數(shù),一個(gè)是靜態(tài)函數(shù)。
我們?yōu)槭裁匆汛a分成一小段一小段的代碼呢?,把一個(gè)字符串分成了若干個(gè)獨(dú)立的字符串的優(yōu)點(diǎn)就在于我們可以通過(guò)修改其中的某些字符串來(lái)隨時(shí)改變函數(shù)的作用。
回調(diào)函數(shù)
回調(diào)就是一個(gè)函數(shù)的調(diào)用過(guò)程。那么就從理解這個(gè)調(diào)用過(guò)程開(kāi)始吧。函數(shù)a有一個(gè)參數(shù),這個(gè)參數(shù)是個(gè)函數(shù)b,當(dāng)函數(shù)a執(zhí)行完以后執(zhí)行函數(shù)b。那么這個(gè)過(guò)程就叫回調(diào)。
其實(shí)中文也很好理解:回調(diào),回調(diào),就是回頭調(diào)用的意思。函數(shù)a的事先干完,回頭再調(diào)用函數(shù)b。
這里必須清楚一點(diǎn):函數(shù)b是你以參數(shù)形式傳給函數(shù)a的,那么函數(shù)b就叫回調(diào)函數(shù)。
在jquery里的絕大多數(shù)效果函數(shù)都涉及到callback函數(shù)。jquery效果函數(shù)
例如:
<script type="text/javascript">
$("div").show(1000,function(){
//callback function
});
</script>
這里的callback function換成實(shí)例可以是:
<script type="text/javascript">
$("div").show(1000,function(){
console.log("hello world")
});
</script>
Callback實(shí)際上是,當(dāng)一個(gè)函數(shù)執(zhí)行完后,現(xiàn)執(zhí)行的那個(gè)函數(shù)就是所謂的callback函數(shù)。怎么樣?很好理解吧……
方法和函數(shù)的區(qū)別
var arr = [1,2,3,4,5]
var a =12; // 變量:自由的
arr.a= 5; //屬性:屬于一個(gè)對(duì)象
function show() //函數(shù):自由的
{
alert(‘a(chǎn)');
}
arr.fn = function() //方法:屬于一個(gè)對(duì)象
{
alert(‘b');
}
其實(shí)方法就是函數(shù),只不過(guò)方法是有所屬的對(duì)象。
我們所熟知的,將函數(shù)綁定到 click 事件
語(yǔ)法:
$(selector).click(function)
參數(shù) 描述
function 可選。規(guī)定當(dāng)發(fā)生 click 事件時(shí)運(yùn)行的函數(shù)。
這種形式在jquery中經(jīng)常見(jiàn)到。它是將function當(dāng)做該方法的參數(shù),向該方法添加一個(gè)事件處理函數(shù)。
js全局函數(shù)
全局函數(shù)與內(nèi)置對(duì)象的屬性或方法不是一個(gè)概念。全局函數(shù)它不屬于任何一個(gè)內(nèi)置對(duì)象。
JavaScript 中包含以下 7 個(gè)全局函數(shù),用于完成一些常用的功能:
escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、
parseInt( )、unescape( )。
函數(shù)的幾個(gè)作用
作為一個(gè)類構(gòu)造器使用
function class(){}
class.prototype={};
var item=new class();
作為閉包使用
(function(){
//獨(dú)立作用域
})();
作為構(gòu)造函數(shù)調(diào)用
所謂構(gòu)造函數(shù),就是通過(guò)這個(gè)函數(shù)生成一個(gè)新對(duì)象(object)。
<script type="text/javascript">
function test(){
this.x = 10;
}
var obj = new test();
alert(obj.x); //彈出 10;
</script>
可以使用 new 運(yùn)算符結(jié)合像 Object()、Date() 和 Function() 這樣的預(yù)定義的構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象并對(duì)其初始化。面向?qū)ο蟮木幊唐鋸?qiáng)有力的特征是定義自定義構(gòu)造函數(shù)以創(chuàng)建腳本中使用的自定義對(duì)象的能力。創(chuàng)建了自定義的構(gòu)造函數(shù),這樣就可以創(chuàng)建具有已定義屬性的對(duì)象。下面是自定義函數(shù)的示例(注意 this 關(guān)鍵字的使用)。
function Circle (xPoint, yPoint, radius) {
this.x = xPoint; // 圓心的 x 坐標(biāo)。
this.y = yPoint; // 圓心的 y 坐標(biāo)。
this.r = radius; // 圓的半徑。
}
調(diào)用 Circle 構(gòu)造函數(shù)時(shí),給出圓心點(diǎn)的值和圓的半徑(所有這些元素是完全定義一個(gè)獨(dú)特的圓對(duì)象所必需的)。結(jié)束時(shí) Circle 對(duì)象包含三個(gè)屬性。下面是如何例示 Circle 對(duì)象。
var aCircle = new Circle(5, 11, 99);
使用構(gòu)造器函數(shù)的好處在于,它可以再創(chuàng)建對(duì)象時(shí)接收一些參數(shù)。
<script type="text/javascript">
function Test(name){
this.occupation = "coder";
this.name = name;
this.whoAreYou = function(){
return "I'm " + this.name + "and I'm a " + this.occupation;
}
}
var obj = new Test('trigkit4');//利用同一個(gè)構(gòu)造器創(chuàng)建不同的對(duì)象
var obj2 = new Test('student');
obj.whoAreYou();//"I'm trigkit4 and I'm a corder"
obj2.whoAreYou();//"I'm student and I'm a corder"
</script>
依照慣例,我們應(yīng)該將構(gòu)造器函數(shù)的首字母大寫,以便顯著地區(qū)別于一般的函數(shù)。
以下兩種形式的定義函數(shù)方式是等價(jià)的。
<script type="text/javascript">
var test = function(){
alert("Hello World");
}
alert(typeof(test));//output function
</script>
這里明確定義了一個(gè)變量test,他的初始值被賦予了一個(gè)function實(shí)體
<script type="text/javascript">
function test(){
alert("Hello World");
}
alert(typeof(test));//output function
</script>
看看下面這種定義式函數(shù)形式:
<script type="text/javascript">
function test(){
alert("Hello World");
};
test();//居然輸出Hello,很奇怪不是嗎?
function test(){
alert("Hello");
};
test();//正常滴輸出了Hello
</script>
很顯然,第一個(gè)函數(shù)并沒(méi)有起到作用,很奇怪不是嗎?我們知道,javascript解析引擎并不是一行一行地執(zhí)行代碼,而是一段一段地執(zhí)行代碼。在同一段程序的分析執(zhí)行中,定義式的函數(shù)語(yǔ)句會(huì)被優(yōu)先執(zhí)行,所以第一個(gè)定義的代碼邏輯已經(jīng)被第二個(gè)覆蓋了,所以兩次調(diào)用相同函數(shù),只會(huì)執(zhí)行第二個(gè)。
作為值的函數(shù)
函數(shù)在js中不僅是一種語(yǔ)法,也是一個(gè)值。也就是說(shuō)可以將函數(shù)賦值給變量,存儲(chǔ)在對(duì)象的屬性或數(shù)組的元素中,作為參數(shù)傳入另一個(gè)函數(shù)中。
函數(shù)的名字實(shí)際是看不見(jiàn)的,它僅僅是變量的名字,這個(gè)變量指代函數(shù)對(duì)象
<script type="text/javascript">
function square(x,y){
return x*y;
}
var s = square; //s和square指代同一個(gè)函數(shù)
square(2,3);//6
s(2,4);//8
</script>
除了可以將函數(shù)賦值給變量,同樣可以將函數(shù)賦值給對(duì)象的屬性,當(dāng)函數(shù)作為對(duì)象的屬性調(diào)用時(shí),函數(shù)就稱為方法
<script type="text/javascript">
var obj = {square:function(x,y){ //對(duì)象直接量
return x*y;
}};
var ect = obj.square(2,3);
</script>
prototype屬性
每一個(gè)函數(shù)都包含prototype屬性,這個(gè)屬性指向一個(gè)對(duì)象的引用,這個(gè)對(duì)象稱為原型對(duì)象。
詳見(jiàn):javascript學(xué)習(xí)筆記(五)原型和原型鏈
高階函數(shù)
這里的高階函數(shù)可不是高數(shù)里的那個(gè)高階函數(shù),所謂高階函數(shù)就是操作函數(shù)的函數(shù),它接收一個(gè)或多個(gè)函數(shù)作為參數(shù),并返回新函數(shù)
相關(guān)文章
JavaScript開(kāi)發(fā)規(guī)范要求(規(guī)范化代碼)
作為一名開(kāi)發(fā)人員(WEB前端JavaScript開(kāi)發(fā)),不規(guī)范的開(kāi)發(fā)不僅使日后代碼維護(hù)變的困難,同時(shí)也不利于團(tuán)隊(duì)的合作,通常還會(huì)帶來(lái)代碼安全以及執(zhí)行效率上的問(wèn)題。2010-08-08Javascript學(xué)習(xí)筆記之 對(duì)象篇(三) : hasOwnProperty
判斷一個(gè)屬性是定義在對(duì)象本身而不是繼承自原型鏈,我們需要使用從 Object.prototype 繼承而來(lái)的 hasOwnProperty 方法。 hasOwnProperty 方法是 Javascript 中唯一一個(gè)處理對(duì)象屬性而不會(huì)往上遍歷原型鏈的。2014-06-06javascript實(shí)現(xiàn)方法調(diào)用與方法觸發(fā)小結(jié)
這篇文章主要介紹了javascript實(shí)現(xiàn)方法調(diào)用與方法觸發(fā)小結(jié)的相關(guān)資料,需要的朋友可以參考下2016-03-03JavaScipt基本教程之JavaScript語(yǔ)言的基礎(chǔ)
2008-01-01鍵盤 keycode的值 javascript時(shí)觸發(fā)事件時(shí)很有用的要素
鍵盤keycode的值 編寫javascript時(shí)觸發(fā)事件時(shí)很有用的要素,大家可以收藏一下。2009-11-11