关于常见的JS函数问题的讲解-js教程-PHP中文网

关于常见的JS函数问题的讲解

jacklove

发布： 2018-05-21 10:54:34

原创

1270人浏览过

在学习中经常会遇到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(&#39;name:jiuyi&#39;,"sex:男",&#39;age:54&#39;)
结果为："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(&#39;hello&#39;,&#39;jiuyi&#39;,&#39;yes&#39;));       console.log(p(&#39;hello&#39;))
结果为：  "hellojiuyi"
 "helloundefined"

登录后复制

由上图可以看出，后面的P函数覆盖掉了上面的P函数。

立即执行函数表达式是什么？有什么作用

立即执行函数表达式就是将整个函数声明用（）包括起来变为函数表达式，然后后面跟上参数就会立即执行函数。
function ( ){ }函数声明转为( function (){ }) ( )
作用：

生成自己的作用域以及独立的局部变量，不受变量提升的干扰，减少内部变量与外边变量冲突的可能，执行一次会销毁变量。

什么是函数的作用域链

在JS中分为全局变量和局部变量，函数内部可以访问全局变量，而函数外部不能访问函数内部的局部变量，在变量在一个函数内部的时候，会优先在此作用域里寻找变量是否定义，没有就向上一级寻找，知道找到所需要的变量。如果在全局变量中没有找到将会报错。尽量使用局部变量，以免造成与外部变量的干扰。

1.代码输出

  function getInfo(name, age, sex){        console.log(&#39;name:&#39;,name);        console.log(&#39;age:&#39;, age);        console.log(&#39;sex:&#39;, sex);        console.log(arguments); //代表实际参数，所以输出实际参数内容
        arguments[0] = &#39;valley&#39;;//name赋值为valley
        console.log(&#39;name&#39;, name);//所以这里参数输出为valley
    }
    getInfo(&#39;hunger&#39;, 28, &#39;男&#39;);
    getInfo(&#39;hunger&#39;, 28);
    getInfo(&#39;男&#39;);
结果为：
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中文网。