JavaScript的各種常見函數定義方法,javascript函數定義

來源:互聯網
上載者:User

JavaScript的各種常見函數定義方法,javascript函數定義

本文詳細講述了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(); // 提示Foofunction 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程式設計的有一定的借鑒價值。


javascript中的函數有什常用方法?

setInterval setTimeout ,alert() , 等等 基本上自己定義函數function yourfunction(){函數體}
 
JavaScript怎定義函數,它與Java中的方法有什不同?

<script type="text/javascript">
function 函數名(參數)
{
具體演算法
}
</script>
js和java雖然看起來很像,不過實際上關係不大的。。連製作公司都不同,要說JS函數和java的方法有相似之處的話也就是都是先定義再調用,可以傳遞參數
 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.