JS函数

函数声明

• 下面为具名函数声明 函数名:fn ,声明的后面不需要加分号
• 函数在声明的时候并没有进行执行,只是将自己的内部作为一个代码块存了起来,只有在调用函数的时候才会执行该函数体里面的内容
• 函数的执行: 函数名 + ()-->fn();表示执行fn()函数,函数执行部分场合,在哪都可以执行,都可以进行调用,不一定都是在函数的声明之后进行函数的调用执行.

function fn(){

}

• 在函数声明的后面加()是不会执行的,并且会报错.因为它的声明并不是一个语句.

function fn(){

}()//错误的!!!

• 匿名函数是不能莫名其妙的出现,除非是在赋值,传参,等场景下出现.

function() {
  alert(1);
}//匿名函数!!

函数表达式

• 如下是把一个匿名函数作为一个只赋值给变量 fn
• 函数表达式后面需要加分号,因为这是一个赋值语句
• 函数表达式执行:变量名 + ();

var fn = function(){//匿名函数赋值,常用方法
  alert(1);
};
fn();//变量表达式执行
console.log(fn);//---->f(){alert(1);}

• 函数表达式可以在末尾 + () 进行函数执行

var fn = function(){//匿名函数赋值,常用方法
  alert(1);
}();//变量表达式可以执行
//fn();此时该变量名 + () 不可以执行 该变量表达式,会报错!!!!

var fn = function ab(){//具名函数赋值
  alert(1);
};
fn();//变量表达式同样执行,ab()不可以进行执行,会报错!!!
console.log(fn);//---->f ab(){alert(1);}

匿名(具名)函数转函数表达式

• 即匿名函数立即执行(IIFE)
  作用:1.节省变量;2.私有变量的问题

(function (){//匿名函数
  alert(1);
})();//末尾的()表示调用

(function fn(){//具名函数
  alert(1);
})();//末尾的()表示调用

以下方法也可以执行

!function(){
  alert(1);
}();

~function(){
  alert(1);
}();

+function(){
  alert(1);
}();

(function(){
  alert(1);
}());

形参和实参(两者位置一一对应)

• 形参:函数名后面()里的参数,称之为形式上的参数

function fn(a,b){
  console.log(1);
}

• 实参:实际上的参数(实际上要传给函数赋值给形参a的值)

fn(2,3);

• 形参和实参两者位置一一对应

function fn(a,b){
  console.log(a+b);
}
fn(2,3,4);----->2=a,b=3,4没有对应,结果为5

function fn(a,b){
  console.log(a+b);
}
fn(2);----->2=a,b没有对应赋值,即b声明的但是没有进行赋值结果为NaN
fn("2");----->字符串+undefined,结果是"2undefined".

arguments

• 仅仅只存在于函数中,它是客观存在的
• 是一个类数组,可以通过下标得到对应的元素
• 它保留的是此函数所有的实参

function add(){
  console.log(arguments);
  console.log(arguments.length);
  var sum = 0;
  for(var i = 0;i<arguments.length;i++){
    sum += arguments[i];
  }
}
add(1,2,3,4,5);

• arguments.callee 表示的是函数自身

function (){
  console.log(arguments.callee);
}

return函数返回值

• 凡是运算都有返回值!!!!
• 函数的执行也是一种运算,也有返回值!!!
• 默认情况下,函数运算执行的返回值是undefined
• return 改变函数执行的返回值
• return 阻断函数的执行
• return 只能在函数中使用

function fn(){
  return 10;//直接退出
  console.log(1);//函数不会执行该语句
}
fn();//执行该函数
console.log(fn());//返回值为10

练习1

document.onclick = function () {
        fn(2);
    };    
    function fn(x) {
        alert(x);
    }

• 回调函数(把函数作为一个参数传递)

   //声明一个名为fn1 的函数,fn2为此函数的一个形参
   function fn1(fn2) {
       fn2(2);//调用fn2()函数执行此函数,传2,alert(2);
   }
   //执行fn1函数
    fn1(
        //给变量fn2赋值一个函数,给此函数传一个参数x
        fn2 = function (x) {
            alert(x);
        }
    );

var x;
   x = function () {
       alert(1);
   };//函数没有被执行
   console.log(x);//x = ƒ () {alert(1);}

var x;
   x = function () {
       alert(1);
   }();//函数被执行
   console.log(x);//x = undefined,函数的返回值为undefined

练习2

document.onclick = fn;//函数在点击的时候才会被执行
   function fn() {
           alert(1);
  }
console.log(fn());//fn()的返回值为undefined

document.onclick = fn();//在点击时,函数执行的是里面的return function(){alert(1);}

   function fn() {
       return function(){
           alert(1);
       }
  }

document.onclick = fn()();

   function fn() {
       return function(){
          return function(){
             alert(1);
          }
       }
  }
console.log(fn();)//返回的是:f(){return function(){alert(1);}}

console.log(fn()();)//返回的是:f(){alert(1);}

fn()()();执行该函数

document.onclick = fn()();///对于onclick来说:用两个()()进行函数执行

拓展arguments

function add(num){
  if(num > 1){
    return num += add(num-1);
  }else{
     return num;
  }  
}
add(10);
console.log(add(10));

• 函数没有名字时,使用arguments,callee对函数自身进行调用.

var add = (function (num){
  if(num > 1){
    return num += arguments.callee(num-1);
  }else{
     return num;
  }  
})(10);
console.log(add);