[译]javascript中定义函数的各种方法

本文翻译youtube上的up主kudvenkat的javascript tutorial播放单

源地址在此:

https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b

在Javascript中有很多不同的方法来定义函数.

>用函数声明来定义函数

例子1:声明一个函数,然后再呼出

function addNumbers(firstNumber, secondNumber)
{
    var result = firstNumber + secondNumber;
    return result;
}

var sum = addNumbers(10, 20);
document.write(sum);

Output : 30

例子2:在函数声明之前就呼出它

在例子1中,我们是先声明后呼出的.但是其实Javascript呼出函数可以放在任何地方,甚至是在函数被声明之前就呼出也是ok的.以下的代码是完全没问题的.在以下的例子中,我们在函数声明之前就呼出它

var sum = addNumbers(10, 20);
document.write(sum);

function addNumbers(firstNumber, secondNumber)
{
    var result = firstNumber + secondNumber;
    return result;
}

函数上升(Hoisting):在默认状况下,Javascript会把所有的函数声明移到当前作用域(scope)的最上方,这就叫做函数上升(Hoisting).这就是为啥Javascript函数可以在被声明之前就被呼出.

>用函数表达式来声明函数

一个函数表达式允许我们用一个表达式来定义函数(通常是将其赋给一个变量).有三种不同的方式来使用函数表达式来定义函数.

匿名函数表达式的例子:在这个例子中,我们建立一个没有名字的函数,然后将其赋给一个叫做add的变量.我们用这个变量名来激活(invoke)函数.

var add = function (firstNumber, secondNumber)
{
    var result = firstNumber + secondNumber;
    return result;
}

var sum = add(10, 20);
document.write(sum);

使用函数表达式来定义函数是不会被上升(hoisting)的.所以,这就意味着使用函数表达式定义的函数只能在其被定义后才能呼出.回想如果用普通方式来定义函数的话,无论是在定义前还是定义后呼出都是ok的.

// add() is undefined at this stage
var sum = add(10, 20);
document.write(sum);

var add = function (firstNumber, secondNumber)
{
    var result = firstNumber + secondNumber;
    return result;
}

以上代码则会报错

有名函数表达式例子:和以上匿名函数的例子类似,唯一的区别就是我们将变量赋给有名字的函数

var factorial = function computeFactorial(number)
{
    if (number [= 1)
    {
        return 1;
    }

    return number * computeFactorial(number - 1);
}

var result = factorial(5);
document.write(result);

这种格式比较适合用于制造recursive函数,而且这个函数名(computeFactorial)只在其函数内部可用,如果在函数外部使用这个函数名则会报undefined的错

var factorial = function computeFactorial(number)
{
    if (number [= 1)
    {
        return 1;
    }

    return number * computeFactorial(number - 1);
}

var result = computeFactorial(5);
document.write(result);

Output : Error - 'computeFactorial' is undefined.

自我激活函数表达式例子:

var result = (function computeFactorial(number)
{
    if (number <= 1)
    {
        return 1;
    }

    return number * computeFactorial(number - 1);
})(5);

document.write(result);

Output : 120

这样的写法有很多不同的名字

Immediately-Invoked Function Expression(IIFE)

Self-executing anonymous functions

Self-invoked anonymous functions