JavaScript的各種常見函數定義方法_javascript技巧-js教程-PHP中文網

本文詳細講述了JavaScript的各種常見函數定義方法，並分享給大家供大家參考。具體分析如下：

先來看看JavaScript最常見的四個函數定義：

用Function建構函數定義的函數，程式碼如下：

var multiply = new Function('x', 'y', 'return x * y;');

登入後複製

函數聲明，這種方式也是最常見的一種：

function multiply(x, y) {
  return x * y;
}

登入後複製

函數表達式，宣告為匿名函數然後賦值給一變量，很常見的方式：

var multiply = function(x, y) {
  return x * y;
}

登入後複製

函數表達式，但是函數宣告為命名函數再賦值給一變量，長得跟上一種方式真像：

var multiply = function multi(x, y) {
  return x * y;
}

登入後複製

先比較一下函數名，以及將函數賦值給的那個函數變數直接的關係，真繞…直觀一點兒，從剛剛的例4說吧，就是multiply這個函數變數與multi這個函數名的關係：

函數名是不能夠被修改的，相反的，函數變數是可以重新被賦值的。函數變數可以被重新賦值應該很好理解，我們第4個例子剛剛定義的multiply這個變量，看它不順眼，重新賦值為：

multiply = function(x, y) {
  return x + y;
}

登入後複製

立刻搖身一變，從乘法變成加法了。但是multi這個函數變數想變就是不可能的了，函數定義已經在那裡了，只要還保留這它的引用，它就是不會變的，可能這裡不大好理解，先這樣想著，往下看，慢慢就應該能理解了。

函數名稱同時是無法在函數外部使用的，它只在函數體內部可見，一個很簡單的例子：

var foo = function bar() {
  alert('hello');
}
foo(); // 提示“hello”字符串
bar(); // 执行报错，bar未定义

登入後複製

和明顯，這裡的bar確實是一個函數名，但是它確實不能在外部呼叫。這時候一定會有童鞋問幹嘛這個例子還是長得那麼乖，和例4一個樣，怎麼不用例2的方式呢？問得好，且聽我慢慢分解。

繼續說例4，我們可以看見函數名（multi）和函數變數(multiply)，本來就不同，其實兩者根本就沒有任何關係，因此沒有保持一致的必要。說到這兒，我想上面4個例子應該可以精簡到3個，例2和例4本質應該是一致的。什麼，不相信？嘻嘻，我還得繼續賣關子哈~繼續讀下去~~

我們發現例2和例4相比，只不過少了var的函數變量，而例3與例4相比，只不過少了那個函數名，這裡從現像上看，例2和例4的本質是相同的，鐵證如下：

function foo() {}
alert(foo); // 提示包含“foo”的函数名
var bar = foo;
alert(bar); // 提示依然只包含“foo”的函数名，和bar半毛钱关系都没有

登入後複製

的確是鐵證吧？上面的類似例2的程式碼結合起來寫是不是就成例4的方式了？正確，這就是我剛剛所說的兩者本質應該相同，只是用例2方式定義函數的時候，JS引擎幫我們做了一些事情，比如聲明了函數名為multiply的函數，同時還悄悄定義了一個也叫multiply的變量，然後賦值給這個變量，兩個完全一樣的名字，我們自以為在使用函數名multiply的時候，實際是在用multiply這個函數變量，暈了吧~說實話，我也暈了~ ~總之我們調用的時候，實在用函數變數調用，而函數名是無法在外部調用函數的，因此有了我上述的推斷。

但是這裡要提到的一個小小的差別，函數聲明方式定義的函數，與構造函數聲明的或者函數表達式聲明的不同之處在於，函數聲明方式的函數可以在函數定義之前就調用……不說了，還是看代碼：

foo(); // 提示Foo
function foo() {
  alert('Foo');
}
bar(); // 哥们，和上面确实不一样，就不要逞能，这不报错了？提示bar未定义
var bar = function() {
  alert('Bar');
}

登入後複製

再說說建構函數宣告的函數，這樣宣告的函數是不會繼承目前宣告位置的作用域，它預設只會擁有全域作用域，然而這個是其他幾種函數宣告方式也一樣有的，如下：

function foo() {
  var hi = 'hello';
  //return function() {
  //  alert(hi);
  //};
  return Function('return hi;');
}
foo()(); // 执行效果大家自己跑一下看看

登入後複製

可以想见，用构造函数声明返回的这个函数执行必然报错，因为其作用域（即全局作用域）中没有hi这个变量。

还有一点，就是往往大家要说构造函数方式声明的函数效率要低，这是为什么呢？今天从文档是得知是因为另外3种方式申明的函数只会被解析一次，其实他们存在于闭包中，但是那也只与作用域链有关，函数体是只会被解析一次的。但是构造函数方式呢，每次执行函数的时候，其函数体都会被解析一次，我们可以想想这样声明的函数是一个对象，其中存放了参数以及函数体，每次执行的时候都要先解析一次，参数和函数体，才会执行，这样必然效率低下。具体实验不知道如何做？

最后说一个大家都不怎么注意的地方，什么时候看似函数声明方式的方式却不是函数生命方式（还是这么绕~简单点儿说，就是例2的方式什么时候在不经意间就成其他方式了）：

当成为表达式的一部分，就如同例3和例4。
不再是脚本本身或者函数的“源元素”（source element）。什么是源元素呢？即在脚本中的非嵌套语句或者函数体（A "source element" is a non-nested statement in the script or a function body），例如：

var x = 0;        // source element 
if (x == 0) {      // source element 
  x = 10;        // not a source element, 因为嵌套在了if语句里
  function boo() {}   // not a source element, 因为嵌套在了if语句里
} 
function foo() {     // source element 
  var y = 20;      // source element 
  function bar() {}   // source element 
  while (y == 10) {   // source element 
   function blah() {} // not a source element, 因为嵌套在了while语句里
   y++;        // not a source element, 因为嵌套在了while语句里
  } 
}

登入後複製

源元素的概念大概有了理解，继续刚刚说的函数声明，请看：

// 函数声明
function foo() {} 
  
// 函数表达式
(function bar() {}) 
  
// 函数表达式
x = function hello() {} 
 
if (x) { 
  // 函数表达式
  function world() {} 
}
 
// function statement 
function a() { 
  // function statement 
  function b() {} 
  if (0) { 
   // 函数表达式
   function c() {} 
  } 
}

登入後複製

最后这里说一下我自己的理解，之所以要区分函数声明与非函数声明，因为在我看了，函数声明方式的函数定义，在JS解析引擎执行的时候会将其提前声明，也就是像我们刚刚上面说的那样，可以在函数定义之前使用，实际上是解析引擎在我们使用前已经将其解析了，但是非函数声明式，就像表达式函数声明，JS解析引擎只会把var声明的变量提前定义，此时变量值为undefined，而真正对这个变量的赋值是在代码实际所在位置，因此上述提到报错都是undefined，实际变量已经定义了，只是还没有赋值，JS解析引擎不知道它为函数。

相信本文所述对大家javascript WEB程序设计的有一定的借鉴价值。