JS中用函數(shù)聲明和函數(shù)表達(dá)式兩種方式創(chuàng)建函數(shù)的區(qū)別

liangzai_cool 發(fā)布于2019-08-20 18:19 / 2759人閱讀

摘要：在中創(chuàng)建函數(shù)的方式有很多種，本文主要講解函數(shù)聲明和函數(shù)表達(dá)式兩種方式創(chuàng)建函數(shù)的區(qū)別上面是這兩種方法創(chuàng)建函數(shù)的格式他倆的區(qū)別主要在對(duì)待對(duì)待這兩種方式的處理方式上，前者看作函數(shù)，后者為變量。

在JS中創(chuàng)建函數(shù)的方式有很多種，本文主要講解函數(shù)聲明(function declaration)和函數(shù)表達(dá)式(function expression)兩種方式創(chuàng)建函數(shù)的區(qū)別.

function add1(a, b) {
    return a + b;
}  //  function declaration

var add2 = function(a, b) {
    return a+b;
};  // function expression

上面是這兩種方法創(chuàng)建函數(shù)的格式
他倆的區(qū)別主要在對(duì)待JS對(duì)待這兩種方式的處理方式上，前者看作函數(shù)，后者為變量。JS在執(zhí)行代碼的時(shí)候，會(huì)有一個(gè)叫做Hoisting的操作，Hoisting的結(jié)果，把對(duì)那些變量和函數(shù)進(jìn)行預(yù)處理，把他們放在前面了，而變量只放過去變量名，函數(shù)卻都被放過去了。比如我們看下面代碼來理解一下。

console.log(a);
var a = "1";
console.log(a);   //  undefined  1;

而對(duì)于函數(shù)

    console.log(a());
    function a() {
        console.log("lol");
    }
    console.log(a());  // lol  lol;

從上面可以看出，雖然變量和函數(shù)都被Hoisting，但是處理的方式卻是不同的，把這個(gè)處理方式應(yīng)用到上面兩種函數(shù)聲明上面，第一種被看過函數(shù)，第二種被看作變量，那區(qū)別就很顯然了：第二種函數(shù)的聲明必須在函數(shù)調(diào)用的前面，第一個(gè)則無需這樣。我們?cè)賮砜醋詈笠粋€(gè)例子：

var result1 = add1(1, 1);
function add1(n1, n2) {
    return n1 + n2;
}

var result2 = add2(1,1)
var add2 = function(n1, n2) {
    return n1 + n2;
};
result1   // 2
result2  //  undefined

幫到你了嗎？

云服務(wù)器 GPU云服務(wù)器存儲(chǔ)過程和函數(shù)的區(qū)別函數(shù)的聲明c語言函數(shù)聲明聲明式函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84336.html

相關(guān)文章

JavaScript—— 函數(shù)聲明和函數(shù)表達(dá)式有什么不同嗎？

摘要：函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別函數(shù)聲明只能出現(xiàn)在程序或函數(shù)體內(nèi)。所以，在等語義為語句的代碼塊中存在函數(shù)聲明，由于函數(shù)提升特性，會(huì)破壞掉原本的語義。這篇談一下JS函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別及要注意的地方：函數(shù)聲明主要有兩種類型：函數(shù)聲明 function fn() {}; 函數(shù)表達(dá)式 var fn = function () {}; 這兩種函數(shù)創(chuàng)建方式...

FleyX 2019-08-20 16:36 評(píng)論0 收藏0
Javascirpt - 理解執(zhí)行上下文以及作用域鏈

摘要：本文章記錄本人在深入學(xué)習(xí)執(zhí)行上下文以及作用域鏈中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。每個(gè)執(zhí)行上下文都與一個(gè)作用域鏈關(guān)聯(lián)在一起。該對(duì)象的屬性的值是它被創(chuàng)建時(shí)的執(zhí)行上下文對(duì)應(yīng)的作用域鏈。本文章記錄本人在深入學(xué)習(xí)執(zhí)行上下文以及作用域鏈中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。執(zhí)行上下文概念執(zhí)行上下文，是ECMAScript規(guī)法...

e10101 2019-08-21 10:30 評(píng)論0 收藏0
React 單文件組件的解決方案 Omil 和 Omi Snippets

摘要：屬性我們還可以使用來書寫樣式，它會(huì)自動(dòng)幫我們編譯為格式內(nèi)容語法高亮建議使用配合該擴(kuò)展支持語法高亮擴(kuò)展開發(fā)項(xiàng)目，當(dāng)然你可以把文件當(dāng)作對(duì)待。 Omil 是什么？ Omil是一個(gè) webpack 的 loader，它允許你以一種名為單文件組件(SFCs)的格式撰寫 Omi 組件： ${this.data.title} export default class { test(){...

lowett 2019-08-26 10:10 評(píng)論0 收藏0
前端基礎(chǔ)入門四（JavaScript基礎(chǔ)）

摘要：學(xué)習(xí)目標(biāo)掌握編程的基本思維掌握編程的基本語法我們先來學(xué)習(xí)基礎(chǔ)，后續(xù)會(huì)講解高級(jí)。語句基本語法當(dāng)循環(huán)條件為時(shí)，執(zhí)行循環(huán)體，當(dāng)循環(huán)條件為時(shí)，結(jié)束循環(huán)?；A(chǔ)語法循環(huán)體循環(huán)條件代碼示例初始化變量循環(huán)體自增循環(huán)條件語句和一般用來解決無法確認(rèn)次數(shù)的循環(huán)。學(xué)習(xí)目標(biāo): 掌握編程的基本思維掌握編程的基本語法我們先來學(xué)習(xí)JavaScript基礎(chǔ)，后續(xù)會(huì)講解JavaScript高級(jí)。重點(diǎn)內(nèi)容變...

王軍 2019-08-30 15:55 評(píng)論0 收藏0
前端基礎(chǔ)入門四（JavaScript基礎(chǔ)）

摘要：學(xué)習(xí)目標(biāo)掌握編程的基本思維掌握編程的基本語法我們先來學(xué)習(xí)基礎(chǔ)，后續(xù)會(huì)講解高級(jí)。語句基本語法當(dāng)循環(huán)條件為時(shí)，執(zhí)行循環(huán)體，當(dāng)循環(huán)條件為時(shí)，結(jié)束循環(huán)?；A(chǔ)語法循環(huán)體循環(huán)條件代碼示例初始化變量循環(huán)體自增循環(huán)條件語句和一般用來解決無法確認(rèn)次數(shù)的循環(huán)。學(xué)習(xí)目標(biāo): 掌握編程的基本思維掌握編程的基本語法我們先來學(xué)習(xí)JavaScript基礎(chǔ)，后續(xù)會(huì)講解JavaScript高級(jí)。重點(diǎn)內(nèi)容變...

SnaiLiu 2019-08-23 14:50 評(píng)論0 收藏0