欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談javascript 函數(shù)表達(dá)式和函數(shù)聲明的區(qū)別

 更新時(shí)間:2016年01月05日 10:00:09   投稿:hebedich  
javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達(dá)式.究竟他們用起來有什么區(qū)別呢,今天就本著打破砂鍋問到底的精神,好好來說說這個(gè)讓人神魂顛倒的--函數(shù)聲明。

javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達(dá)式.

區(qū)別如下:

1).以函數(shù)聲明的方法定義的函數(shù),函數(shù)名是必須的,而函數(shù)表達(dá)式的函數(shù)名是可選的.

2).以函數(shù)聲明的方法定義的函數(shù),函數(shù)可以在函數(shù)聲明之前調(diào)用,而函數(shù)表達(dá)式的函數(shù)只能在聲明之后調(diào)用.

3).以函數(shù)聲明的方法定義的函數(shù)并不是真正的聲明,它們僅僅可以出現(xiàn)在全局中,或者嵌套在其他的函數(shù)中,但是它們不能出現(xiàn)在循環(huán),條件或者try/catch/finally中,而

    函數(shù)表達(dá)式可以在任何地方聲明.

下面分別用兩種方法定義函數(shù):

 //函數(shù)聲明式
 function greeting(){
    console.log("hello world"); 
 }
 
 
 //函數(shù)表達(dá)式
 var greeting = function(){
   console.log("hello world"); 
 }

下面一個(gè)有趣的javascript:

function f() { console.log('I am outside!'); }
(function () {
 if(false) {
  // 重復(fù)聲明一次函數(shù)f
  function f() { console.log('I am inside!'); }
 }
 f();
}());

會(huì)輸出什么呢?第一反應(yīng)應(yīng)該是"I am outside"吧.  結(jié)果在chrome中輸出"I am inside",IE11直接報(bào)錯(cuò),firefox低一點(diǎn)的版本輸出"I am outside"...

chrome輸出的結(jié)果很明確的反應(yīng)了用函數(shù)聲明式聲明的函數(shù)的特點(diǎn)--函數(shù)在聲明之前就可以調(diào)用.

IE報(bào)錯(cuò)顯示缺少對象,因?yàn)楹瘮?shù)聲明在了條件里,違背了函數(shù)聲明式的原則.

函數(shù)表達(dá)式的作用域:

如果函數(shù)表達(dá)式聲明的函數(shù)有函數(shù)名,那么這個(gè)函數(shù)名就相當(dāng)于這個(gè)函數(shù)的一個(gè)局部變量,只能在函數(shù)內(nèi)部調(diào)用,舉個(gè)栗子:

var f = function fact(x) { 
        if (x <= 1) 
          return 1;
        else 
          return x*fact(x-1);
        };
        alert(fact());  // Uncaught ReferenceError: fact is not defined

fact()在函數(shù)內(nèi)部可以調(diào)用,在函數(shù)外部調(diào)用就會(huì)報(bào)錯(cuò):fact未定義.
fact

我們再來詳細(xì)看下

函數(shù)聲明

  函數(shù)聲明示例代碼

代碼如下:

function fn () {
  console.log('fn 函數(shù)執(zhí)行..');
  // code..
}

  這樣我們就聲明了一個(gè)名稱為fn的函數(shù),這里出個(gè)思考,你認(rèn)為在這個(gè)函數(shù)的上面來調(diào)用他的話會(huì)執(zhí)行嗎?還是會(huì)報(bào)錯(cuò)?

代碼如下:fn(); // 在之前調(diào)用我們聲明的fn函數(shù) function fn () { console.log('fn 函數(shù)執(zhí)行..'); // code..}

  控制臺(tái)輸出結(jié)果:

  是的,此時(shí)fn函數(shù)是可以被調(diào)用到的,這里來總結(jié)下原因。

總結(jié):

  1:此時(shí)fn函數(shù)是變量的結(jié)果,默認(rèn)存儲(chǔ)在全局上下文的變量中(可用 window.函數(shù)名 來驗(yàn)證)

  2:此方式為函數(shù)聲明,在進(jìn)入全局上下文階段創(chuàng)建,代碼執(zhí)行階段,它們已經(jīng)可用。ps:javaScript在每次進(jìn)入方法時(shí)都會(huì)先初始化上下文環(huán)境(由全局 → 局部)

  3:它可以影響變量對象(僅影響存儲(chǔ)在上下文中的變量)

函數(shù)表達(dá)式

  函數(shù)表達(dá)式示例代碼

代碼如下:

var fn = function () {
  console.log('fn 函數(shù)【表達(dá)式】聲明執(zhí)行..')
  // code..
}

  這樣我們就聲明了一個(gè)匿名函數(shù),并且把它的引用指向了變量fn?

  再次在該表達(dá)式聲明的函數(shù)上下方各調(diào)用一次,來看控制臺(tái)的輸出結(jié)果。

代碼如下:

// 為了清晰的看到控制臺(tái)的輸出,我們在各自調(diào)用前后做個(gè)標(biāo)記,增加可讀性。
console.log('之前調(diào)用開始..');
fn();
console.log('之前調(diào)用結(jié)束..');
var fn = function () {
  console.log('fn 函數(shù)【表達(dá)式】聲明執(zhí)行..')
  // code..
}
console.log('之后調(diào)用開始..');
fn();
console.log('之后調(diào)用開始..');

  控制臺(tái)打印結(jié)果:

  可以看到代碼在執(zhí)行到第一次調(diào)用fn()函數(shù)的時(shí)候,提示:fn is not a function (fn 不是一個(gè)方法),遇到錯(cuò)誤而終止運(yùn)行。

  這說明在第一次調(diào)用fn()的同時(shí),var fn 變量沒有做為全局對象的一個(gè)屬性而存在,且 fn 引用的匿名函數(shù)上下文也沒有被初始化,所以在他之前調(diào)用失敗。

代碼如下:

// 現(xiàn)在先把之前的調(diào)用邏輯給注釋掉,再看下控制臺(tái)的輸出
//  console.log('之前調(diào)用開始..');
//  fn();
//  console.log('之前調(diào)用結(jié)束..');
  var fn = function () {
    console.log('fn 函數(shù)【表達(dá)式】聲明執(zhí)行..')
    // code..
  }
  console.log('之后調(diào)用開始..');
  fn(); // 在表達(dá)式之后調(diào)用
  console.log('之后調(diào)用開始..');

  控制臺(tái)打印結(jié)果:

  可以看出,在該表達(dá)式函數(shù)之后來調(diào)用是可以的,來總結(jié)下那是為什么呢?

總結(jié):

  1:首先變量本身不做為一個(gè)函數(shù)存在,而是一個(gè)匿名函數(shù)的引用(值類型的不屬于引用)

  2:在代碼執(zhí)行階段,初始化全局上下文時(shí),它沒有被做為全局的一個(gè)屬性而存在,所以不會(huì)造成變量對象的污染

  3:該類型的聲明一般在插件的開發(fā)比較常見,也可做為閉包中回調(diào)函數(shù)的調(diào)用

  所以 function fn () {} 并不等于 var fn = function () {} ,他們有本質(zhì)上的區(qū)別。

以上就是本文的全部內(nèi)容了,思路很清晰,對比也很明確,是篇非常不錯(cuò)的文章,小伙伴們一定要仔細(xì)研讀下

相關(guān)文章

最新評論