首頁(yè) 猿問(wèn) var functionName...

var functionName = function（）{} vs function

JavaScript JQuery Vue.js

德瑪西亞99 2019-05-20 17:20:59

我最近開(kāi)始維護(hù)其他人的JavaScript代碼。我正在修復(fù)錯(cuò)誤，添加功能，并試圖整理代碼并使其更加一致。以前的開(kāi)發(fā)人員使用兩種聲明函數(shù)的方法，如果背后有原因，我就無(wú)法解決。這兩種方式是：var functionOne = function() { // Some code};function functionTwo() { // Some code}使用這兩種不同方法的原因是什么？每種方法的優(yōu)缺點(diǎn)是什么？有一種方法可以通過(guò)一種方法完成，而另一種方法無(wú)法完成嗎？

查看完整描述

5 回答

嚕嚕噠

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊

不同之處在于它functionOne是一個(gè)函數(shù)表達(dá)式，因此只在到達(dá)該行時(shí)定義，而是functionTwo一個(gè)函數(shù)聲明，并且只要執(zhí)行其周?chē)暮瘮?shù)或腳本（由于提升）就會(huì)定義。

例如，一個(gè)函數(shù)表達(dá)式：

// TypeError: functionOne is not a function

functionOne();

var functionOne = function() {

console.log("Hello!");

};

并且，一個(gè)函數(shù)聲明：

// Outputs: "Hello!"

functionTwo();

function functionTwo() {

console.log("Hello!");

}

這也意味著您無(wú)法使用函數(shù)聲明有條件地定義函數(shù)：

if (test) {

// Error or misbehavior

function functionThree() { doSomething(); }

}

上面的實(shí)際定義functionThree與... test的值無(wú)關(guān) - 除非use strict有效，否則它只會(huì)引發(fā)錯(cuò)誤。

反對(duì) 回復(fù) 2019-05-20

慕無(wú)忌1623718

TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊

說(shuō)到全局上下文，var語(yǔ)句和FunctionDeclaration最后都將在全局對(duì)象上創(chuàng)建一個(gè)不可刪除的屬性，但兩者的值都可以被覆蓋。

兩種方式之間的細(xì)微差別在于，當(dāng)變量實(shí)例化過(guò)程運(yùn)行時(shí)（在實(shí)際代碼執(zhí)行之前），所有聲明的標(biāo)識(shí)符var都將被初始化undefined，并且FunctionDeclaration自那時(shí)起使用的標(biāo)識(shí)符將可用，例如：

alert(typeof foo); // 'function', it's already available

alert(typeof bar); // 'undefined'

function foo () {}

var bar = function () {};

alert(typeof bar); // 'function'

分配bar FunctionExpression發(fā)生在運(yùn)行時(shí)間。

由a創(chuàng)建的全局屬性FunctionDeclaration可以像變量值一樣被覆蓋而沒(méi)有任何問(wèn)題，例如：

function test () {}

test = null;

您的兩個(gè)示例之間的另一個(gè)明顯區(qū)別是第一個(gè)函數(shù)沒(méi)有名稱(chēng)，但第二個(gè)函數(shù)有它，這在調(diào)試（即檢查調(diào)用堆棧）時(shí)非常有用。

關(guān)于您編輯的第一個(gè)示例（foo = function() { alert('hello!'); };），這是一個(gè)未聲明的作業(yè)，我強(qiáng)烈建議您始終使用該var關(guān)鍵字。

使用賦值，如果沒(méi)有var語(yǔ)句，如果在作用域鏈中找不到引用的標(biāo)識(shí)符，它將成為全局對(duì)象的可刪除屬性。

此外，未聲明的作業(yè)ReferenceError在嚴(yán)格模式下投入ECMAScript 5 。

必讀：

命名函數(shù)表達(dá)式揭秘

反對(duì) 回復(fù) 2019-05-20

慕的地8271018

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

您在那里發(fā)布的兩個(gè)代碼段幾乎在所有目的下都會(huì)以相同的方式運(yùn)行。

但是，行為的差異在于使用第一個(gè)variant（var functionOne = function() {}），該函數(shù)只能在代碼中的該點(diǎn)之后調(diào)用。

使用第二個(gè)variant（function functionTwo()），該函數(shù)可用于在聲明函數(shù)的上方運(yùn)行的代碼。

這是因?yàn)閷?duì)于第一個(gè)變體，函數(shù)foo在運(yùn)行時(shí)分配給變量。在第二個(gè)中，foo在解析時(shí)將該函數(shù)分配給該標(biāo)識(shí)符。

更多技術(shù)信息

JavaScript有三種定義函數(shù)的方法。

您的第一個(gè)代碼段顯示了一個(gè)函數(shù)表達(dá)式。這涉及使用“function”運(yùn)算符來(lái)創(chuàng)建函數(shù) - 該運(yùn)算符的結(jié)果可以存儲(chǔ)在任何變量或?qū)ο髮傩灾?。函?shù)表達(dá)式就是這樣強(qiáng)大的。函數(shù)表達(dá)式通常稱(chēng)為“匿名函數(shù)”，因?yàn)樗槐鼐哂忻Q(chēng)，
你的第二個(gè)例子是函數(shù)聲明。這使用“function”語(yǔ)句來(lái)創(chuàng)建函數(shù)。該函數(shù)在分析時(shí)可用，并且可以在該范圍內(nèi)的任何位置調(diào)用。您以后仍可以將其存儲(chǔ)在變量或?qū)ο髮傩灾小?/p>
定義函數(shù)的第三種方法是“Function（）”構(gòu)造函數(shù)，它在原始帖子中沒(méi)有顯示。不建議使用它，因?yàn)樗墓ぷ鞣绞脚ceval()存在問(wèn)題的方式相同。