两种js function 声明方式

http://helephant.com/2012/07/14/javascript-function-declaration-vs-expression/

 

 一种叫function declaration ，一种叫function operator.

 

function declaration 这样：

function destroyDeathStar() {
    alert("Stay on target, stay on target");
}

function operator 这样：

var destroyDeathStar = function() {
    alert("Stay on target, stay on target");
}
destroyDeathStar();

这两种最大的区别是declaration声明完了，会让代码parse，自动跑到最顶部，而operator不行，

所以这样的declaration是可以执行的，就是这个道理，也是这两种方式最大的区别

 

destroyDeathStar();
     
function destroyDeathStar() {
    alert("Stay on target, stay on target");
}

如果operator声明放在函数调用下面就会出错，找不到这个函数，所以说operator声明是在代码流里面的。所以，类似下面这种情况，operator就体现了它的优势：

 

var destroyDeathStar;
 
if(pilot == "Luke Skywalker") {
    destroyDeathStar = function() {
        alert("May the force be with you");
    }
}
else {
    destroyDeathStar = function() {
        alert("Gold Five to Red leader, lost Tiree, lost Dutch");
    }
}
destroyDeathStar(); // result will depend on the value of pilot when the code is run

 

operator就是 new 一个 function object ，这个function object要求是一个匿名函数。

 

因为function operator 是一个表达式，所以它比decalaration要灵活很多，比如放在一个对象里

var jabbaTheHut = {
 laugh : function() { alert("ho ho ho ho"); }
}
jabbaTheHut.laugh();

放在一个数组里：

var toDoToday = [
 function() { alert("Aren't you a little short for a storm trooper?") },
 function() { alert("Boring conversation anyway") },
];
for(var x=0; x<toDoToday.length; x++) {
 toDoToday[x]();
}

作为函数的参数：

// function statement
function itIsATrap(theTrap){
 theTrap();
}
 
// function operator
itIsATrap(function() { alert("Many Bothans died to bring us this information"); });

 

匿名函数很常见用于jquery里，很方便，比如：

$(document).ready(function() {
    alert("page has loaded.");
});

 

 

何时用什么

如果在if或loop里面，通常用operator，declaration无法实现因为他会被hoisted到最前面（除非没人用firefox访问你的脚本，因为在ff里这个会变成函数语句？）declarations在if或loop里面的兼容性不好。

如果你的函数只用一次，operator显然更简洁，对于单行jquery事件处理去修改一些css，operator很完美。

通过方法创建对象也一样，如果你担心效率，使用object prototype去声明一次，在对象被创建的时候。

如果在全局域，别人可以用到的，你需要考虑你创建的变量是否会和其他冲突，operator可以使用 例如namespacing这些手段可以让代码简洁。

对于用很多次的函数，两个方法因个人爱好而取。declaration更简便而且看起来像其他的语言（这算什么优势？）。

 

If you need to create a function inside an if statement or a loop, always use a function operator. The function declaration will not have the effect that you intended because it will be hoisted to the top of the code (unless you and all the people who will ever use your script are using Firefox because then it will become a function statement). Function declarations that are in if statements or loops will never consistently do what you expect cross browser.

If you are going to declare a function and use it only once and straight away, the function operator syntax is more concise than the function declaration. It is ideal for things like single line JQuery event handlers that toggle some CSS class.

Building up objects with methods is pretty much the same. Using the function operator to directly assign the method to the object means not having to go looking for the implementation. If you’re worried about performance, use the object prototype to declare the method only once for all the objects you create.

If you’re working in the global scope (writing javascript that is not inside a function), particularly if you are working on code that will be used by other people, you will want to avoid creating lots of variables that might conflict with other code. The function operator can be used with patterns such as namespacing to keep your code’s footprint as light as possible.

For any other functions that will be used a number of times, function declaration or function operator is a matter of personal preference. The function declaration is more concise and looks more like how you’d create a function in most other languages. If you’re using the function operator everywhere else and you want to make sure no one makes the mistake of putting a function declaration inside a conditional statement or a loop, then it might be worth considering mandating the function operator in your coding standards.