CoffeeScript - 函式



函式是一塊可重用的程式碼塊,可以在程式的任何地方呼叫。這避免了重複編寫相同程式碼的需要。它有助於程式設計師編寫模組化程式碼。

函式允許程式設計師將一個大型程式分解成許多小的、易於管理的函式。

通常,使用 JavaScript,我們可以定義兩種型別的函式 - **命名函式**,即帶有函式名和函式體的常規函式,以及 **函式表示式**。使用函式表示式,我們可以將函式賦值給變數。

//named function
function sayHello(){
   return("Hello there");
}
 
//function expressions
var message = function sayHello(){
   return("Hello there");
}

CoffeeScript 中的函式

CoffeeScript 中的函式語法比 JavaScript 更簡單。在 CoffeeScript 中,我們只定義函式表示式。

CoffeeScript 中省略了 **function** 關鍵字。要在此處定義函式,我們必須使用細箭頭 (**->**)。

在幕後,CoffeeScript 編譯器將箭頭轉換為 JavaScript 中的函式定義,如下所示。

(function() {});

在 CoffeeScript 中,使用 **return** 關鍵字不是強制性的。CoffeeScript 中的每個函式都會自動返回函式中的最後一個語句。

  • 如果我們想返回到呼叫函式或在到達函式末尾之前返回一個值,則可以使用 **return** 關鍵字。

  • 除了行內函數(單行函式)之外,我們還可以在 CoffeeScript 中定義多行函式。由於省略了花括號,我們可以透過保持正確的縮排來實現。

定義函式

以下是 CoffeeScript 中定義函式的語法。

function_name = -> function_body

示例

下面是一個 CoffeeScript 函式的示例。在這裡,我們建立了一個名為 **greet** 的函式。此函式自動返回其中的語句。將其儲存在名為 **function_example.coffee** 的檔案中。

greet = -> "This is an example of a function"

透過在命令提示符中執行以下命令來編譯它。

c:\>coffee -c function_example.coffee

編譯後,它生成以下 JavaScript 程式碼。在這裡,您可以觀察到 CoffeeScript 編譯器自動返回名為 **greet()** 的函式中的字串值。

// Generated by CoffeeScript 1.10.0
(function() {
  var greet;
  
  greet = function() {
    return "This is an example of a function";
  };

}).call(this);

多行函式

我們還可以透過保持縮排而不是花括號來定義具有多行的函式。但是,我們必須對整個函式中的一行的縮排保持一致。

greet =  ->
  console.log "Hello how are you"

編譯後,上述 CoffeeScript 會生成以下 JavaScript 程式碼。CoffeeScript 編譯器會獲取我們使用縮排分隔的函式體,並將其放在花括號內。

// Generated by CoffeeScript 1.10.0
(function() {
  var greet;

  greet = function() {
    return console.log("Hello how are you");
  };

}).call(this);

帶引數的函式

我們還可以使用括號指定函式中的引數,如下所示。

add =(a,b) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c

編譯上述 CoffeeScript 檔案後,它將生成以下 JavaScript 程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function(a, b) {
    var c;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

}).call(this);

呼叫函式

定義函式後,我們需要呼叫該函式。您可以簡單地透過在函式名後新增括號來呼叫函式,如下例所示。

add = ->
  a=20;b=30
  c=a+b
  console.log "Sum of the two numbers is: "+c  
add()

編譯後,上述示例會生成以下 JavaScript 程式碼

// Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function() {
    var a, b, c;
    a = 20;
    b = 30;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };
  add();
}).call(this);

執行上述 CoffeeScript 程式碼後,它會生成以下輸出。

Sum of the two numbers is: 50

呼叫帶引數的函式

同樣,我們可以透過向函式傳遞引數來呼叫函式,如下所示。

my_function argument_1,argument_2
or
my_function (argument_1,argument_2)

**注意** - 在透過傳遞引數來呼叫函式時,括號的使用是可選的。

在以下示例中,我們建立了一個名為 **add()** 的函式,它接受兩個引數,並且我們已經呼叫了它。

add =(a,b) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c
add 10,20 

編譯後,上述示例會生成以下 JavaScript 程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function(a, b) {
    var c;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

  add(10, 20);

}).call(this);

執行上述 CoffeeScript 程式碼後,它會生成以下輸出。

Sum of the two numbers is: 30

預設引數

CoffeeScript 也支援預設引數。我們可以為函式的引數分配預設值,如下例所示。

add =(a = 1, b = 2) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c
add 10,20

#Calling the function with default arguments
add()

編譯後,上述 CoffeeScript 會生成以下 JavaScript 檔案。

// Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function(a, b) {
    var c;
    if (a == null) {
      a = 1;
    }
    if (b == null) {
      b = 2;
    }
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

  add(10, 20);
  add()

}).call(this);

執行上述 CoffeeScript 程式碼後,它會生成以下輸出。

Sum of the two numbers is: 30
Sum of the two numbers is: 3
廣告

© . All rights reserved.