1. 程式人生 > >js中函式的三種定義方式、函式宣告、函式同名重複、函式刪除、

js中函式的三種定義方式、函式宣告、函式同名重複、函式刪除、

全棧工程師開發手冊 (作者:欒鵬)

在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());//true
console.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();//2
function a(){
    console.log(1);
}
function a(){
    console.log(2);
}

四、刪除

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

function foo(){
    console.log(1);
}
delete foo;//false
console.log(foo());//1