Javascript var functionName=function（）{}vs function functionName（）{}_Javascript_Function_Syntax_Idioms

Javascript var functionName=function（）{}vs function functionName（）{}

javascript function syntax

Javascript var functionName=function（）{}vs function functionName（）{},javascript,function,syntax,idioms,Javascript,Function,Syntax,Idioms,我最近开始维护其他人的JavaScript代码。我正在修复bug，添加特性，并试图整理代码，使其更加一致以前的开发人员使用了两种声明函数的方法，我无法确定这背后是否有原因这两种方式是： var functionOne = function() { // Some code }; 使用这两种不同方法的原因是什么？每种方法的优缺点是什么？有什么可以用一个方法完成而不能用另一个方法完成的吗？区别在于functionOne是一个函数表达式，因此只有在到达该行时才定义，而functionTw

我最近开始维护其他人的JavaScript代码。我正在修复bug，添加特性，并试图整理代码，使其更加一致

以前的开发人员使用了两种声明函数的方法，我无法确定这背后是否有原因

这两种方式是：

var functionOne = function() {
    // Some code
};

使用这两种不同方法的原因是什么？每种方法的优缺点是什么？有什么可以用一个方法完成而不能用另一个方法完成的吗？

区别在于

functionOne

是一个函数表达式，因此只有在到达该行时才定义，而

functionTwo

是一个函数声明，并且在执行其周围的函数或脚本时立即定义（到期日）

例如，函数表达式：

var xyz = function(){};

var abc = function() {};

var fn=function(){
  console.log("Hello");
}
fn();

//类型错误：functionOne不是函数
函数一（）；
var functionOne=函数（）{
log（“你好！”）；
}

首先我想更正Greg:

函数abc（）{}

也有作用域-名称

abc

在遇到此定义的作用域中定义。示例：

function xyz(){
  function abc(){};
  // abc is defined here...
}
// ...but not here

其次，可以将两种风格结合起来：

var xyz = function abc(){};

xyz

将像往常一样定义，

abc

在除InternetExplorer之外的所有浏览器中都未定义-不要依赖于它的定义。但它将在其主体内部定义：

var xyz = function abc(){
  // xyz is visible here
  // abc is visible here
}
// xyz is visible here
// abc is undefined here

如果要在所有浏览器上别名函数，请使用以下声明：

function abc(){};
var xyz = abc;

function abc(){}

function abc(){}

function fn(){
  console.log("Hello");
}
fn();

在这种情况下，

xyz

和

abc

都是同一对象的别名：

console.log(xyz === abc); // prints "true"

使用组合样式的一个引人注目的原因是函数对象的“name”属性（不受InternetExplorer的支持）

function abc(){}; console.log(abc.name); // prints "abc"

var abc = function(){};

abc = function(){};
它的名称是自动分配的。但是当你定义它时

var abc = function(){}; console.log(abc.name); // prints ""
它的名称为空-我们创建了一个匿名函数并将其分配给某个变量
使用组合样式的另一个很好的原因是使用短的内部名称来引用自身，同时为外部用户提供一个长的不冲突的名称：

// Assume really.long.external.scoped is {} really.long.external.scoped.name = function shortcut(n){ // Let it call itself recursively: shortcut(n - 1); // ... // Let it pass itself as a callback: someFunction(shortcut); // ... }
在上面的示例中，我们可以对外部名称执行相同的操作，但这样做太麻烦（而且速度较慢）
（引用自身的另一种方法是使用
参数.callee
，它仍然相对较长，在严格模式下不受支持。）
实际上，JavaScript对这两个语句的处理方式不同。这是一个函数声明：

function abc(){}; var xyz = abc;

function abc(){}

function abc(){}

function fn(){ console.log("Hello"); } fn();

abc
在当前范围内的任何地方都有定义：

// We can call it here abc(); // Works // Yet, it is defined down there. function abc(){} // We can call it again abc(); // Works
此外，它通过
返回
语句提升：

// We can call it here abc(); // Works return; function abc(){}
这是一个函数表达式：

var xyz = function(){};

var abc = function() {};

var fn=function(){ console.log("Hello"); } fn();

xyz
此处从分配点定义：

// We can't call it here xyz(); // UNDEFINED!!! // Now it is defined xyz = function(){} // We can call it here xyz(); // works
函数声明与函数表达式是格雷格所证明的差异的真正原因
有趣的事实：

var xyz = function abc(){}; console.log(xyz.name); // Prints "abc"
就个人而言，我更喜欢“函数表达式”声明，因为这样我可以控制可见性

function abc(){}; console.log(abc.name); // prints "abc"

var abc = function(){};

abc = function(){};
我知道我在本地定义了这个函数

function abc(){}; console.log(abc.name); // prints "abc"

var abc = function(){};

abc = function(){};
我知道我在全局范围内定义了它，但前提是我没有在作用域链中的任何位置定义
abc
。这种定义风格即使在
eval（）
中使用，也具有弹性

function abc(){};

取决于上下文，可能会让您猜测它的实际定义位置，尤其是在
eval（）的情况下
-答案是：它取决于浏览器。
在计算机科学术语中，我们讨论匿名函数和命名函数。我认为最重要的区别在于匿名函数不绑定到名称，因此命名为匿名函数。在JavaScript中，它是在运行时动态声明的第一类对象

有关匿名函数和lambda演算的更多信息，Wikipedia是一个良好的开端：。
就代码维护成本而言，命名函数更可取：

独立于声明它们的地方（但仍受范围限制）

更能抵抗条件初始化之类的错误（如果需要，您仍然可以重写）

通过将局部函数与作用域功能分开分配，代码的可读性会提高。通常在作用域中，先分配功能，然后声明局部函数

在调试器中，您将清楚地看到调用堆栈上的函数名，而不是“匿名/已评估”函数

我怀疑命名函数还有更多的优点。命名函数的优点是匿名函数的缺点
历史上，匿名函数出现的原因是JavaScript无法作为一种语言列出具有命名函数的成员：

{ member:function() { /* How do I make "this.member" a named function? */ } }

您在那里发布的两个代码片段在几乎所有情况下的行为都是相同的
但是，行为上的区别在于，对于第一个变量（
var functionOne=function（）{}
），只能在代码中的该点之后调用该函数
对于第二个变量（
function-functionTwo（）
），函数可用于在声明函数的位置上方运行的代码
这是因为在第一个变量中，函数在运行时分配给变量
foo
。在第二个变量中，函数在解析时分配给标识符
foo
更多技术信息

function Identifier_opt ( FormalParameterList_opt ) { FunctionBody | sequence of statements « return; Default undefined « return 'some data'; }

function globalAccess() { function globalAccess() { } ------------------- } globalAccess(); | | function globalAccess() { « Re-Defined / overridden. localAccess(); « Hoisted As « function localAccess() { function globalAccess() { | | } localAccess(); ------------------- localAccess(); « function accessed with in globalAccess() only. function localAccess() { } } globalAccess(); } localAccess(); « ReferenceError as the function is not defined

10; « literal (10); « Expression (10).toString() -> '10' var a; a = 10; « Expression var a.toString() -> '10' (function invoke() { « Expression Function console.log('Self Invoking'); (function () { }); }) () -> 'Self Invoking' var f; f = function (){ « Expression var Function console.log('var Function'); f () -> 'var Function' };
JavaScript有三种定义函数的方法

您的第一个代码片段显示了一个函数表达式。这涉及到使用“function”操作符创建一个函数-该操作符的结果可以存储在任何变量或对象属性中。通过这种方式，函数表达式非常强大。函数表达式通常称为“匿名函数”，因为它不必有名称

你的第二个例子是
function x() { console.log('x'); }

x(); // Works even though it's above the declaration function x() { console.log('x'); }

if (someCondition) { function foo() { // <===== HERE THERE } // <===== BE DRAGONS }

"use strict"; if (someCondition) { foo(); // Works just fine function foo() { } } console.log(typeof foo); // "undefined" (`foo` is not in scope here // because it's not in the same block)

var y = function () { console.log('y'); };

var z = function w() { console.log('zw') };

var z = function w() { console.log(typeof w); // "function" }; console.log(typeof w); // "undefined"

var obj = { value: 0, get f() { return this.value; }, set f(v) { this.value = v; } }; console.log(obj.f); // 0 console.log(typeof obj.f); // "number"

var a = [1, 2, 3]; var b = a.map(n => n * 2); console.log(b.join(", ")); // 2, 4, 6

var a = [1, 2, 3]; var b = a.map((n, i) => n * i); console.log(b.join(", ")); // 0, 2, 6

var a = [ {first: "Joe", last: "Bloggs"}, {first: "Albert", last: "Bloggs"}, {first: "Mary", last: "Albright"} ]; a = a.sort((a, b) => { var rv = a.last.localeCompare(b.last); if (rv === 0) { rv = a.first.localeCompare(b.first); } return rv; }); console.log(JSON.stringify(a));

var o = { foo() { } };

var o = { foo: function foo() { } };

class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } getFullName() { return this.firstName + " " + this.lastName; } }

function abc(){}

var abc = function() {};

//this will work abc(param); function abc(){} //this would fail abc(param); var abc = function() {}

functionTwo(); function functionTwo() { }

functionOne(); --------------- var functionOne; | is actually | functionOne(); var functionOne = function(){ | interpreted |--> }; | like | functionOne = function(){ --------------- };

functionTwo(); --------------- function functionTwo() { | is actually | }; function functionTwo() { | interpreted |--> } | like | functionTwo(); ---------------

[].forEach(function iterator() {});

'use strict'; var a = function () { throw new Error(); }, b = function b() { throw new Error(); }, c = function d() { throw new Error(); }, e = { f: a, g: b, h: c, i: function () { throw new Error(); }, j: function j() { throw new Error(); }, k: function l() { throw new Error(); } }, m = (function () { return function () { throw new Error(); }; }()), n = (function () { return function n() { throw new Error(); }; }()), o = (function () { return function p() { throw new Error(); }; }()); console.log([a, b, c].concat(Object.keys(e).reduce(function (values, key) { return values.concat(e[key]); }, [])).concat([m, n, o]).reduce(function (logs, func) { try { func(); } catch (error) { return logs.concat('func.name: ' + func.name + '\n' + 'Trace:\n' + error.stack); // Need to manually log the error object in Nitro. } }, []).join('\n\n'));

func.name: Trace: Error at a (http://localhost:8000/test.js:4:11) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: b Trace: Error at b (http://localhost:8000/test.js:7:15) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: d Trace: Error at d (http://localhost:8000/test.js:10:15) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: Trace: Error at a (http://localhost:8000/test.js:4:11) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: b Trace: Error at b (http://localhost:8000/test.js:7:15) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: d Trace: Error at d (http://localhost:8000/test.js:10:15) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: Trace: Error at e.i (http://localhost:8000/test.js:17:19) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: j Trace: Error at j (http://localhost:8000/test.js:20:19) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: l Trace: Error at l (http://localhost:8000/test.js:23:19) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: Trace: Error at http://localhost:8000/test.js:28:19 at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: n Trace: Error at n (http://localhost:8000/test.js:33:19) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 func.name: p Trace: Error at p (http://localhost:8000/test.js:38:19) at http://localhost:8000/test.js:47:9 at Array.reduce (native) at http://localhost:8000/test.js:44:27 test.js:42

func.name: Trace: a@http://localhost:8000/test.js:4:5 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: b Trace: b@http://localhost:8000/test.js:7:9 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: d Trace: d@http://localhost:8000/test.js:10:9 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: Trace: a@http://localhost:8000/test.js:4:5 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: b Trace: b@http://localhost:8000/test.js:7:9 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: d Trace: d@http://localhost:8000/test.js:10:9 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: Trace: e.i@http://localhost:8000/test.js:17:13 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: j Trace: j@http://localhost:8000/test.js:20:13 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: l Trace: l@http://localhost:8000/test.js:23:13 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: Trace: m</<@http://localhost:8000/test.js:28:13 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: n Trace: n@http://localhost:8000/test.js:33:13 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1 func.name: p Trace: p@http://localhost:8000/test.js:38:13 @http://localhost:8000/test.js:47:9 @http://localhost:8000/test.js:54:1

func.name: undefined Trace: Error at a (http://localhost:8000/test.js:4:5) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at b (http://localhost:8000/test.js:7:9) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at d (http://localhost:8000/test.js:10:9) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at a (http://localhost:8000/test.js:4:5) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at b (http://localhost:8000/test.js:7:9) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at d (http://localhost:8000/test.js:10:9) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at e.i (http://localhost:8000/test.js:17:13) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at j (http://localhost:8000/test.js:20:13) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at l (http://localhost:8000/test.js:23:13) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at Anonymous function (http://localhost:8000/test.js:28:13) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at n (http://localhost:8000/test.js:33:13) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1) func.name: undefined Trace: Error at p (http://localhost:8000/test.js:38:13) at Anonymous function (http://localhost:8000/test.js:47:9) at Global code (http://localhost:8000/test.js:42:1)

func.name: Trace: a@http://localhost:8000/test.js:4:22 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: b Trace: b@http://localhost:8000/test.js:7:26 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: d Trace: d@http://localhost:8000/test.js:10:26 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: Trace: a@http://localhost:8000/test.js:4:22 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: b Trace: b@http://localhost:8000/test.js:7:26 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: d Trace: d@http://localhost:8000/test.js:10:26 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: Trace: i@http://localhost:8000/test.js:17:30 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: j Trace: j@http://localhost:8000/test.js:20:30 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: l Trace: l@http://localhost:8000/test.js:23:30 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: Trace: http://localhost:8000/test.js:28:30 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: n Trace: n@http://localhost:8000/test.js:33:30 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33 func.name: p Trace: p@http://localhost:8000/test.js:38:30 http://localhost:8000/test.js:47:13 reduce@[native code] global code@http://localhost:8000/test.js:44:33

var foo = function foo() {};

function foo() {};

function foo() {};

var foo = function foo() {};

var foo = undefined; foo = function foo() {};

function outerFunction() { function foo() { return 1; } return foo(); function foo() { return 2; } } alert(outerFunction()); // Displays 2

function foo() { // The first function declaration is moved to top return 1; } function foo() { // The second function declaration is moved to top return 2; } function outerFunction() { return foo(); } alert(outerFunction()); //So executing from top to bottom, //the last foo() returns 2 which gets displayed

function outerFunction() { var foo = function() { return 1; } return foo(); var foo = function() { return 2; } } alert(outerFunction()); // Displays 1

function outerFunction() { var foo = undefined; var foo = undefined; foo = function() { return 1; }; return foo (); foo = function() { // This function expression is not reachable return 2; }; } alert(outerFunction()); // Displays 1

if (test) { function x() { doSomething(); } }

var today = function today() {return new Date()}

functionOne(); var functionOne = function() { // Some code };

functionOne(); function functionOne() { // Some code }

global_Page = 10; var global_Page; « undefined « Integer literal, Number Type. ------------------- global_Page = 10; « Number global_Page = 'Yash'; | Interpreted | global_Page = 'Yash'; « String « String literal, String Type. « AS « global_Page = true; « Boolean var global_Page = true; | | global_Page = function (){ « function « Boolean Type ------------------- var local_functionblock; « undefined global_Page = function (){ local_functionblock = 777;« Number var local_functionblock = 777; }; // Assigning function as a data. };

function Identifier_opt ( FormalParameterList_opt ) { FunctionBody | sequence of statements « return; Default undefined « return 'some data'; }

Scope with respect to function-block global. Scope with respect to page undefined | not available.

function globalAccess() { function globalAccess() { } ------------------- } globalAccess(); | | function globalAccess() { « Re-Defined / overridden. localAccess(); « Hoisted As « function localAccess() { function globalAccess() { | | } localAccess(); ------------------- localAccess(); « function accessed with in globalAccess() only. function localAccess() { } } globalAccess(); } localAccess(); « ReferenceError as the function is not defined

10; « literal (10); « Expression (10).toString() -> '10' var a; a = 10; « Expression var a.toString() -> '10' (function invoke() { « Expression Function console.log('Self Invoking'); (function () { }); }) () -> 'Self Invoking' var f; f = function (){ « Expression var Function console.log('var Function'); f () -> 'var Function' };

(function selfExecuting(){ console.log('IIFE - Immediately-Invoked Function Expression'); }()); var anonymous = function (){ console.log('anonymous function Expression'); }; var namedExpression = function for_InternalUSE(fact){ if(fact === 1){ return 1; } var localExpression = function(){ console.log('Local to the parent Function Scope'); }; globalExpression = function(){ console.log('creates a new global variable, then assigned this function.'); }; //return; //undefined. return fact * for_InternalUSE( fact - 1); }; namedExpression(); globalExpression();

var anonymous; var namedExpression; var globalExpression; anonymous = function (){ console.log('anonymous function Expression'); }; namedExpression = function for_InternalUSE(fact){ var localExpression; if(fact === 1){ return 1; } localExpression = function(){ console.log('Local to the parent Function Scope'); }; globalExpression = function(){ console.log('creates a new global variable, then assigned this function.'); }; return fact * for_InternalUSE( fact - 1); // DEFAULT UNDEFINED. }; namedExpression(10); globalExpression();

function Shape(id) { // Function Declaration this.id = id; }; // Adding a prototyped method to a function. Shape.prototype.getID = function () { return this.id; }; Shape.prototype.setID = function ( id ) { this.id = id; }; var expFn = Shape; // Function Expression var funObj = new Shape( ); // Function Object funObj.hasOwnProperty('prototype'); // false funObj.setID( 10 ); console.log( funObj.getID() ); // 10

const fn = (item) => { return item & 1 ? 'Odd' : 'Even'; }; console.log( fn(2) ); // Even console.log( fn(3) ); // Odd

var func = new Function("x", "y", "return x*y;"); function secondFunction(){ var result; result = func(10,20); console.log ( result ); } secondFunction()

function fn(){ console.log("Hello"); } fn();

var fn=function(){ console.log("Hello"); } fn();

var functionOne = function() { // Some code };

function functionTwo() { // Some code }