Function及Callback function

JavaScript裡的Function的基本介紹

與Function相關的new object, scope, this 會在Object, Scope, this 裡詳細介紹

可參考 JavaScript Function Definitions http://www.w3schools.com/js/js_function_definition.asp

所謂的function/library一般有兩種.

1. 語言內建.

2. 自己寫的或是別人寫好的. 但因為JavaScript的執行環境(平台)比其他語言還要來得多種. 所以Browser跟Node.js都各有提供它們平台上面非語言內建的function，且有些相容，有些不相容.

function裡面也可以有內部的function(nested function). 此特性在其他語言或多或少也有, 但不像JavaScript那麼直接.

function test1(){
  function test2(){

  }
}

JavaScript裡, function本身除了是純function外, 也可以是一種object的定義, 並使用new來產生物件, 即此function同時像是 其他語言的constructer建構子一樣. ES6才有其他語言有的class以及正式的constructer function出現.

function test (){
  this.x = 100;
  return 0;
}
var test(); // use as function
var obj = new test(); //use as a constructer

function的arguments

function的arguments, 除了明顯的宣告parameters外，可以在function內部用arguments[i]的方式得到每一個argument, e.g.

function test(x1,x2){
  console.log(arguments); // arguments={1:1,2:2,3:3}
}
test(1,2,3);

亦也可以傳入少於定義的參數個數. 即

function test(x,y){
  // y will be undefined, (有宣告但無定義)
}
test(1);

anonymous function 匿名函數

var x = function (a, b) {return a * b}

The function left is actually an anonymous function (a function without a name).

JavaScript中的Function definition: expression, declaration

可參考: http://blogger.gtwang.org/2014/04/defining-javascript-functions.html

Expressoin:

var x = function(){
}

Declaration:

function test(){
}

Notes:

1. 如果是使用Exression的方式在loop裡, 會產生多次的Function Object.

2. Exression的使用要看當時的使用情境, 不過若使用則建議不採用匿名方式來幫助debug. http://programmers.stackexchange.com/questions/160732/function-declaration-as-var-instead-of-function, 即

var x = MY_function() {};

Callback function

Object, Scope, this章節有一些進階的callback的例子, Array的map等function其實也有用到callback function

在各種程式語言裡, callback function是很重要的概念. 應為各式各樣的 API(e.g.jQuery) 或EventListener 的基礎

通常可分為兩種角色

1. 定義 API/Callback介面的人(設計者)

2. 使用這 API的人(使用者), 需定義/實作callback function

//通常這個function會做
// 1. 一些動作： 比如說發http request,
// 或找本地端的html元件. 完成後把參數(e.g.網路資料/元件)傳給callback
// 2. 註冊callback function
function apiCall(callback_fun){   
// 做了一堆事情後, 可能有變數x, y, z
  var x=5, y=6, z =7;  
  callback_fun(x,y,z);
}

// 使用者用來讓別人call的function, 用來定義使用者想要怎麼處理資料的function
// 變數名稱沒有限制, 因為都是由設計者傳參數進去, 換言之也有可能不小心定義成3個,
// 但設計API的人只有傳2個, 要看文件
function printlog(x2,y2,z2){  
  console.log("hello");   
  console.log("x:",x2,";y2:",y2,";z2:",z2);
}

apiCall(printlog);

jQuery的例子:

$('.jQueryButton').click(function(){
  console.log("click jquery button");
  var $this = $(this);
  $this.text('Clicked');
});

callback有分需要用到this, 以及沒有需要用到this的case.即上述兩例, 後面的sections會詳細講解this.

self invoke function (定義跟執行同時)

常用來跟module pattern搭配.(其可參考進階-module,timer一章)

(function () {

 var x = "Hello!!"; // I will invoke myself

})();