ECMAScript 之 Function
栏目: JavaScript · 发布时间: 5年前
内容简介:Function 是 ECMAScript 的主體,一共提供了 4 種方式定義 function。ECMAScript 5ECMAScript 2015
Function 是 ECMAScript 的主體,一共提供了 4 種方式定義 function。
Version
ECMAScript 5
ECMAScript 2015
Function Declaration
function sum(x, y) { return x + y; } console.log(sum(1, 2));
最傳統的方式,以 function
定義 function,這種方式類似 var
,會有 Hoisting,因此 Function Declaration 可以寫在呼叫端後面,如:
console.log(sum(1, 2)); function sum(x, y) { return x + y; }
Function Expression
const sum = function(x, y) { return x + y; } console.log(sum(1, 2));
以 function
建立 Anonymous Function,再讓變數 reference 該 Anonymous Function,這種寫法沒有 Hoisting,因此 Function Expression 必須寫在呼叫端前面。
Constructor Function
const sum = new Function('x', 'y', 'return x + y'); console.log(sum(1, 2));
const sum = new Function('x, y', 'return x + y'); console.log(sum(1, 2));
由於 function 也是 object,因此也可使用 Constructor Function 方式建立 function。
Function 的每個 parameter 都是 argument,或者只用一個 argument,中間以 ,
隔開皆可,且這種方式也沒有 Hoisting。
使用 new Function
有個特點: 所有 argument 都是 string
。
const param = 'x, y'; const body = 'return x + y'; const sum = new Function(param, body); console.log(sum(1, 2));
所有 argument 都是 string,看似很荒謬,但也由於是 string,你就有機會以 湊字串
或 讀取設定檔
的方式動態建立 function。
平常幾乎不會使用 new Function()
定義 function,但若想動態以 湊字串
方式建立 function,或者 function 定義來自於 設定檔
,就有機會使用 new Function()
Arrow Function
const sum = (x, y) => x + y; console.log(sum(1, 2));
ECMAScript 2015 迎來 Arrow Function,因此 Function Expression 也可以搭配 Arrow Function,當然也沒有 Hoisting。
Conclusion
- 4 種寫法只有 Function Declaration 有 Hoisting
- 實務上甚少使用 Constructor Function 建立 function,除非想動態湊 function,或由設定檔建立 function,也由於是 string,可能要注意被惡意 injection 攻擊
- 隨著 ECMAScript 2015 迎入 Arrow Function,使用 Function Expression + Arrow Function 的寫法越來越常見
Reference
山田祥寬, 新一代 JavaScript 程式設計精髓
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。