溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JavaScript函數怎么封裝和使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript函數怎么封裝和使用”吧!
函數：就是封裝了一段可被重復調用執行的代碼塊。通過此代碼塊可以實現大量代碼的重復使用。
函數在使用時分為兩步：聲明函數和調用函數
//聲明函數function 函數名(){
//函數體代碼}function是聲明函數的關鍵字,必須小寫
由于函數一般是為了實現某個功能才定義的， 所以通常我們將函數名命名為動詞，比如getSum
//調用函數函數名(); //通過調用函數名來執行函數體代碼
調用的時候千萬不要忘記添加小括號
口訣：函數不調用，自己不執行
注意：聲明函數本身并不會執行代碼，只有調用函數時才會執行函數體代碼。
函數的封裝是把一個或者多個功能通過函數的方式封裝起來，對外只提供一個簡單的函數接口
在聲明函數時，可以在函數名稱后面的小括號中添加一些參數，這些參數被稱為形參，而在調用該函數時，同樣也需要傳遞相應的參數，這些參數被稱為實參。
| 參數 | 說明 |
|---|---|
| 形參 | 形式上的參數 函數定義的時候 傳遞的參數 當前并不知道是什么 |
| 實參 | 實際上的參數 函數調用的時候 傳遞的參數 實參是傳遞給形參的 |
參數的作用 : 在函數內部某些值不能固定，我們可以通過參數在調用函數時傳遞不同的值進去
// 帶參數的函數聲明function 函數名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數，用逗號分隔
// 函數體}// 帶參數的函數調用函數名(實參1, 實參2, 實參3...);例如：利用函數求任意兩個數的和
// 聲明函數function getSum(num1,num2){
console.log(num1+num2)}// 調用函數getSum(1,3) //4getSum(6，5) //11函數調用的時候實參值是傳遞給形參的
形參簡單理解為:不用聲明的變量
實參和形參的多個參數之間用逗號(,)分隔，
| 參數個數 | 說明 |
|---|---|
| 實參個數等于形參個數 | 輸出正確結果 |
| 實參個數多于形參個數 | 只取到形參的個數 |
| 實參個數小于形參個數 | 多的形參定義為undefined，結果為NaN |
function sum(num1, num2) {
console.log(num1 + num2);}sum(100, 200);
// 300，形參和實參個數相等，輸出正確結果sum(100, 400, 500, 700);
// 500，實參個數多于形參，只取到形參的個數sum(200);
// 實參個數少于形參，多的形參定義為undefined，結果為NaN注意：在JavaScript中，形參的默認值是undefined
函數可以帶參數也可以不帶參數
聲明函數的時候，函數名括號里面的是形參，形參的默認值為 undefined
調用函數的時候，函數名括號里面的是實參
多個參數中間用逗號分隔
形參的個數可以和實參個數不匹配，但是結果不可預計，我們盡量要匹配
有的時候，我們會希望函數將返回給調用者，此時通過使用 return 語句就可以實現。
return 語句的語法格式如下：
// 聲明函數function 函數名（）{
...
return 需要返回的值;}// 調用函數函數名(); // 此時調用函數就可以得到函數體內return 后面的值在使用 return 語句時，函數會停止執行，并返回指定的值
如果函數沒有 return，返回的值是undefined
// 聲明函數function sum(){
...
return 666;}// 調用函數sum(); // 此時 sum 的值就等于666，因為 return 語句會把自身后面的值返回給調用者return 語句之后的代碼不被執行
function add(num1，num2){
//函數體
return num1 + num2; // 注意：return 后的代碼不執行
alert('我不會被執行，因為前面有 return');}var resNum = add(21,6);
// 調用函數，傳入兩個實參，并通過 resNum 接收函數返回值alert(resNum);
// 27return只能返回一個值。如果用逗號隔開多個值，以最后一個為準
function add(num1，num2){
//函數體
return num1,num2;}var resNum = add(21,6);
// 調用函數，傳入兩個實參，并通過 resNum 接收函數返回值alert(resNum);
// 6函數都是有返回值的
如果有 return ，則返回 return 后面的值
如果沒有 return，則返回 undefined
break、continue、return 的區別
break ： 結束當前循環體(如 for、while)
continue ：跳出本次循環，繼續執行下次循環(如for、while)
return ：不僅可以退出循環，還能夠返回 return 語句中的值，同時還可以結束當前的函數體內的代碼
1.利用函數求任意兩個數的最大值
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;}console.log(getMax(1, 2));console.log(getMax(11, 2));2.求數組 [5,2,99,101,67,77] 中的最大數值
//定義一個獲取數組中最大數的函數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);
//這個實參是個數組alert('最大值為' + maxN);3.創建一個函數，實現兩個數之間的加減乘除運算，并將結果返回
var a = parseFloat(prompt('請輸入第一個數'));var b = parseFloat(prompt('請輸入第二個數'));function count(a,b){
var arr = [a + b, a - b, a * b, a / b];
return arr;}var result = count(a,b);console.log(result)當我們不確定有多少個參數傳遞的時候，可以用arguments來獲取。在 JavaScript 中，arguments 實際上它是當前函數的一個內置對象。所有函數都內置了一個 arguments 對象，arguments 對象中存儲了傳遞的所有實參。
arguments存放的是傳遞過來的實參
arguments展示形式是一個偽數組，因此可以進行遍歷。偽數組具有以下特點
①：具有 length 屬性
②：按索引方式儲存數據
③：不具有數組的 push , pop 等方法
// 函數聲明function fn() {
console.log(arguments); //里面存儲了所有傳遞過來的實參
console.log(arrguments.length); // 3
console.log(arrguments[2]); // 3}// 函數調用fn(1,2,3);例如：利用函數求任意個數的最大值
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因為每個函數都是獨立的代碼塊，用于完成特殊任務，因此經常會用到函數相互調用的情況。具體演示在下面的函數練習中會有。
1.利用函數封裝方式，翻轉任意一個數組
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.利用函數封裝方式，對數組排序 – 冒泡排序
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.輸入一個年份，判斷是否是閏年（閏年：能被4整除并且不能被100整數，或者能被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.用戶輸入年份，輸出當前年份2月份的天數，如果是閏年，則2月份是 29天， 如果是平年，則2月份是 28天
function backDay() {
var year = prompt('請您輸入年份:');
if (isRun(year)) { //調用函數需要加小括號
alert('你輸入的' + year + '是閏年，2月份有29天');
} else {
alert('您輸入的' + year + '不是閏年，2月份有28天');
}}backDay();//判斷是否是閏年的函數function isRun(year) {
var flag = false;
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
flag = true;
}
return flag;}利用函數關鍵字function自定義函數方式。
// 聲明定義方式function fn() {...}// 調用 fn();因為有名字，所以也被稱為命名函數
調用函數的代碼既可以放到聲明函數的前面，也可以放在聲明函數的后面
利用函數表達式方式的寫法如下：
// 這是函數表達式寫法，匿名函數后面跟分號結束var fn = function(){...};
// 調用的方式，函數調用必須寫到函數體下面fn();因為函數沒有名字，所以也稱為匿名函數
這個fn 里面存儲的是一個函數
函數調用的代碼必須寫到函數體后面
通常來說，一段程序代碼中所用到的名字并不總是有效和可用的，而限定這個名字的可用性的代碼范圍就是這個名字的作用域。作用域的使用提高了程序邏輯的局部性，增強了程序的可靠性，減少了名字沖突。
JavaScript (ES6前) 中的作用域有兩種：
全局作用域
局部作用域(函數作用域)
作用于所有代碼執行的環境(整個 script 標簽內部)或者一個獨立的 js 文件
作用于函數內的代碼環境，就是局部作用域。 因為跟函數有關系，所以也稱為函數作用域
塊作用域由 {} 包括
在其他編程語言中（如 java、c#等），在 if 語句、循環語句中創建的變量，僅僅只能在本 if 語句、本循環語句中使用，如下面的Java代碼：
if(true){
int num = 123;
System.out.println(num); // 123}System.out.println(num); // 報錯JS 中沒有塊級作用域(在ES6之前)
if(true){
int num = 123;
System.out.println(num); // 123}System.out.println(num); // 123在JavaScript中，根據作用域的不同，變量可以分為兩種：
全局變量
局部變量
在全局作用域下聲明的變量叫做全局變量（在函數外部定義的變量）
全局變量在代碼的任何位置都可以使用
在全局作用域下var聲明的變量 是全局變量
特殊情況下，在函數內不使用 var 聲明的變量也是全局變量（不建議使用）
在局部作用域下聲明的變量叫做局部變量（在函數內部定義的變量）
局部變量只能在該函數內部使用
在函數內部 var 聲明的變量是局部變量
函數的形參實際上就是局部變量
全局變量：在任何一個地方都可以使用，只有在瀏覽器關閉時才會被銷毀，因此比較占內存
局部變量：只在函數內部使用，當其所在的代碼塊被執行時，會被初始化；當代碼塊運行結束后，就會被銷毀，因此更節省內存空間
只要是代碼，就至少有一個作用域
寫在函數內部的叫局部作用域
如果函數中還有函數，那么在這個作用域中就又可以誕生一個作用域
根據在內部函數可以訪問外部函數變量的這種機制，用鏈式查找決定哪些數據能被內部函數訪問，就稱作作用域鏈
// 作用域鏈: 內部函數訪問外部函數的變量，采取的是鏈式查找的方式來決定取哪個值，這種結構我們稱為作用域鏈表var num = 10;funtion fn() { //外部函數
var num = 20;
function fun() { //內部函數
console.log(num); // 20 ,一級一級訪問
}}作用域鏈：采取就近原則的方式來查找變量最終的值。
首先來看幾段代碼和結果：
console.log(num); // 結果是多少？//會報錯 num is undefined
console.log(num); // 結果是多少？var num = 10; // undefined
// 命名函數(自定義函數方式):若我們把函數調用放在函數聲明上面fn();
//11function fn() {
console.log('11');}// 匿名函數(函數表達式方式):若我們把函數調用放在函數聲明上面fn();var fn = function() {
console.log('22'); // 報錯}//相當于執行了以下代碼var fn;fn();
//fn沒賦值，沒這個，報錯var fn = function() {
console.log('22'); //報錯}JavaScript 代碼是由瀏覽器中的 JavaScript 解析器來執行的。JavaScript 解析器在運行 JavaScript 代碼的時候分為兩步：預解析和代碼執行。
預解析：js引擎會把js里面所有的 var 還有 function 提升到當前作用域的最前面
代碼執行：從上到下執行JS語句
預解析只會發生在通過 var 定義的變量和 function 上。學習預解析能夠讓我們知道為什么在變量聲明之前訪問變量的值是 undefined，為什么在函數聲明之前就可以調用函數。
變量預解析也叫做變量提升、函數提升
變量提升: 變量的聲明會被提升到當前作用域的最上面，變量的賦值不會提升
console.log(num); // 結果是多少？var num = 10; // undefined//相當于執行了以下代碼var num; // 變量聲明提升到當前作用域最上面console.log(num);num = 10; // 變量的賦值不會提升
函數提升： 函數的聲明會被提升到當前作用域的最上面，但是不會調用函數。
fn(); //11function fn() {
console.log('11');}對于函數表達式聲明調用需要記住：函數表達式調用必須寫在函數聲明的下面
// 匿名函數(函數表達式方式):若我們把函數調用放在函數聲明上面fn();var fn = function() {
console.log('22'); // 報錯}//相當于執行了以下代碼var fn;fn(); //fn沒賦值，沒這個，報錯var fn = function() {
console.log('22'); //報錯}預解析部分十分重要，可以通過下面4個練習來理解。
// 練習1var num = 10;fun();function fun() {
console.log(num); //undefined
var num = 20;}// 最終結果是 undefined上述代碼相當于執行了以下操作
var num;function fun() {
var num;
console.log(num);
num = 20;}num = 10;fun();// 練習2var num = 10;function fn(){
console.log(num); //undefined
var num = 20;
console.log(num); //20}fn();// 最終結果是 undefined 20上述代碼相當于執行了以下操作
var num;function fn(){
var num;
console.log(num);
num = 20;
console.log(num);}num = 10;fn();// 練習3var a = 18;f1();function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';}上述代碼相當于執行了以下操作
var a;function f1() {
var b;
var a
b = 9;
console.log(a); //undefined
console.log(b); //9
a = '123';}a = 18;f1();// 練習4f1();console.log(c);console.log(b);console.log(a);function f1() {
var a = b = c = 9;
// 相當于 var a = 9; b = 9;c = 9; b和c的前面沒有var聲明,當全局變量看
// 集體聲明 var a = 9,b = 9,c = 9;
console.log(a);
console.log(b);
console.log(c);}上述代碼相當于執行了以下操作
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); //報錯 a是局部變量到此，相信大家對“JavaScript函數怎么封裝和使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
