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變數有一個的特別之處,就是會把變數的宣告提前,表達式
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 () {}
函數式聲明
function f() {}
看起來是
var f = function f(){};
的簡寫。而
var a = function b(){};
使用Function建構函數也可用來建立函數:
var f = new Function("a,b,c","return a+b+c;");
這種方式其實是在全域作用域內產生一個匿名函數,並且將它賦值給變數
這個變數。
遞歸被用來簡化許多問題,這需要在一個函數體中調用它自己:
// 一个简单的阶乘函数 var f = function (x) { if (x === 1) { return 1; } else { return x * f(x - 1); } };
函數名稱遇到困難,對於上面的變量式聲明,f是一個變量,所以它的值很容易被替換:
var fn = f; f = function () {};
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 } };
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
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
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构造函数创建的函数在每次被调用时,都会重新编译出一个函数,递归调用会引发性能问题——你会发现你的内存很快就被耗光了。