首頁 > web前端 > js教程 > 主體

關於常見的JS函數問題的講解

jacklove
發布: 2018-05-21 10:54:34
原創
1451 人瀏覽過

在學習中常會遇到Javascript的函數問題,本篇將會對其進行解說。

函數宣告和函數表達式有什麼區別

函數表達式和函數宣告語句包含相同的函數名,並且都建立了新的函數對象,他們的差異主要在於變數提升的物件不同

函數宣告的函數名稱就是一個變量,變數指向函數物件。變數提升的是函數的變數和函數主體。

函數表達式的是透過var進行賦值,把整個函數賦值給一個新的變量,變數提升的是新的變數名,函數初始化程式碼將繼續留在原來的位置不變。

什麼是變數的宣告前置?什麼是函數的宣告前置

變數的宣告前置

console.log(a);var a = 1;
结果为underfined
登入後複製

變數的宣告前置會預設此程式碼為:

var a;      //變數宣告前置console.log(a);
a = 1;

函數的宣告前置

a()function a(){console.log ("hello") }
登入後複製

函數的宣告前置預設此程式碼為:

function a(){                   //将函数声明提升console.log ("hello") }a()
arguments 是什么
登入後複製

arguments是一個類別數組的對象,它裡面所儲存的是函數執行的時候所傳遞進來的參數,在函數中可以使用arguments來取得所有函數的參數。
如下程式碼:

function say(name,sex,age){  console.log(arguments);
}console.log('name:jiuyi',"sex:男",'age:54')
结果为:"name:jiuyi""sex:男""age:54"
登入後複製

函數的重載怎麼實作

在JS中沒有函數重載的概念,後面的新函數將會覆寫前面的同名函數,就算參數不同。

      function p(a,b,c) {  
           console.log(a+b+c);  
       }  
 
       function p(a,b) {  
           console.log(a+b);  
       }       console.log(p('hello','jiuyi','yes'));       console.log(p('hello'))
结果为:  "hellojiuyi"
 "helloundefined"
登入後複製

由上圖可以看出,後面的P函數覆蓋掉了上面的P函數。

立即執行函數表達式是什麼?有什麼作用

立即執行函數表達式就是將整個函數宣告用()包含起來變成函數表達式,然後後面跟上參數就會立即執行函數。
function ( ){ }函數宣告轉為( function (){ }) ( )
作用:

產生自己的作用域以及獨立的局部變量,不受變數提升的干擾,減少內部變數與外邊變數衝突的可能,執行一次會銷毀變數。

什麼是函數的作用域鏈

在JS中分為全域變數和局部變量,函數內部可以存取全域變量,而函數外部不能存取函數內部的局部變量,在變數在一個函數內部的時候,會優先在這個作用域裡尋找變數是否定義,沒有就向上一級尋找,知道找到所需的變數。如果在全域變數中沒有找到將會報錯。盡量使用局部變量,以免造成與外部變量的干擾。

1.程式碼輸出

  function getInfo(name, age, sex){        console.log('name:',name);        console.log('age:', age);        console.log('sex:', sex);        console.log(arguments); //代表实际参数,所以输出实际参数内容
        arguments[0] = 'valley';//name赋值为valley
        console.log('name', name);//所以这里参数输出为valley
    }
    getInfo('hunger', 28, '男');
    getInfo('hunger', 28);
    getInfo('男');
结果为:
name: hunger
 age: 28
 sex: 男
["hunger", 28, "男"]
name valley
 name: hunger
 age: 28sex: undefined
 ["hunger", 28]
 name valley
name: 男
age: undefined
 sex: undefined["男"]
name valley
登入後複製

2.寫一個函數,傳回參數的平方和

  function sumOfSquares(){   var x = 0;   for(var i = 0;i<arguments.length;i++){
   x = x + arguments[i]*arguments[i]
   }   console.log(x)
   }
   sumOfSquares(2,3,4);   
   sumOfSquares(1,3);
结果为:2910
登入後複製

3.如下程式碼的輸出?為什麼

console.log(a); //輸出為underfined,因為JS會全域變數提升,a只有宣告沒有賦值var a = 1;console.log(b);//報錯,因為b未宣告未賦值

4.如下程式碼的輸出?為什麼

sayName(&#39;world&#39;); 
sayAge(10); function sayName(name){ console.log(&#39;hello &#39;, name);
 } var sayAge = function(age){ 
console.log(age); 
};
登入後複製

結果為:
hello  world  //因為函數宣告前置function sayName(name)被提升到最上面,sayName有宣告有內容。報錯  //因為變數宣告前置 var sayAge 提升到最上面,而sayAge函數未聲明,所以報錯。

5.如下程式碼的輸出?為什麼

function fn(){} 
 var fn = 3; console.log(fn);
相当于:  var fn;  function fn(){} ;
  fn = 3;  console.log(fn);    //所以输出为3
登入後複製

6.如下程式碼的輸出?為什麼

function fn(fn2){   console.log(fn2);   //输出 function fn2(){ console.log(&#39;fnnn2&#39;);}
   var fn2 = 3;   console.log(fn2);   //输出3
   console.log(fn);    //输出 function fn(fn2){ console.log(fn2); var fn2 = 3; console.log(fn2); console.log(fn); function fn2(){ console.log(&#39;fnnn2&#39;); } } fn(10);
   function fn2(){ 
     console.log(&#39;fnnn2&#39;);  //不输出,函数未调用
   } 
} 
fn(10);
相当于:var fn2;                            //声明前置function fn(fn2){  
   function fn2(){                   //函数声明前置
     console.log(&#39;fnnn2&#39;);          //此函数不输出,未调用
   } 
   console.log(fn2);               // 调用的其实是函数fn2
   fn2 = 3;             
   console.log(fn2);            // 此时fn2已被赋值为3
   console.log(fn);              //调用的其实是fn整个函数}
fn(10);
登入後複製

7.如下程式碼的輸出?為什麼

  var fn = 1;    function fn(fn){         console.log(fn);
    }    console.log(fn(fn));       //结果报错,变量提升,fn为1,直接调用1出错结果相当于:    var fn;    function fn(fn){         console.log(fn);
    }
    fn = 1;    console.log(fn(fn));
登入後複製

8.如下程式碼的輸出?為什麼

console.log(j);   //变量提升输出undefined
 console.log(i);    //变量提升输出undefinedfor(var i=0; i<10; i++){   //i循环后结果为10var j = 100; 
} console.log(i);    //输出10
 console.log(j);    //输出100
登入後複製

9.如下程式碼的輸出?為什麼

 fn();   var i = 10;   var fn = 20;   console.log(i);   function fn(){       console.log(i);       var i = 99;
       fn2();       console.log(i);       function fn2(){
           i = 100;
        }
    }
代码相当于:var i; 
var fn;function fn(){  
  var i ;  function fn2(){
  i = 100;
  } console.log(i);    //只有声明未赋值输出underfined
  i = 99;
  fn2();                  //经过运行I=100
  console.log(i);      //输出100}
fn();
i = 10;
fn = 20;console.log(i);             //输出10
登入後複製

10.如下程式碼的輸出?為什麼

 var say = 0;
    (function say(n){        console.log(n);        if(n<3) return;
        say(n-1);
    }( 10 ));    console.log(say);
登入後複製

程式碼相當於:    var say;

   (function say(n){        console.log(n);        if(n<3) return;    
        say(n-1);
    }( 10 ));
      say = 0;    console.log(say);           //输出为0结果为:10987654320
登入後複製

函數say為立即執行函數,執行結果為10、9、8、7、6、5、4、3 、2,最後say賦值為0,所以輸出為0

本篇對常見的js函數問題進行了講解,更多相關內容請關注php中文網。

相關推薦:

JavaScript相關函數的解說

#關於jquery DOM&事件的解說

#一些相關的模組化基礎

#

以上是關於常見的JS函數問題的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!