javascript函式定義三種方式詳解
阿新 • • 發佈:2019-02-17
定義函式的三種方式
- function語句式
function test1() {
console.info("test1");
}
- 函式的直接變數 ECMAScript
var test2 = function () {
console.info("test2");
};
- function建構函式式
var test3 = new Function("a","b","return a+b;");
console.info(test3(10,20));
解析順序
對於function語句式這種方式,js解析器會優先解釋,對於另外兩種方式,僅僅是申明瞭(如果返回會是undefined),當函式體被執行的時候才會被正真地賦值
function f(){return 1;} // 函式1
alert(f()); //返回值為4 說明第1個函式被第4個函式覆蓋
var f = new Function("return 2;"); // 函式2
alert(f()); //返回值為2 說明第4個函式被第2個函式覆蓋
var f = function(){return 3;} // 函式3
alert(f()); //返回值為3 說明第2個函式被第3個函式覆蓋
function f(){return 4;} // 函式4
alert(f()); //返回值為3 說明第4個函式被第3個函式覆蓋
var f = new Function("return 5"); // 函式5
alert(f()); //返回值為5 說明第3個函式被第5個函式覆蓋
var f = function(){return 6 ;} // 函式6
alert(f()); //返回值為6 說明第5個函式被第6個函式覆蓋
效率對比
var d1 = new Date();
var t1 = d1.getTime();
for(var i =0 ; i <100000;i++){
//function test1(){;} //function語句的形式
var test2 = new Function();
}
var d2 = new Date();
var t2 = d2.getTime();
alert(t2 -t1);
對於function語句的形式只會編譯一次然後放到記憶體中供其他地方的再次使用,而使用建構函式的方式會每次都建立function物件,雖然隨之會被銷燬,但是在這裡會使效率大幅降低
函式作用域
var k = 1 ;
function t1(){
var k = 2 ; //區域性變數 k
//function test(){return k ;} //function語句 2
//var test = function(){ return k}; //函式直接量 2
//var test = new Function('return k;'); // 建構函式的方式 1
alert(test());
}
t1();
對於function語句和函式直接量兩種方式變數是具有函式的作用域,而Function建構函式的方式具有的是頂級函式的作用域