[前端JS学习笔记]JavaScript function

一、函数的声明

1.1 function 命令

function methodName(params) {
       // code    
}

如下声明：

function test_function(params) {
    console.log("function");
}

如上函数, 声明了 test_function函数, 以后使用test_function(params) 都会调用相应的代码, 这就是函数的声明

1.2 函数表达式

 除了1.1的函数直接声明,JS还可以用函数赋值给一个变量,即函数表达式。

我们先来看下它的语法是怎么玩的。

var methodName = function() {
    // code
};

如下玩法

var test_function = function() {
    console.log("function");
};

 如上函数是把一个匿名函数赋值给一个变量,  匿名函数就是没有名字了,顾名思义,所以function命令后不要再加函数名。特别要提醒一点 : 使用函数表达式声明的, 函数的声明在结尾的大括号需要加上 分号  表示语句结束。

而函数声明的结尾的大括号后面可以不加 分号。

1.3 Function构造函数

先看下语法

var methodName = new Function(
    params...
);

玩法

如果有多个参数,最后一个参数会被当做函数体使用

var test_function = new Function('a','b',
    'return (a + b)'
);
console.log(test_function(1,2)); // 3

上面函数等价于

function add (a, b) {
      return a + b;    
} 

剖析下第一种写法的参数语义, 除了最后一个参数add 被当做函数体外,其它参数可以看做是函数体add的参数。

Function接受任意类型的参数, 如果只有一个参数,那该参数即被当做函数体使用

var methodName = new Function(
    'console.log("function")'
);

二、函数的其它知识点

2.1 闭包

在JavaScript中,闭包是一个难点,在很多高级应用中基本会使用闭包实现。要理解闭包,我们先来看下变量的作用域吧。无非就两种,全局、局部作用

下面的内部函数使用涉及到局部变量访问,变量n作用域f1函数块内,如果想在外部直接访问是不行的,下面在函数f1定义了一个内部函数f2,很巧妙避开了这个问题,由于f2是内部函数,可以直接访问变量n,而内部函数f2又作为f1的返回值.因此,它对外提供了访问f1的局部变量n。闭包就是函数f2,剖析到这里,想必大家都大概能理解闭包的含义了吧。闭包就是"一个函数的内部函数".它的最大特点是能记住所属内部函数的函数环境（f1的局部变量等）本质上,它是连接内部函数和外部函数的桥梁。

function f1() {
  var n = 666;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 666

如此一来, n就像是f1的私有变量,外部不能直接访问,那从这个角度思考,闭包类似于java的私有变量,get method提供了对外访问功能。同样,闭包也可以运用在这个场景。

2.2 立即执行定义函数

假设定义了一个函数 iife_function ,然后你想马上调用它。这不是so easy么？直接 iife_function() 。

或许,你想当然想这样调用 function iife_function(){}();  但这种语法是错误的.JavaScript一律将function开头的解释成语句。

而方法的定义是不能以圆括号结束的。

所幸的是,JavaScript支持了下面的调用法。

格式大概是酱紫滴~ 将定义的函数iife_function 放在 圆括号()里面,再在后面加上 ()即可表示调用。

      
    (function iife_function() {
        console.log("iife");
    }());

OR

    (function iife_function2() {
        console.log("iife2");
    })();    

三、参考文献 

http://javascript.ruanyifeng.com/grammar/function.html#toc1