JS－－函数

函数声明和函数表达式有什么区别

函数声明：

function functionName(){
  statement;
}// 无分号

functionName();

函数表达式：

var functionName = function(){
  statement;
};// 有分号

functionName();

• 以上为两者写法的区别。由名称可以看出 “函数表达式” 的实质为表达式，“函数声明”则是使用function关键字声明的一个函数，而它们执行和调用的方法完全相同。

• 两者最大区别在于声明前置的不同。如下：
  fn("valley");
  var fn = function (str){
  console.log(str);// Uncaught TypeError: fn is not a function
  }

  var fn = function (str){
    console.log(str);// 输出结果 valley
  };
  fn("valley");
  //使用函数表达式,声明前置的规则和变量一样！(具体参照下一题)
  
  -----------------------------------------------------------------------------
  
  function fn(str){
    console.log(str);// 输出结果 valley
  }
  fn("valley");
  //使用函数声明的方式，那么即使函数写在最后也可以在前面语句调用，当然前提是函数声明部分已经被下载到本地
  

注：推荐使用函数声明，不用表达式。ps:何必自造麻烦～（函数调用要有分号哦）

函数声明VS函数表达式

什么是变量的声明前置？什么是函数的声明前置

声明前置是把该声明的变量和函数提升到自身所在作用域的顶部。

• 变量的声明前置

先获取所有被声明的变量(仅变量名，不包括其值)，然后再逐行运行。这使得所有
变量的声明被提前到作用域顶部，赋值保留在原地；而“函数表达式的声明相当于变量的声明”，当函数作为值赋给变量时只有变量“被提前”了(var functionName; 提前了)，函数体并没有“被提前”。

  console.log(a);// undefined,未赋值
  var a = 1;
  console.log(a);// 1，为变量a赋值等于1
  console.log(b);// error,报错。不存在
  //以上代码相当于以下：
  var a;
  console.log(a);
  a = 1;
  console.log(a);
  console.log(b);

• 函数的声明前置

函数的声明“整个”被提前，使函数在执行任何代码之前都可以访问。

  a(1);// 有分号，函数调用形式
  function a(name){// name为占位符，形参
    console.log(name);// 输出结果 1
  }
  以上代码相当于以下：
  function a(name){
    console.log(name);// 输出结果 1
  }
  a(1);

特别注意，若有同一名称的变量和函数，则函数会覆盖变量。

console.log(a);
function a(){ return;}// 控制台a显示为函数，证明声明前置时，函数会覆盖同名的变量声明。
var a;

参考文章

arguments 是什么

简单说就是，收集了函数中参数的一个类数组对象。
arguments可以打印出你所传入的所有参数且以酷似数组的形式出现。

function sum(){ 
  var sum = 0; 
  for(var i = 0; i < arguments.length; i++){ 
    sum = sum + arguments[i];
  }
}// 函数内部,你可以使用arguments对象获取到该函数的所有传入参数

arguments作用：

可实现JS的类似函数重载的功能。

函数的重载怎样实现？

重载是很多面向对象语言实现多态的手段之一，在静态语言中确定一个函数的手段是靠方法签名——函数名+参数列表，也就是说相同名字的函数参数个数不同或者顺序不同都被认为是不同的函数，称为函数重载。

在JavaScript中没有函数重载的概念，函数通过名字确定唯一性，参数不同也被认为是相同的函数，后面的覆盖前面的。

  function sum(){ 
    console.log(arguments);
  }
  sum(1);
  sum(1, 2, 3);/* js中的函数无传统意义的重载 */


  function sum(a, b){ 
    return a + b;
  }
  function sum(a, b, c){ 
    return a + b + c;
  }
  sum(1, 2);//出错
  sum(1, 2, 3);/* 用arguemnts实现重载*/


  function newSum(){ 
    var sum = 0; 
    for(var i = 0; i< arguments.length; i++){ 
      sum += arguments[i];
    } 
    return sum;
  }

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

立即调用函数表达式常见的有两种写法：

(function(){} ());

(function(){})();

立即调用函数表达式作用：

立即执行函数可以将写在函数体内的语句直接执行。区别于普通语句，立即执行函数内的变量不会干扰函数体外，形成一个类似区块的空间。它能做到各模块的低耦合，减少对全局作用域的污染，省去起函数名。

知乎－立即调用的函数表达式
cnblogs-深入理解JavaScript系列

什么是函数的作用域链

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
JavaScript 开发进阶：理解 JavaScript 作用域和作用域链

代码练习

1.以下代码输出什么？ （难度2）

function getInfo(name, age, sex){
  console.log('name:',name); 
  console.log('age:', age);
  console.log('sex:', sex);
  console.log(arguments);
  arguments[0] = 'valley';
  console.log('name', name);
}

getInfo('hunger', 28, '男');
getInfo('hunger', 28);
getInfo('男');

输出结果：

后台调试结果

2.写一个函数，返回参数的平方和？如 （难度2）

function sumOfSquares(){ 
} 
sumOfSquares(2,3,4);// 29 
sumOfSquares(1,3);// 10

函数示例

3.如下代码的输出？为什么 （难度1）

console.log(a); 
var a = 1;// undefined 
console.log(b);// "error"

结果

代码结果

原因

以上代码还可以写成如下：

var a;// 变量声明前置
console.log(a);// 变量a已被声明，但还未被解析到赋值部分，所以undefined
a = 1;
console.log(b)// 变量b未被声明，故解析报错"error"

4.如下代码的输出？为什么 （难度1）

sayName('world'); 
sayAge(10); 
function sayName(name){ 
      console.log('hello ', name); 
} 
var sayAge = function(age){ 
      console.log(age); 
};

结果

后台结果

原因

以上代码相当于：

function sayName(name){ 
     console.log('hello ', name); 
}// “函数声明格式”的函数，“整个”被提前
var sayAge;// “函数表达式格式”的函数，只有“变量”(var functionName;)被提前了，函数体并没有“被提前”
sayName('world');// 调用，函数体正常计算出结果
sayAge(10);// 调用，该“变量”非函数，出错 
var sayAge = function(age){ 
  console.log(age); 
};

5.如下代码的输出？为什么 （难度2）

function fn(){
} 
var fn = 3;
console.log(fn);// 结果为3

分步解析：

• 步骤1

   var fn;// 变量声明前置
  //function fn(){
  //}
  //fn = 3;
  console.log(fn);
  

步骤1调试结果

• 步骤2

  var fn;
  function fn(){
  }//fn被声明成函数格式，但未赋值 
  //fn = 3;
  console.log(fn);// 
  

步骤2调试结果

• 步骤3

  var fn;
  function fn(){
  } 
  fn = 3;//被赋值，同时重新变为变量格式
  console.log(fn);
  

步骤3调试结果

综上

var fn;// 变量声明前置
function fn(){
}// fn被声明成函数格式，但未赋值 
fn = 3;//被赋值，同时重新变为变量格式
console.log(fn);//3

6.如下代码的输出？为什么 （难度3）

function fn(fn2){ 
  console.log(fn2); 
  var fn2 = 3; 
  console.log(fn2); 
  console.log(fn); 
  function fn2(){ 
    console.log('fnnn2'); 
  } 
} 

fn(10);

调试结果

可看作如下

function fn(fn2){
  var fn2;
  function fn2(){
    console.log('fnnn2');
  }
  console.log(fn2);
  fn2 = 3;
  console.log(fn2);
  console.log(fn);
}

fn(10);

结果

7.如下代码的输出？为什么 （难度3）

var fn = 1; 
function fn(fn){ 
  console.log(fn); 
} 
console.log(fn(fn)); //Uncaught TypeError: fn is not a function 

可将JS的解析顺序视为

var fn;
function fn(fn){
  console.log(fn);//error
}
fn = 1;
console.log(fn(fn));//所以error

8.如下代码的输出？为什么 （难度**）

//作用域 
console.log(j);//undefined 
console.log(i);//undefined 
for(var i=0; i<10; i++){ 
  var j = 100; 
} 
console.log(i);//10 
console.log(j);//100

可将JS的解析顺序视为

var i;
var j;//变量声明前置
console.log(j);
console.log(i);
for( i=0; i<10; i++){ 
  j = 100; 
}//for语句非函数，不存在函数作用域，相当于直接定义的变量（具体看下面的解析）
console.log(i);
console.log(j);

调试解析

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; 
  } 
}

可将JS的解析顺序视为

var i;
var fn;
function fn(){
  var i;
  function fn2(){
      i = 100;
  } 
    console.log(i);// undefined
    i = 99;
    fn2();//调用fn2,作用相当于：i = 100;
    console.log(i);//100  
}
fn();//即结果为：undefined,100
i =10;
fn = 20;
console.log(i);//结果为：10

10.如下代码的输出？为什么 （难度*****）

代码及结果

var say; 
(function say(n){ 
console.log(n); 
if(n<3) return; 
say(n-1); }( 10 ));//立即执行函数表达式得到10-2的递减   
say = 0;//say变量被赋值0并输出 
console.log(say);

---

本教程版权归属于 fin 及 饥人谷 所有，转载请说明来源~