首頁 > web前端 > js教程 > js中函數的三種定義方式

js中函數的三種定義方式

jacklove
發布: 2018-06-15 15:59:47
原創
6309 人瀏覽過

js系列教學4-函數、函數參數

#在js中,函數本身屬於物件的一種,因此可以定義、賦值,作為物件的屬性或成為其他函數的參數。函數名稱只是函數這個物件類別的參考。

一、函數定義

【1】函數宣告語句
使用function關鍵字,後面接著一組參數以及函數體

function funcname([arg1 [,arg2 [...,argn]]]){
    statement;
}
登入後複製

【2】函數定義表達式

以表達式方式定義的函數,函數的名稱是可選的

var functionName = function([arg1 [,arg2 [...,argn]]]){
    statement;
}var functionName = function funcName([arg1 [,arg2 [...,argn]]]){
    statement;
}
登入後複製

匿名函數(anonymous function)也叫拉姆達函數,是function關鍵字後面沒有識別符的函數

通常而言,以表達式方式定義函數時都不需要名稱,這會讓定義它們的程式碼更加緊湊。函數定義表達式特別適合用來定義那些只會使用一次的函數

var tensquared = (function(x) {return x*x;}(10));   //
登入後複製

 而一個函數定義表達式包含名稱,函數的局部作用域將會包含一個綁定到函數物件的名稱。實際上,函數的名稱將成為函數內部的一個局部變數

var test = function fn(){   return fn;
}console.log(test);//fn(){return fn;}console.log(test());//fn(){return fn;}console.log(test()());//fn(){return fn;}
登入後複製

個人理解,對於具名的函數表達式來說,函數名稱相當於函數物件的形參,只能在函數內部使用;而變數名稱相當於函數物件的實參,在函數內部和函數外部都可以使用

var test = function fn(){   return fn === test;
}console.log(test());//trueconsole.log(test === fn);//ReferenceError: fn is not defined
登入後複製

函數定義了一個非標準的name屬性,透過這個屬性可以存取到給定函數指定的名字,這個屬性的值永遠等於跟在function關鍵字後面的標識符,匿名函數的name屬性為空

//IE11-浏览器无效,均输出undefined//chrome在处理匿名函数的name属性时有问题,会显示函数表达式的名字function fn(){};
console.log(fn.name);//'fn'var fn = function(){};
console.log(fn.name);//'',在chrome浏览器中会显示'fn'var fn = function abc(){};
console.log(fn.name);//'abc'
登入後複製

【3】Function建構子

Function建構子接收任意數量的參數,但最後一個參數總是被看成是函數體,而前面的參數則枚舉出了新函數的參數

var functionName = new Function(['arg1' [,'arg2' [...,'argn']]],'statement;');
登入後複製

[注意]Function建構函數無法指定函數名稱,它創建的是一個匿名函數

從技術上講,這是一個函數表達式。但,不建議使用,因為這種語法會導致解析兩次程式碼。第一次是解析常規javascript程式碼,第二次解析傳入建構函數中的字串,影響效能

var sum = new Function('num1','num2','return num1 + num2');//等价于var sum = function(num1,num2){
    return num1+num2;
}
登入後複製

Function()建構子所建立的函數,其函數體的編譯總是會在全局作用域中執行。於是,Function()建構子類似於在全域作用域中執行的eval()

var test = 0;function fn(){
    var test = 1;    return new Function('return test');}
console.log(fn()());//0
登入後複製

[注意]並不是所有的函數都可以成為建構子

var o = new Math.min();//Uncaught TypeError: Math.min is not a constructor
登入後複製

二、函數宣告順序

函數聲明,相對於變數會優先載入。所以不用擔心函數聲明在呼叫前還是呼叫後。

呼叫函數時會先在本機活動物件中查詢,也就是目前js檔案中查詢,如果沒有才會向上查詢,所以若在兩個js檔案中定義相同函數名,這兩個js檔案內部呼叫各自的函數,其他js檔案中呼叫最後宣告的函數。

三、重複

變數的重複宣告是無用的,不會覆寫先前相同作用域宣告的變量,但函數的重複宣告會覆寫前面的聲明的同名函數或同名變數。

//变量的重复声明无用var a = 1;var a;
console.log(a);//1
登入後複製
//覆盖同名变量var a;function a(){
    console.log(1);
}a();//1
登入後複製
//覆盖同名函数a();//2function a(){
    console.log(1);
}function a(){
    console.log(2);
}
登入後複製

四、刪除

函數宣告語句所建立的變數無法刪除,這一點和變數宣告一樣。

function foo(){
    console.log(1);
}delete foo;//falseconsole.log(foo());//1
登入後複製

   本文介紹了js中函數的三種定義方式,更多相關內容請關注php中文網。

相關推薦:

JS 中的‘’真假‘’

透過JS實作判斷碰撞的方法!

介紹一些經典演算法的js實作方案

#

以上是js中函數的三種定義方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板