JavaScript函数详解-优快云博客

概述

函数就是一段可以反复调用的代码块。函数不能还能接受输入的参数，不同的参数会返回不同的值。

函数的声明

function命令

function声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对员括号，里面传入函数的参数。函数体放在大括号里面。

function print(s){
    console.log(s);
}

上面的代码命名了一个print函数，以后使用print()这种形式，就可以调用相应的代码，这叫做函数的声明(Funcction Declaration)。

函数的表达式

除了用function命令声明函数，还可以采用变量赋值的方法。

var print = function(s){
    console.log(s);
};

这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称为函数表达式(Function Expression)，因为赋值语句的等号右侧只能放表达式。

采用函数表达式声明函数时，function命令后面不带有函数名。如果加上函数名，该函数名只在函数体内部有效，在函数体外部无效。

var print = function x(){
    console.log(typeof x);
};
x
// ReferenceError: x is not defined
print()
//function

上面的代码在函数表达式中，加入了函数名x。这个x只在函数体内部可用，指代函数表达式本身，其他的地方都不可用。这种写法的用处有两个，一是可以在函数体内部调用自身，二是方便除错（除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数）。因此，下面的形式声明函数也非常常见。

var f = function f(){};

需要注意的是，函数的表达式需要在语句的结尾加上分号，表示语句结束。而函数的声明在结尾的大括号后面不用加分号，总的来说，这两种声明函数的方式，差别很细微，这里可以近似地认为是等价的。

Function构造函数

还有第三种声明函数的方式：Function构造函数。

var add =new Function(
    'x',
    'y',
    'return x + y';
);
//等同于
function add(x,y){
    return x + y;
}

在上面代码中，Function构造函数接受三个参数，除了最后一个参数是add函数的“函数体”，其他参数都是add函数的参数。

你可以传递任意数量的参数给Function构造函数，只有最后一个参数会被当成函数体，如果只有一个参数，改参数就是函数体。

var foo = new Function(){
    'return "hello world"';
};
//等同于
function foo(){
    return 'hello world';
}

Function构造函数可以不使用new命令，返回结果完全一样。
总的来说,这种声明函数的方式非常不直观，几乎无人使用。

函数的重复声明

如果同一个函数被多次声明，后面的声明就会覆盖前面的声明。

function f(){
    console.log(1);
}
f() //2
function f(){
    console.log(2);
}
f() //2

上面的代码中,后一次的函数声明覆盖了前面一次。而且，由于函数名的提升，前一次在任何时候都是无效的，这一点需要特别注意。

圆括号运算符，return语句与递归

调用函数时，要使用圆括号运算符。圆括号之中，可以加入函数的参数。

function add(x,y){
    return x + y;
}
add(1,1);//add

上面代码中，函数名后面紧跟一对圆括号，就会调用这个函数。

函数体内部的return语句，表示返回。Javascipt引擎遇到return语句，就直接返回return后面的那个表达式的值，后面即使还有语句，也不会得到执行。也就是说，return语句所带的那个表达式，就是函数的返回值。return语句不是必须的，如果没有的话，该函数就不返回任何值，或者说返回undefined.

函数可以调用自身，这就是递归（recursion）。下面就是通过递归，计算斐波拉切数列的代码。

function fib(num){
    if(num === 0) return 0;
    if(num === 1) return 1;
    return fib(num-2) + fib(num-1);
}
fit(6);

上面代码中，fib函数内部又调用了fib，计算斐波拉契数列的第6个元素是8;

第一等公民

JavaScript语言将函数看做一种值，与其他值(数值、字符串、布尔值等等)地位相同。凡是可以使用值的地方，就能使用函数。比如，可以把函数赋值给变量和对象的属性，也可以当做参数传入其他函数，或者作为函数的结果返回。函数只是一个可以执行的值，并无特殊之处。

由于函数与其他数据类型地位平等，所以JavaScript语言有称函数为第一等公民。

function add(x,y){
    return x + y;
}
//将函数赋值给一个变量
var operator = add;

//将函数作为参数和返回值
function a(op){
    return op;
}
a(add)(1,1);

函数名的提升

JavaScript引擎将函数名视为变量名，所以采用function命令声明函数时，整个函数就会像变量声明一样，被提升到代码的头部。

f();
function(){}

表面上，上面的代码好像在声明之前就调用了函数f。但实际上，由于“变量提升”，函数f被提升到了代码头部，也就是在调用之前就已经声明了。但是，如果采用赋值语句定于函数，JavaScript就会报错。

f();
var f = function(){};

上面的函数等同于下面的形式。

var f;
f();
f = function(){};

上面代码第二行，调动f的时候，f只是被声明了，还没有被赋值，等于undefined,所以会报错。因此，如果同时采用function命令和赋值语句声明同一个函数，最后总是采用赋值语句的定义。

var f = function(){
    console.log('1');
}

function f(){
    console.log('2');
}

f();

不能在条件语句中声明函数

根据ECMAScript的规范，不得在非函数的代码块中声明函数，最常见的情况就是if和try语句。

if(foo){
    function x() {}
}
try{
    function x(){}
}cache(e){
    console.log(e);
}

上面的代码分别在if代码块和try代码块中声明了两个函数，按照语言规范；这是不合法的、但是实际情况是各家浏览器往往不报错，能够运行。

但是由于存在函数名提升，所以在条件语句中声明函数，可能是无效的，这是非常容易出错的地方。

if(false){
    function f() {}
}
f()

上面代码的原始意图是不声明函数f,但是由于f的提升，导致if语句无效，所以上面的代码不会报错。要达到在条件语句定义函数的目的，只有使用函数表达式。

if(false){
    var f = function(){};
}
f() //undefined

函数的属性和方法

name属性

name属性返回紧跟在function关键字后的那个函数名。

function f1(){}
f1.name //'f1'
var f2 = function(){};
f2.name //''
var f3 = function myName(){};
f3.name //'myName'

上面代码中，函数的name属性总是返回紧跟在function关键字之后的那个函数名。对于f2来说，返回空字符串；对于f3来说，返回函数表达式的名字。

length属性

length属性返回函数预期传入的参数个数，即函数定义之中的参数个数。

function f(a,b){}
f.length

上面代码定义了空函数f，它的length属性就是定义时的参数个数。不管调用时输入了多少个参数，length属性始终等于2。

length属性提供了一种机制，判断定义时和调用时参数的差异，以便实现面向对象编程的”方法重载“（overload）。

toString()

函数的toString()方法函数函数的源码。

function f(){
    a();
    b();
    c();
}
f.toString();

函数内部的注释也可以返回。

function f() {/*
  这是一个
  多行注释
*/}

f.toString()
// "function f(){/*
//   这是一个
//   多行注释
// */}"

摘自 http://javascript.ruanyifeng.com