Javascript中怎么實現函數聲明與遞歸調用

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。

看完上述內容，你們掌握Javascript中怎么實現函數聲明與遞歸調用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！