函数声明与函数表达式的区别

函数声明使用function来进行，由于存在函数声明提升，即可以在函数声明之前调用该函数，所以不论执行语句的位置在哪都可以调用该函数。

函数表达式通过赋值语句来声明函数，声明完毕后要加上分号表示该句结束，在表达式执行完毕后，才生成函数并可被调用。函数表达式只会将变量先提升，此时变量的类型是undefined，所以不能在函数表达式前调用函数。

变量的声明前置与函数的声明前置

//变量的声明前置
console.log(a) //undefined
var a = 1;
console.log(a); //1
//相当于将var声明的变量提升到作用域顶部
var a;
console.log(a);
a = 1;
console.log(a);

//函数的声明前置
fn(); //3 因为function声明的函数会提升到作用域顶部，所以不会报错
function fn() {
    console.log(3);
}

arguments

argument是类数组对象，它包含了函数的所有实参,每个函数中都存在argument对象，argument并不是一个真正的数组，所以不具备除length属性之外的属性，这个对象维护这所有传入该函数的参数列表。

function foo(a,b) {
 console.log(a);
console.log(b);
console.log(arguments);
}
foo(1,2);
//1
//2
//[1, 2]

通过以下语句可将arguments转化为数组对象

var args=Array.prototype.slice.call(arguments)

函数重载

重载是函数具有相同的名字，但是由于传入的参数不同，执行不同操作。在js中没有类似其他语言的重载，因为同名函数会被覆盖。但是js可以通过在函数内部对传入参数进行判断来达到重载的目的。

//通过对参数进行条件判断进行函数重载
function fn(name,age,sex) {

if (name) {
 console.log(name);
}
if (age) {
 console.log(age);
}
if (sex){
 console.log(sex);
}
}
fn('a');
fn('a',18);
fn('a',18,'female');

//通过arguments进行函数重载
function fn(){
var sum=0;
for(var a=0;a<arguments.length;a++){
  sum=sum+[arguments[a];
}
return sum;
}
console.log(fn(1,2,3));

立即执行函数表达式(IIFE)概念和作用

立即执行函数表达式就是在函数声明后立即执行，这样可以做到隔离作用域，避免变量污染全局。

(function(1,2,3){
var sum=0;
for(var a=0;a<arguments.length;a++){
sum=sum+arguments[a];
}
return sum;
})();
//也可以是这样的
(function(){/*code*/}());
~function(){/*code*/}();
!function(){/*code*/}();
表达式前的计算符号皆可，来避免function被首先解析，导致语法错误，总体而言，使用括号更加安全。其实只要将函数变为表达式就可以达到这样的效果。

求n!，用递归来实现

function recursion(n) {
    if (n<0) {
        return console.log('非法数据！请正确填写0或任意正整数！');
    }
      else if(n === 0 || n === 1){
       return 1;
  }
return n * recursion(n-1);  
}

如下代码输出结果

    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('饥人谷', 2, '男');   //name:饥人谷 age:2 sex:男 ['饥人谷',2,'sex'] name valley 
getInfo('小谷', 3);   //name:小谷、age:3、undefined、['小谷', 3]、name vally;
getInfo('男');   //name:男、undefined、undefined、['男']、name vally;

写一个函数返回参数的平方和

function sumOfSquare() {
    var result = 0;
    for(var i=0; i<arguments.length; i++){
      result = result + arguments[i]*arguments[i];
    }
    return result;
}

如下代码的输出结果及原因

console.log(a); //声明提前，但是未赋值所以为undefined
var a = 1; 
console.log(b); //会报错，b is not defined

如下代码的输出结果及原因

sayName('world'); //hello world,因为函数声明前置
sayAge(10); //sayAge is not a function函数表达式只将函数表达式里的sayAge前置，此时还未赋值，所以以函数的方式调用会报错
function sayName(name){
    console.log('hello ', name);
}
var sayAge = function(age){
    console.log(age);
};

如下代码输出结果及作用域链查找过程伪代码

var x = 10
bar() 
function foo() {
  console.log(x)  
}
function bar(){
  var x = 30
  foo()
}

作用域查找伪代码

globalContext = {
    AO:{
        x:10
        foo:function
        bar:function
    },
    Scope:null
}
//foo()声明时
foo.[[scope]] = globalContext.AO
//bar声明时
bar.[[scope]] = globalContext.AO
//调用bar时,bar的执行上下文
barContext = {
    AO:{
     x:30
     foo:function
    }
    scope:bar.[[scope]] = globalContext.AO
}
//调用foo时，先从bar的AO中，找不到再从scope中找，这里在barConetext中能够找到
，就立即调用。
//调用时进入foo的执行上下文
fooContext = {
    AO:{    
    }
    scope:foo.[[scope]] = globalContext.AO
}
//所以从scope中即globalContext.AO中可以找到x:10。

如下代码输出结果及作用域链的查找过程伪代码

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}

作用域查找伪代码

globalContext = {
    AO:{
        x:10
        bar:function
    }
    scope:null
}
bar.[[scope]] = globalContext.AO 
barContext = {
    AO:{
     x:30
     foo:function
    }
    bar.[[scope]] = globalContext.AO 
}
foo.[[scope]] = barContext.AO
fooContext = {
    AO:{
    }
    foo.[[scope]] = barContext.AO
}
//所以调用foo时会在barContext.AO中找到x:30。

如下代码输出结果及作用域链查找过程伪代码

var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })()
}

作用域查找伪代码

globalContext = {
  AO:{
    x:10,
    bar:function,
  },
  scope:none;
}
bar['scope'] = globalContext.AO;
barContext = {
  AO:{
    x:30,
    foo:function,
  },
  scope:golbalContext.AO
}
foo['scope'] = barContext.AO;
fooContext = {
  AO:{},
  scope:barContext.AO
}

如下代码输结果及作用域链查找过程伪代码

var a = 1;

function fn(){
  console.log(a)
  var a = 5
  console.log(a)
  a++
  var a
  fn3()
  fn2()
  console.log(a)

  function fn2(){
    console.log(a)
    a = 20
  }
}
function fn3(){
  console.log(a)
  a = 200
}
fn()
console.log(a)

作用域查找伪代码

globalContext = {
    AO:{
        a:200
        fn:function
        fn3:function
    }
}
fn.[[scope]] = globalContext.AO
fn3.[[scope]] = globalContext.AO
fnContext = {
    AO:{
        a:20
        fn2:function
    }
    scope:fn.[[scope]] = globalContext.AO
}
fn2.[[scope]] = fnContext.AO
//第一次undefined 第二次5 
//执行fn3时，进入fn3的执行上下文
fn3Context = {
    AO:{
    }
    fn3.[[scope]] = globalContext.AO
} 
//第三次a在globalContext.AO中查找 a=1，并在globalContext.AO中的a赋值为200
fn2Context = {
    AO:{
    }
    fn2.[[scope]] = fnContext.AO
}
//第四次a在fnContext.AO中找到a=6，并赋值a=20
//第五次在fnContext.中查找 a=20
//第六次在globalContext中查找 a=200