真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

JavaScript函數(shù)與作用域的使用方法是什么

本篇內(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è)合作伙伴!

JavaScript函數(shù)與作用域的使用方法是什么

1、函數(shù)

函數(shù):就是封裝了一段可被重復(fù)調(diào)用執(zhí)行的代碼塊。通過此代碼塊可以實(shí)現(xiàn)大量代碼的重復(fù)使用。

1.1、函數(shù)的使用

函數(shù)在使用時(shí)分為兩步:聲明函數(shù)調(diào)用函數(shù)

①聲明函數(shù)

//聲明函數(shù)function 函數(shù)名(){
     //函數(shù)體代碼}
  • function是聲明函數(shù)的關(guān)鍵字,必須小寫

  • 由于函數(shù)一般是為了實(shí)現(xiàn)某個(gè)功能才定義的, 所以通常我們將函數(shù)名命名為動(dòng)詞,比如getSum

②調(diào)用函數(shù)

//調(diào)用函數(shù)函數(shù)名(); //通過調(diào)用函數(shù)名來執(zhí)行函數(shù)體代碼
  • 調(diào)用的時(shí)候千萬不要忘記添加小括號

  • 口訣:函數(shù)不調(diào)用,自己不執(zhí)行

注意:聲明函數(shù)本身并不會執(zhí)行代碼,只有調(diào)用函數(shù)時(shí)才會執(zhí)行函數(shù)體代碼。

1.2、函數(shù)的封裝

  • 函數(shù)的封裝是把一個(gè)或者多個(gè)功能通過函數(shù)的方式封裝起來,對外只提供一個(gè)簡單的函數(shù)接口

1.3、函數(shù)的參數(shù)

1.3.1、形參和實(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ù)之間用逗號(,)分隔,

1.3.2、形參和實(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

1.3.3、小結(jié)

  • 函數(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ì),我們盡量要匹配

1.4、函數(shù)的返回值

1.4.1、return語句

有的時(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

1.4.2、return 終止函數(shù)

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

1.4.3、return 的返回值

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

1.4.4、小結(jié)

函數(shù)都是有返回值的

  1. 如果有 return ,則返回 return 后面的值

  2. 如果沒有 return,則返回 undefined

1.4.5、區(qū)別

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.4.5、練習(xí)

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)

1.5、arguments的使用

當(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

函數(shù)調(diào)用另外一個(gè)函數(shù)

因?yàn)槊總€(gè)函數(shù)都是獨(dú)立的代碼塊,用于完成特殊任務(wù),因此經(jīng)常會用到函數(shù)相互調(diào)用的情況。具體演示在下面的函數(shù)練習(xí)中會有。

1.6、函數(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;}

1.7、函數(shù)的兩種聲明方式

1.7.1、自定義函數(shù)方式(命名函數(shù))

利用函數(shù)關(guān)鍵字function自定義函數(shù)方式。

// 聲明定義方式function fn() {...}// 調(diào)用  fn();
  1. 因?yàn)橛忻郑砸脖环Q為命名函數(shù)

  2. 調(diào)用函數(shù)的代碼既可以放到聲明函數(shù)的前面,也可以放在聲明函數(shù)的后面

1.7.2、函數(shù)表達(dá)式方式(匿名函數(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ù)體后面

2、作用域

通常來說,一段程序代碼中所用到的名字并不總是有效和可用的,而限定這個(gè)名字的可用性的代碼范圍就是這個(gè)名字的作用域。作用域的使用提高了程序邏輯的局部性,增強(qiáng)了程序的可靠性,減少了名字沖突。

JavaScript (ES6前) 中的作用域有兩種:

  • 全局作用域

  • 局部作用域(函數(shù)作用域)

2.1、全局作用域

作用于所有代碼執(zhí)行的環(huán)境(整個(gè) script 標(biāo)簽內(nèi)部)或者一個(gè)獨(dú)立的 js 文件

2.2、局部(函數(shù))作用域

作用于函數(shù)內(nèi)的代碼環(huán)境,就是局部作用域。 因?yàn)楦瘮?shù)有關(guān)系,所以也稱為函數(shù)作用域

2.3、JS 沒有塊級作用域

  • 塊作用域由 {} 包括

  • 在其他編程語言中(如 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

3、變量的作用域

在JavaScript中,根據(jù)作用域的不同,變量可以分為兩種:

  • 全局變量

  • 局部變量

3.1、全局變量

在全局作用域下聲明的變量叫做全局變量在函數(shù)外部定義的變量

  • 全局變量在代碼的任何位置都可以使用

  • 在全局作用域下var聲明的變量 是全局變量

  • 特殊情況下,在函數(shù)內(nèi)不使用 var 聲明的變量也是全局變量(不建議使用)

3.2、局部變量

在局部作用域下聲明的變量叫做局部變量在函數(shù)內(nèi)部定義的變量

  • 局部變量只能在該函數(shù)內(nèi)部使用

  • 在函數(shù)內(nèi)部 var 聲明的變量是局部變量

  • 函數(shù)的形參實(shí)際上就是局部變量

3.3、區(qū)別

  • 全局變量:在任何一個(gè)地方都可以使用,只有在瀏覽器關(guān)閉時(shí)才會被銷毀,因此比較占內(nèi)存

  • 局部變量:只在函數(shù)內(nèi)部使用,當(dāng)其所在的代碼塊被執(zhí)行時(shí),會被初始化;當(dāng)代碼塊運(yùn)行結(jié)束后,就會被銷毀,因此更節(jié)省內(nèi)存空間

4、作用域鏈

  1. 只要是代碼,就至少有一個(gè)作用域

  2. 寫在函數(shù)內(nèi)部的叫局部作用域

  3. 如果函數(shù)中還有函數(shù),那么在這個(gè)作用域中就又可以誕生一個(gè)作用域

  4. 根據(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 ,一級一級訪問
    }}
  • 作用域鏈:采取就近原則的方式來查找變量最終的值。

5、預(yù)解析

首先來看幾段代碼和結(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ù)。

5.1、變量預(yù)解析(變量提升)

變量預(yù)解析也叫做變量提升、函數(shù)提升

變量提升: 變量的聲明會被提升到當(dāng)前作用域的最上面,變量的賦值不會提升

console.log(num);  // 結(jié)果是多少?
var num = 10;   
// undefined



//相當(dāng)于執(zhí)行了以下代碼
var num;		// 變量聲明提升到當(dāng)前作用域最上面
console.log(num);
num = 10;		// 變量的賦值不會提升

5.2、函數(shù)預(yù)解析(函數(shù)提升)

函數(shù)提升: 函數(shù)的聲明會被提升到當(dāng)前作用域的最上面,但是不會調(diào)用函數(shù)。

fn();				//11function fn() {
    console.log('11');}

5.3、解決函數(shù)表達(dá)式聲明調(diào)用問題

對于函數(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ò)
}

5.4、預(yù)解析練習(xí)

預(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í)用文章!


本文名稱:JavaScript函數(shù)與作用域的使用方法是什么
網(wǎng)站路徑:http://weahome.cn/article/ipssep.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部