你瞭解javascript中的function嗎?(0)

Function作為Javascript的核心技術之一,清晰的理解function的機制和用法,對我們進行javascript開發非常重要.

今天本人就結合自己的實踐為大家介紹一些function在javascript中的一些淺顯用法.

1. Function是什麼

從Javascript對function的定義, function是一個由代碼集合而成的對象.

從中我們可看出,我們可以使用向C語言中的函數那樣使用function,也可以對function進行物件導向編程.當然Javascript中function的強     

大還不止如此.

2. 如何使用function2.1定義

function myfunc(param) {
    //code
}

注意Javascript中的這兩個function被認為是同一個:

在運行時到底調用哪一個function取決於載入順序,後一個載入的function會覆蓋前一個.

function func1() {return 'func1'; }
function func1(name) { return name; }

換句話說就是,function的參數都是選擇性參數,因此funciton的識別是不包括如參的,而函數入參處的聲明是為了引用方便以及可讀性.

以上的代碼也等價於:

function func1() {
    return arguments[0] || 'func1';
}
func();              //return 'func1'
func('function'); //return 'function'

2.2 function當作對象

是的沒錯,在javascript中function就是對象,我們可以向使用一個對象那樣使用function.

它可以有自己的屬性和方法.有如下的一個funciton:

function nameOf(name) {
    return name.toUpperCase(); 
}

2.2.1 function作為對象進行賦值

var person = person || {};
person.nameOf = nameOf;
person.nameOf('yang dong') // return "YANG DONG"

2.2.2 定義function的屬性

看看以下的代碼, 你能從中的到什麼資訊:

function nameOf() {return nameOf.blogger;}
nameOf.blogger = "YANG_DONG";

沒錯,function可以擁有自己的屬性.

考慮這樣一種情境, 假如我們要統計某個function被調用的次數.那麼我們有兩種方式來實現:

1.設定一個全域變數來記錄,該funciton被調用的次數,每調用一次,該變數加1:

var globalNameOfCounter = 0;
nameOf();
globalNameOfCounter ++;

這樣做看起來是沒有問題的,在代碼還是比較簡單的時候,它可以工作的很好,但是隨著代碼越來越複雜,維護這段邏輯的成本會直線上升.

主要是因為:globalNameOfCounter汙染的global命名空間,並且破壞了代碼的封裝性.

2.使用function的屬性

看看以下代碼:

function nameOf() {
    nameOf.counter++;
    return nameOf.blogger;
}
nameOf.blogger = “YANG_DONG"
nameOf.counter = 0;  
nameOf(); //nameOf.counter = 1
nameOf(); //nameOf.counter = 2

顯而易見,第二種方式有著很好的封裝性和維護性.function的屬性的應用還不止如此.請看下文. 

2.3 function作為名字空間

Javascript不支援名字空間(本人不太理解如此強大的語言為什麼不支援名字空間呢,這是為什麼呢?),

不過我們依然可以使用其強大的funciton為我們支援名字空間.

從上節我們知道function可以定義自己的屬性,我們就可以利用該特性來產生名字空間.請看以下代碼:

nameOf.getBloggerName = function() {
    return nameOf.blogger;
}

此時在nameOf名字空間之下已經包含了:blogger,counter屬性和function getBloggerName.

2.4 function作為method

在javascript中function和method其實是沒有什麼本質區別的,如果非的區分兩者的話,我想也就是this變數不同吧.

function g() {return this;}
var local = local || {};
local.method = g; //修改this指向local
local.method();   //返回local對象
g();              //返回DOMWindow對象

2.5 function皆為closure

在Javascript中所有的function都綁定了一個scope chain,因此它是一個儲存了調用內容相關的函數.看看下面的執行個體代碼: 

var variable = 'global';
function getVariable(){
    var variable = 'local',
    func = function() {
        return variable;
    };
    return func;
}
getVariable()();  //return local;

當func被調用的時候,它所取的varible的值是調用上下文中的變數而並非與之同名的全域變數.

3. 總結

如果用一句話概括今天對funciton的介紹,那麼我想應該是: function是可以被調用執行的代碼集對象.

以上是function的一些應用情境,當然它還不止這些.

比如: function作為建構函式(也就是funciton作為類),繼承等.這些內容將在以後的blog中為大家介紹,敬請期待.