本篇內(nèi)容介紹了“JavaScript函數(shù)與作用域的使用方法是什么”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的阿拉山口網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
函數(shù):就是封裝了一段可被重復(fù)調(diào)用執(zhí)行的代碼塊。通過此代碼塊可以實(shí)現(xiàn)大量代碼的重復(fù)使用。
函數(shù)在使用時(shí)分為兩步:聲明函數(shù)和調(diào)用函數(shù)
//聲明函數(shù)function 函數(shù)名(){ //函數(shù)體代碼}
function是聲明函數(shù)的關(guān)鍵字,必須小寫
由于函數(shù)一般是為了實(shí)現(xiàn)某個(gè)功能才定義的, 所以通常我們將函數(shù)名命名為動(dòng)詞,比如getSum
//調(diào)用函數(shù)函數(shù)名(); //通過調(diào)用函數(shù)名來執(zhí)行函數(shù)體代碼
調(diào)用的時(shí)候千萬不要忘記添加小括號
口訣:函數(shù)不調(diào)用,自己不執(zhí)行
注意:聲明函數(shù)本身并不會執(zhí)行代碼,只有調(diào)用函數(shù)時(shí)才會執(zhí)行函數(shù)體代碼。
函數(shù)的封裝是把一個(gè)或者多個(gè)功能通過函數(shù)的方式封裝起來,對外只提供一個(gè)簡單的函數(shù)接口
在聲明函數(shù)時(shí),可以在函數(shù)名稱后面的小括號中添加一些參數(shù),這些參數(shù)被稱為形參,而在調(diào)用該函數(shù)時(shí),同樣也需要傳遞相應(yīng)的參數(shù),這些參數(shù)被稱為實(shí)參。
參數(shù) | 說明 |
---|---|
形參 | 形式上的參數(shù) 函數(shù)定義的時(shí)候 傳遞的參數(shù) 當(dāng)前并不知道是什么 |
實(shí)參 | 實(shí)際上的參數(shù) 函數(shù)調(diào)用的時(shí)候 傳遞的參數(shù) 實(shí)參是傳遞給形參的 |
參數(shù)的作用: 在函數(shù)內(nèi)部某些值不能固定,我們可以通過參數(shù)在調(diào)用函數(shù)時(shí)傳遞不同的值進(jìn)去
// 帶參數(shù)的函數(shù)聲明function 函數(shù)名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數(shù),用逗號分隔 // 函數(shù)體}// 帶參數(shù)的函數(shù)調(diào)用函數(shù)名(實(shí)參1, 實(shí)參2, 實(shí)參3...);
例如:利用函數(shù)求任意兩個(gè)數(shù)的和
// 聲明函數(shù)function getSum(num1,num2){ console.log(num1+num2)}// 調(diào)用函數(shù)getSum(1,3) //4getSum(6,5) //11
函數(shù)調(diào)用的時(shí)候?qū)崊⒅凳莻鬟f給形參的
形參簡單理解為:不用聲明的變量
實(shí)參和形參的多個(gè)參數(shù)之間用逗號(,)
分隔,
參數(shù)個(gè)數(shù) | 說明 |
---|---|
實(shí)參個(gè)數(shù)等于形參個(gè)數(shù) | 輸出正確結(jié)果 |
實(shí)參個(gè)數(shù)多于形參個(gè)數(shù) | 只取到形參的個(gè)數(shù) |
實(shí)參個(gè)數(shù)小于形參個(gè)數(shù) | 多的形參定義為undefined,結(jié)果為NaN |
function sum(num1, num2) { console.log(num1 + num2); } sum(100, 200); // 300,形參和實(shí)參個(gè)數(shù)相等,輸出正確結(jié)果 sum(100, 400, 500, 700); // 500,實(shí)參個(gè)數(shù)多于形參,只取到形參的個(gè)數(shù) sum(200); // 實(shí)參個(gè)數(shù)少于形參,多的形參定義為undefined,結(jié)果為NaN
注意:在JavaScript中,形參的默認(rèn)值是undefined
函數(shù)可以帶參數(shù)也可以不帶參數(shù)
聲明函數(shù)的時(shí)候,函數(shù)名括號里面的是形參,形參的默認(rèn)值為 undefined
調(diào)用函數(shù)的時(shí)候,函數(shù)名括號里面的是實(shí)參
多個(gè)參數(shù)中間用逗號分隔
形參的個(gè)數(shù)可以和實(shí)參個(gè)數(shù)不匹配,但是結(jié)果不可預(yù)計(jì),我們盡量要匹配
有的時(shí)候,我們會希望函數(shù)將值返回給調(diào)用者,此時(shí)通過使用 return 語句就可以實(shí)現(xiàn)。
return 語句的語法格式如下:
// 聲明函數(shù)function 函數(shù)名(){ ... return 需要返回的值;}// 調(diào)用函數(shù)函數(shù)名(); // 此時(shí)調(diào)用函數(shù)就可以得到函數(shù)體內(nèi)return 后面的值
在使用 return 語句時(shí),函數(shù)會停止執(zhí)行,并返回指定的值
如果函數(shù)沒有 return,返回的值是undefined
function add(num1,num2){ //函數(shù)體 return num1 + num2; // 注意:return 后的代碼不執(zhí)行 alert('我不會被執(zhí)行,因?yàn)榍懊嬗?nbsp;return'); } var resNum = add(21,6); // 調(diào)用函數(shù),傳入兩個(gè)實(shí)參,并通過 resNum 接收函數(shù)返回值 alert(resNum); // 27
return 語句之后的代碼不被執(zhí)行
function add(num1,num2){ //函數(shù)體 return num1 + num2; // 注意:return 后的代碼不執(zhí)行 alert('我不會被執(zhí)行,因?yàn)榍懊嬗?nbsp;return');}var resNum = add(21,6); // 調(diào)用函數(shù),傳入兩個(gè)實(shí)參,并通過 resNum 接收函數(shù)返回值alert(resNum); // 27
return只能返回一個(gè)值。如果用逗號隔開多個(gè)值,以最后一個(gè)為準(zhǔn)
function add(num1,num2){ //函數(shù)體 return num1,num2; } var resNum = add(21,6); // 調(diào)用函數(shù),傳入兩個(gè)實(shí)參,并通過 resNum 接收函數(shù)返回值 alert(resNum); // 6
函數(shù)都是有返回值的
如果有 return ,則返回 return 后面的值
如果沒有 return,則返回 undefined
break、continue、return 的區(qū)別
break
: 結(jié)束當(dāng)前循環(huán)體(如 for、while)
continue
:跳出本次循環(huán),繼續(xù)執(zhí)行下次循環(huán)(如for、while)
return
:不僅可以退出循環(huán),還能夠返回 return 語句中的值,同時(shí)還可以結(jié)束當(dāng)前的函數(shù)體內(nèi)的代碼
1.利用函數(shù)求任意兩個(gè)數(shù)的最大值
function getMax(num1, num2) { return num1 > num2 ? num1 : num2;}console.log(getMax(1, 2));console.log(getMax(11, 2));
2.求數(shù)組 [5,2,99,101,67,77] 中的最大數(shù)值
//定義一個(gè)獲取數(shù)組中最大數(shù)的函數(shù)function getMaxFromArr(numArray){ var maxNum = numArray[0]; for(var i = 0; i < numArray.length;i++){ if(numArray[i]>maxNum){ maxNum = numArray[i]; } } return maxNum;}var arrNum = [5,2,99,101,67,77];var maxN = getMaxFromArr(arrNum); //這個(gè)實(shí)參是個(gè)數(shù)組alert('最大值為' + maxN);
3.創(chuàng)建一個(gè)函數(shù),實(shí)現(xiàn)兩個(gè)數(shù)之間的加減乘除運(yùn)算,并將結(jié)果返回
var a = parseFloat(prompt('請輸入第一個(gè)數(shù)'));var b = parseFloat(prompt('請輸入第二個(gè)數(shù)'));function count(a,b){ var arr = [a + b, a - b, a * b, a / b]; return arr;}var result = count(a,b);console.log(result)
當(dāng)我們不確定有多少個(gè)參數(shù)傳遞的時(shí)候,可以用arguments來獲取。在 JavaScript 中,arguments 實(shí)際上它是當(dāng)前函數(shù)的一個(gè)內(nèi)置對象。所有函數(shù)都內(nèi)置了一個(gè) arguments 對象,arguments 對象中存儲了傳遞的所有實(shí)參。
arguments存放的是傳遞過來的實(shí)參
arguments展示形式是一個(gè)偽數(shù)組,因此可以進(jìn)行遍歷。偽數(shù)組具有以下特點(diǎn)
①:具有 length 屬性
②:按索引方式儲存數(shù)據(jù)
③:不具有數(shù)組的 push , pop 等方法
// 函數(shù)聲明function fn() { console.log(arguments); //里面存儲了所有傳遞過來的實(shí)參 console.log(arrguments.length); // 3 console.log(arrguments[2]); // 3}// 函數(shù)調(diào)用fn(1,2,3);
例如:利用函數(shù)求任意個(gè)數(shù)的最大值
function maxValue() { var max = arguments[0]; for (var i = 0; i < arguments.length; i++) { if (max < arguments[i]) { max = arguments[i]; } } return max;}console.log(maxValue(2, 4, 5, 9)); // 9console.log(maxValue(12, 4, 9)); // 12
因?yàn)槊總€(gè)函數(shù)都是獨(dú)立的代碼塊,用于完成特殊任務(wù),因此經(jīng)常會用到函數(shù)相互調(diào)用的情況。具體演示在下面的函數(shù)練習(xí)中會有。
1.利用函數(shù)封裝方式,翻轉(zhuǎn)任意一個(gè)數(shù)組
function reverse(arr) { var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; } return newArr;}var arr1 = reverse([1, 3, 4, 6, 9]);console.log(arr1);
2.利用函數(shù)封裝方式,對數(shù)組排序 – 冒泡排序
function sort(arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j+1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr;}
3.輸入一個(gè)年份,判斷是否是閏年(閏年:能被4整除并且不能被100整數(shù),或者能被400整除)
function isRun(year) { var flag = false; if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) { flag = true; } return flag;}console.log(isRun(2010));console.log(isRun(2012));
4.用戶輸入年份,輸出當(dāng)前年份2月份的天數(shù),如果是閏年,則2月份是 29天, 如果是平年,則2月份是 28天
function backDay() { var year = prompt('請您輸入年份:'); if (isRun(year)) { //調(diào)用函數(shù)需要加小括號 alert('你輸入的' + year + '是閏年,2月份有29天'); } else { alert('您輸入的' + year + '不是閏年,2月份有28天'); }}backDay();//判斷是否是閏年的函數(shù)function isRun(year) { var flag = false; if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) { flag = true; } return flag;}
利用函數(shù)關(guān)鍵字function自定義函數(shù)方式。
// 聲明定義方式function fn() {...}// 調(diào)用 fn();
因?yàn)橛忻郑砸脖环Q為命名函數(shù)
調(diào)用函數(shù)的代碼既可以放到聲明函數(shù)的前面,也可以放在聲明函數(shù)的后面
利用函數(shù)表達(dá)式方式的寫法如下:
// 這是函數(shù)表達(dá)式寫法,匿名函數(shù)后面跟分號結(jié)束 var fn = function(){...}; // 調(diào)用的方式,函數(shù)調(diào)用必須寫到函數(shù)體下面 fn();
因?yàn)楹瘮?shù)沒有名字,所以也稱為匿名函數(shù)
這個(gè)fn 里面存儲的是一個(gè)函數(shù)
函數(shù)調(diào)用的代碼必須寫到函數(shù)體后面
通常來說,一段程序代碼中所用到的名字并不總是有效和可用的,而限定這個(gè)名字的可用性的代碼范圍就是這個(gè)名字的作用域。作用域的使用提高了程序邏輯的局部性,增強(qiáng)了程序的可靠性,減少了名字沖突。
JavaScript (ES6前) 中的作用域有兩種:
全局作用域
局部作用域(函數(shù)作用域)
作用于所有代碼執(zhí)行的環(huán)境(整個(gè) script 標(biāo)簽內(nèi)部)或者一個(gè)獨(dú)立的 js 文件
作用于函數(shù)內(nèi)的代碼環(huán)境,就是局部作用域。 因?yàn)楦瘮?shù)有關(guān)系,所以也稱為函數(shù)作用域
塊作用域由 {}
包括
在其他編程語言中(如 java、c#等),在 if 語句、循環(huán)語句中創(chuàng)建的變量,僅僅只能在本 if 語句、本循環(huán)語句中使用,如下面的Java代碼:
if(true){ int num = 123; System.out.println(num); // 123}System.out.println(num); // 報(bào)錯(cuò)
JS 中沒有塊級作用域(在ES6之前)
if(true){ int num = 123; System.out.println(num); // 123}System.out.println(num); // 123
在JavaScript中,根據(jù)作用域的不同,變量可以分為兩種:
全局變量
局部變量
在全局作用域下聲明的變量叫做全局變量(在函數(shù)外部定義的變量)
全局變量在代碼的任何位置都可以使用
在全局作用域下var聲明的變量 是全局變量
特殊情況下,在函數(shù)內(nèi)不使用 var 聲明的變量也是全局變量(不建議使用)
在局部作用域下聲明的變量叫做局部變量(在函數(shù)內(nèi)部定義的變量)
局部變量只能在該函數(shù)內(nèi)部使用
在函數(shù)內(nèi)部 var 聲明的變量是局部變量
函數(shù)的形參實(shí)際上就是局部變量
全局變量:在任何一個(gè)地方都可以使用,只有在瀏覽器關(guān)閉時(shí)才會被銷毀,因此比較占內(nèi)存
局部變量:只在函數(shù)內(nèi)部使用,當(dāng)其所在的代碼塊被執(zhí)行時(shí),會被初始化;當(dāng)代碼塊運(yùn)行結(jié)束后,就會被銷毀,因此更節(jié)省內(nèi)存空間
只要是代碼,就至少有一個(gè)作用域
寫在函數(shù)內(nèi)部的叫局部作用域
如果函數(shù)中還有函數(shù),那么在這個(gè)作用域中就又可以誕生一個(gè)作用域
根據(jù)在內(nèi)部函數(shù)可以訪問外部函數(shù)變量的這種機(jī)制,用鏈?zhǔn)讲檎覜Q定哪些數(shù)據(jù)能被內(nèi)部函數(shù)訪問,就稱作作用域鏈
// 作用域鏈: 內(nèi)部函數(shù)訪問外部函數(shù)的變量,采取的是鏈?zhǔn)讲檎业姆绞絹頉Q定取哪個(gè)值,這種結(jié)構(gòu)我們稱為作用域鏈表var num = 10;funtion fn() { //外部函數(shù) var num = 20; function fun() { //內(nèi)部函數(shù) console.log(num); // 20 ,一級一級訪問 }}
作用域鏈:采取就近原則的方式來查找變量最終的值。
首先來看幾段代碼和結(jié)果:
console.log(num); // 結(jié)果是多少?//會報(bào)錯(cuò) num is undefined
console.log(num); // 結(jié)果是多少?var num = 10; // undefined
// 命名函數(shù)(自定義函數(shù)方式):若我們把函數(shù)調(diào)用放在函數(shù)聲明上面fn(); //11function fn() { console.log('11');}
// 匿名函數(shù)(函數(shù)表達(dá)式方式):若我們把函數(shù)調(diào)用放在函數(shù)聲明上面fn();var fn = function() { console.log('22'); // 報(bào)錯(cuò)}//相當(dāng)于執(zhí)行了以下代碼var fn;fn(); //fn沒賦值,沒這個(gè),報(bào)錯(cuò)var fn = function() { console.log('22'); //報(bào)錯(cuò)}
JavaScript 代碼是由瀏覽器中的 JavaScript 解析器來執(zhí)行的。JavaScript 解析器在運(yùn)行 JavaScript 代碼的時(shí)候分為兩步:預(yù)解析和代碼執(zhí)行。
預(yù)解析:js引擎會把js里面所有的 var還有 function提升到當(dāng)前作用域的最前面
代碼執(zhí)行:從上到下執(zhí)行JS語句
預(yù)解析只會發(fā)生在通過 var 定義的變量和 function 上。學(xué)習(xí)預(yù)解析能夠讓我們知道為什么在變量聲明之前訪問變量的值是 undefined,為什么在函數(shù)聲明之前就可以調(diào)用函數(shù)。
變量預(yù)解析也叫做變量提升、函數(shù)提升
變量提升: 變量的聲明會被提升到當(dāng)前作用域的最上面,變量的賦值不會提升
console.log(num); // 結(jié)果是多少? var num = 10; // undefined //相當(dāng)于執(zhí)行了以下代碼 var num; // 變量聲明提升到當(dāng)前作用域最上面 console.log(num); num = 10; // 變量的賦值不會提升
函數(shù)提升: 函數(shù)的聲明會被提升到當(dāng)前作用域的最上面,但是不會調(diào)用函數(shù)。
fn(); //11function fn() { console.log('11');}
對于函數(shù)表達(dá)式聲明調(diào)用需要記?。?strong>函數(shù)表達(dá)式調(diào)用必須寫在函數(shù)聲明的下面
// 匿名函數(shù)(函數(shù)表達(dá)式方式):若我們把函數(shù)調(diào)用放在函數(shù)聲明上面 fn(); var fn = function() { console.log('22'); // 報(bào)錯(cuò) } //相當(dāng)于執(zhí)行了以下代碼 var fn; fn(); //fn沒賦值,沒這個(gè),報(bào)錯(cuò) var fn = function() { console.log('22'); //報(bào)錯(cuò) }
預(yù)解析部分十分重要,可以通過下面4個(gè)練習(xí)來理解。
Pink老師的視頻講解預(yù)解析:https://www.bilibili.com/video/BV1Sy4y1C7ha?p=143
// 練習(xí)1var num = 10;fun();function fun() { console.log(num); //undefined var num = 20;}// 最終結(jié)果是 undefined
上述代碼相當(dāng)于執(zhí)行了以下操作
var num;function fun() { var num; console.log(num); num = 20;}num = 10;fun();
// 練習(xí)2var num = 10;function fn(){ console.log(num); //undefined var num = 20; console.log(num); //20}fn();// 最終結(jié)果是 undefined 20
上述代碼相當(dāng)于執(zhí)行了以下操作
var num;function fn(){ var num; console.log(num); num = 20; console.log(num);}num = 10;fn();
// 練習(xí)3var a = 18;f1();function f1() { var b = 9; console.log(a); console.log(b); var a = '123';}
上述代碼相當(dāng)于執(zhí)行了以下操作
var a;function f1() { var b; var a b = 9; console.log(a); //undefined console.log(b); //9 a = '123';}a = 18;f1();
// 練習(xí)4f1();console.log(c);console.log(b);console.log(a);function f1() { var a = b = c = 9; // 相當(dāng)于 var a = 9; b = 9;c = 9; b和c的前面沒有var聲明,當(dāng)全局變量看 // 集體聲明 var a = 9,b = 9,c = 9; console.log(a); console.log(b); console.log(c);}
上述代碼相當(dāng)于執(zhí)行了以下操作
function f1() { var a; a = b = c = 9; console.log(a); //9 console.log(b); //9 console.log(c); //9 } f1(); console.log(c); //9 console.log(b); //9 console.log(a); //報(bào)錯(cuò) a是局部變量
“JavaScript函數(shù)與作用域的使用方法是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!