DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 詳解Javascript函數聲明與遞歸調用
詳解Javascript函數聲明與遞歸調用
編輯:JavaScript基礎知識     

Javascript的函數的聲明方式和調用方式已經是令人厭倦的老生常談了,但有些東西就是這樣的,你來說一遍然後我再說一遍。每次看到書上或博客裡寫的Javascript函數有四種調用方式,我就會想起孔乙己:茴字有四種寫法,你造嗎?

盡管缺陷有一堆,但Javascript還是令人著迷的。Javascript眾多優美的特性的核心,是作為頂級對象(first-class objects)的函數。函數就像其他普通對象一樣被創建、被分配給變量、作為參數被傳遞、作為返回值以及持有屬性和方法。函數作為頂級對象,賦予了Javascript強大的函數式編程能力,也帶來了不太容易控制的靈活性。

1、函數聲明

變量式聲明先創建一個匿名函數,然後把它賦值給一個指定的變量:

var f = function () { // function body }; 

通常我們不必關心等號右邊表達式的作用域是全局還是某個閉包內,因為它只能通過等號左邊的變量f來引用,應該關注的是變量f的作用域。如果f指向函數的引用被破壞(f = null),且函數沒有被賦值給任何其它變量或對象屬性,匿名函數會因為失去所有引用而被垃圾回收機制銷毀。

也可以使用函數表達式創建函數:

function f() { // function body } 

與變量式不同的是,這種聲明方式會為函數的一個內置屬性name賦值。同時把函數賦值給當前作用域的一個同名變量。(函數的name屬性,configurable、enumerable和writable均為false)

function f() { // function body } 
console.log(f.name); // "f" 
console.log(f); // f() 

Javascript變量有一個的特別之處,就是會把變量的聲明提前,表達式式的函數聲明,也會把整個函數的定義前置,因此你可以在函數定義之前使用它:

console.log(f.name); // "f" 
console.log(f); // f() 
function f() { // function body } 

函數表達式的聲明會被提升到作用域頂層,試試下面的代碼,它們不是本文的重點:

var a = 0; 
console.log(a); // 0 or a()? 
function a () {} 

Crockford建議永遠使用第一種方式聲明函數,他認為第二種方式放寬了函數必須先聲明後使用的要求從而會導致混亂。(Crockford是一個類似於羅素口中用來比喻維特根斯坦的"有良心的藝術家"那樣的"有良心的程序員",這句話很拗口吧)

函數式聲明

function f() {} 

看起來是

var f = function f(){}; 

的簡寫。而

var a = function b(){}; 

的表達式,創建一個函數並把內置的name屬性賦值為"b",然後把這個函數賦值給變量a,你可以在外部使用a()來調用它,但卻不能使用b(),因為函數已被賦值給a,所以不會再自動創建一個變量b,除非你使用var b = a聲明一個變量b。當然這個函數的name是"b"而不是"a"。

使用Function構造函數也可用來創建函數:

var f = new Function("a,b,c","return a+b+c;"); 

這種方式其實是在全局作用域內生成一個匿名函數,並把它賦值給變量f。

2、遞歸調用

遞歸被用來簡化許多問題,這需要在一個函數體中調用它自己:

// 一個簡單的階乘函數 
var f = function (x) { 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * f(x - 1); 
  } 
}; 

Javascript中函數的巨大靈活性,導致在遞歸時使用函數名遇到困難,對於上面的變量式聲明,f是一個變量,所以它的值很容易被替換:

var fn = f; 
f = function () {}; 

函數是個值,它被賦給fn,我們期待使用fn(5)可以計算出一個數值,但是由於函數內部依然引用的是變量f,於是它不能正常工作了。

函數式的聲明看起來好些,但很可惜:

function f(x) { 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * f(x - 1); 
  } 
} 
var fn = f; 
f = function () {}; // may been warning by browser 
fn(5); // NaN 

看起來,一旦我們定義了一個遞歸函數,便須注意不要輕易改變變量的名字。

上面談論的都是函數式調用,函數還有其它調用方式,比如當作對象方法調用。

我們常常這樣聲明對象:

var obj1 = { 
  num : 5, 
  fac : function (x) { 
    // function body 
  } 
}; 

聲明一個匿名函數並把它賦值給對象的屬性(fac)。

如果我們想要在這裡寫一個遞歸,就要引用屬性本身:

var obj1 = { 
  num : 5, 
  fac : function (x) { 
    if (x === 1) { 
      return 1; 
    } else { 
      return x * obj1.fac(x - 1); 
    } 
  } 
}; 

當然,它也會遭遇和函數調用方式一樣的問題:

var obj2 = {fac: obj1.fac}; 
obj1 = {}; 
obj2.fac(5); // Sadness 

方法被賦值給obj2的fac屬性後,內部依然要引用obj1.fac,於是…失敗了。

換一種方式會有所改進:

var obj1 = { 
   num : 5, 
   fac : function (x) { 
    if (x === 1) { 
      return 1; 
    } else { 
      return x * this.fac(x - 1); 
    } 
  } 
}; 
var obj2 = {fac: obj1.fac}; 
obj1 = {}; 
obj2.fac(5); // ok 

通過this關鍵字獲取函數執行時的context中的屬性,這樣執行obj2.fac時,函數內部便會引用obj2的fac屬性。

可是函數還可以被任意修改context來調用,那就是萬能的call和apply:

obj3 = {}; 
obj1.fac.call(obj3, 5); // dead again 

於是遞歸函數又不能正常工作了。

我們應該試著解決這種問題,還記得前面提到的一種函數聲明的方式嗎?

var a = function b(){}; 

這種聲明方式叫做內聯函數(inline function),雖然在函數外沒有聲明變量b,但是在函數內部,是可以使用b()來調用自己的,於是

var fn = function f(x) { 
  // try if you write "var f = 0;" here 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * f(x - 1); 
  } 
}; 
var fn2 = fn; 
fn = null; 
fn2(5); // OK 
 // here show the difference between "var f = function f() {}" and "function f() {}" 
var f = function f(x) { 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * f(x - 1); 
  } 
}; 
var fn2 = f; 
f = null; 
fn2(5); // OK 
var obj1 = { 
  num : 5, 
  fac : function f(x) { 
    if (x === 1) { 
      return 1; 
    } else { 
      return x * f(x - 1); 
    } 
  } 
}; 
var obj2 = {fac: obj1.fac}; 
obj1 = {}; 
obj2.fac(5); // ok 
 
var obj3 = {}; 
obj1.fac.call(obj3, 5); // ok 

就這樣,我們有了一個可以在內部使用的名字,而不用擔心遞歸函數被賦值給誰以及以何種方式被調用。

Javascript函數內部的arguments對象,有一個callee屬性,指向的是函數本身。因此也可以使用arguments.callee在內部調用函數:

function f(x) { 
  if (x === 1) { 
    return 1; 
  } else { 
    return x * arguments.callee(x - 1); 
  } 
} 

但arguments.callee是一個已經准備被棄用的屬性,很可能會在未來的ECMAscript版本中消失,在ECMAscript 5中"use strict"時,不能使用arguments.callee。

最後一個建議是:如果要聲明一個遞歸函數,請慎用new Function這種方式,Function構造函數創建的函數在每次被調用時,都會重新編譯出一個函數,遞歸調用會引發性能問題——你會發現你的內存很快就被耗光了。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved