Javascript var functionName=function（）{}vs function functionName（）{}
我最近开始维护其他人的JavaScript代码。我正在修复bug，添加特性，并试图整理代码，使其更加一致 以前的开发人员使用了两种声明函数的方法，我无法确定这背后是否有原因 这两种方式是：Javascript var functionName=function（）{}vs function functionName（）{},javascript,function,syntax,idioms,Javascript,Function,Syntax,Idioms,我最近开始维护其他人的JavaScript代码。我正在修复bug，添加特性，并试图整理代码，使其更加一致 以前的开发人员使用了两种声明函数的方法，我无法确定这背后是否有原因 这两种方式是： var functionOne = function() { // Some code }; 使用这两种不同方法的原因是什么？每种方法的优缺点是什么？有什么可以用一个方法完成而不能用另一个方法完成的吗？不同之处在于，functionOne是一个函数表达式，因此只有在到达该行时才定义，而functio
var functionOne = function() {
// Some code
};
var xyz = function(){};
var abc = function() {};
var fn=function(){
console.log("Hello");
}
fn();
}; 首先我想更正Greg：函数abc{}也是作用域-名称abc是在遇到此定义的作用域中定义的。例如：
function xyz(){
function abc(){};
// abc is defined here...
}
// ...but not here
var xyz = function abc(){};
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();
console.log(xyz === abc); // prints "true"
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);
// ...
}
function abc(){};
var xyz = abc;
function abc(){}
function abc(){}
function fn(){
console.log("Hello");
}
fn();
// 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();
// 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(){};
function abc(){};
取决于上下文，可能会让您猜测它的实际定义，尤其是在eval的情况下-答案是：它取决于浏览器。在计算机科学术语中，我们谈论匿名函数和命名函数。我认为最重要的区别在于匿名函数不绑定到名称，因此命名为匿名函数。在JavaScript中，它是在运行时动态声明的第一类对象
有关匿名函数和lambda演算的更多信息，Wikipedia是一个良好的开端：。就代码维护成本而言，命名函数更可取： 独立于声明地点，但仍受范围限制。 更能抵抗条件初始化之类的错误，如果需要，您仍然可以重写。 通过将本地函数与作用域功能分开分配，代码变得更可读。通常在作用域中，先是功能，然后是本地函数的声明。 在调试器中，您将清楚地看到调用堆栈上的函数名，而不是匿名/求值函数。 我怀疑命名函数还有更多的优点。命名函数的优点是匿名函数的缺点 历史上，匿名函数出现的原因是JavaScript无法作为一种语言列出具有命名函数的成员：
{
member:function() { /* How do I make "this.member" a named function? */
}
}
您在那里发布的两个代码片段在几乎所有情况下的行为都是相同的 然而，行为上的区别在于，对于第一个变量var functionOne=function{}，只能在代码中该点之后调用该函数 对于第二个变量函数functionTwo，该函数可用于在声明该函数的位置上运行的代码 这是因为对于第一个变量，functio n在运行时分配给变量foo。在第二种情况下，在解析时将函数分配给该标识符foo 更多技术信息 JavaScript有三种定义函数的方法 您的第一个代码段显示了一个函数表达式。这涉及到使用函数操作符创建函数-该操作符的结果可以存储在任何变量或对象属性中。通过这种方式，函数表达式非常强大。函数表达式通常称为匿名函数，因为它不必有名称， 第二个示例是函数声明。这将使用function语句创建函数。该函数在解析时可用，可以在该范围内的任何位置调用。以后仍可以将其存储在变量或对象属性中。 定义函数的第三种方法是函数构造函数，这在您的原始帖子中没有显示。不建议使用它，因为它的工作方式与eval相同，eval也有它的问题。
说到全局上下文，最后的var语句和FunctionDeclaration都会在全局对象上创建一个不可删除的属性，但是两者的值都可以被覆盖 这两种方法之间的细微差别在于，当流程在实际代码执行之前运行时，所有用var声明的标识符都将用undefined初始化，而FunctionDeclaration使用的标识符将从那时起可用，例如：
alert(typeof foo); // 'function', it's already available
alert(typeof bar); // 'undefined'
function foo () {}
var bar = function () {};
alert(typeof bar); // 'function'
function test () {}
test = null;
注意：此答案已从中合并，其中OP的主要疑问和误解是无法覆盖使用FunctionDeclaration声明的标识符，但事实并非如此。一个重要原因是添加一个且仅一个变量作为名称空间的根
var MyNamespace = {}
MyNamespace.foo= function() {
}
另请参见其他评论者已经涵盖了上述两个变体的语义差异。我想指出一个风格上的差异：只有赋值变量可以设置另一个对象的属性 我经常使用如下模式构建JavaScript模块：
(function(){
var exports = {};
function privateUtil() {
...
}
exports.publicUtil = function() {
...
};
return exports;
})();
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
}
var o = {
foo() {
}
};
functionOne(); --------------- var functionOne;
| is actually | functionOne();
var functionOne = function(){ | interpreted |-->
}; | like | functionOne = function(){
--------------- };
其他答案中没有提到的另一个区别是，如果您使用匿名函数
var functionOne = function() {
// Some code
};
var one = new functionOne();
可以用两个.constructor.name作为字符串检索构造函数的名称。我在代码中使用变量方法有一个非常具体的原因，上面已经以抽象的方式介绍了变量方法的原理，但是一个示例可能会帮助像我这样的JavaScript专业知识有限的人 我有代码，我需要运行160个独立设计的品牌。大部分代码都在共享文件中，但品牌特定的内容在单独的文件中，每个品牌对应一个文件 有些品牌需要特定的功能，有些则不需要。有时我不得不添加新的功能来做新的品牌特定的事情。我很乐意更改共享代码，但我不想更改所有160组品牌文件 通过使用变量语法，我可以将变量声明为sh中的函数指针 ared代码，或者分配一个平凡的存根函数，或者设置为null 需要特定函数实现的一两个品牌可以定义其函数版本，并根据需要将其分配给变量，其余品牌则不做任何操作。我可以在共享代码中执行空函数之前测试它
从上面人们的评论中，我认为重新定义一个静态函数也是可能的，但我认为变量的解决方案是好的和清晰的。第一个函数doSomethingx应该是对象符号的一部分 第二个变量var doSomething=functionx{alertx；}只是创建一个匿名函数并将其分配给变量doSomething。因此doSomething将调用该函数
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
function foo() {
return 3;
}
// Anonymous function expression
var a = function() {
return 3;
}
// Named function expression
var a = function foo() {
return 3;
}
// Self-invoking function expression
(function foo() {
alert("hello!");
})();
一旦绑定建立，分配给变量的函数声明和函数表达式的行为相同 然而，函数对象与其变量实际关联的方式和时间存在差异。这种差异是由于JavaScript中称为变量提升的机制造成的 基本上，所有函数声明和变量声明都被提升到声明所在函数的顶部，这就是为什么我们说JavaScript具有函数作用域 悬挂功能声明时，功能体如下 因此，当对函数体求值时，变量将立即 必须绑定到函数对象 当挂起变量声明时，初始化不起作用 跟随，但被落在后面。变量初始化为 在函数体的开头未定义，并且将被分配 位于代码中原始位置的值。实际上，在声明同名变量的每个位置，都会给它赋值 提升顺序也很重要：函数声明优先于具有相同名称的变量声明，最后一个函数声明优先于先前具有相同名称的函数声明 一些例子
var foo = 1;
function bar() {
if (!foo) {
var foo = 10 }
return foo; }
bar() // 10
function f() {
return a;
function a() {return 1};
var a = 4;
function a() {return 2}}
f()() // 2
function f() {
return a;
var a = 4;
function a() {return 1};
function a() {return 2}}
f()() // 2
function f() {
var a = 4;
function a() {return 1};
function a() {return 2};
return a; }
f() // 4
在这里，首先提升函数声明，声明并初始化变量a。接下来，这个变量被赋值为10。换句话说：赋值不会赋值给外部变量a。当您需要避免覆盖函数以前的定义时，说明何时首选第一种方法而不是第二种方法 与 ，myfunction的此定义将覆盖以前的任何定义，因为它将在解析时完成 当
仅当满足条件时，才正确定义myfunction。如果要使用这些函数创建对象，您将获得：
var objectOne = new functionOne();
console.log(objectOne.__proto__); // prints "Object {}" because constructor is an anonymous function
var objectTwo = new functionTwo();
console.log(objectTwo.__proto__); // prints "functionTwo {}" because constructor is a named function
下面是创建函数的标准表单的概述：最初是为另一个问题编写的，但在转移到规范问题之后进行了修改 条款： ES5:，2009 ES2015：也称为ES6 快速列表： 函数声明 匿名函数表达式，尽管有术语，但有时创建具有名称的函数 命名函数表达式 访问器函数初始值设定项ES5+ 箭头函数表达式ES2015+，与匿名函数表达式一样，它不涉及显式名称，但可以创建具有名称的函数 对象初始值设定项ES2015中的方法声明+ ES2015类中的构造函数和方法声明+ 函数声明 第一种形式是函数声明，如下所示：
(function(){
var exports = {};
function privateUtil() {
...
}
exports.publicUtil = function() {
...
};
return exports;
})();
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
}
var o = {
foo() {
}
};
functionOne(); --------------- var functionOne;
| is actually | functionOne();
var functionOne = function(){ | interpreted |-->
}; | like | functionOne = function(){
--------------- };
(function(){
var exports = {};
function privateUtil() {
...
}
exports.publicUtil = function() {
...
};
return exports;
})();
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
}
var o = {
foo() {
}
};
functionOne(); --------------- var functionOne;
| is actually | functionOne();
var functionOne = function(){ | interpreted |-->
}; | like | functionOne = function(){
--------------- };
(function(){
var exports = {};
function privateUtil() {
...
}
exports.publicUtil = function() {
...
};
return exports;
})();
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
}
var o = {
foo() {
}
};
functionOne(); --------------- var functionOne;
| is actually | functionOne();
var functionOne = function(){ | interpreted |-->
}; | like | functionOne = function(){
--------------- };
var xyz = function(){};
var abc = function() {};
var fn=function(){
console.log("Hello");
}
fn();
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
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
{
member:function() { /* How do I make "this.member" a named function? */
}
}
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));
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
(function(){
var exports = {};
function privateUtil() {
...
}
exports.publicUtil = function() {
...
};
return exports;
})();
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
}
var o = {
foo() {
}
};
functionOne(); --------------- var functionOne;
| is actually | functionOne();
var functionOne = function(){ | interpreted |-->
}; | like | functionOne = function(){
--------------- };
var o = {
foo: function foo() {
}
};
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName() {
return this.firstName + " " + this.lastName;
}
}
上面有两个函数声明：一个用于构造函数，它获取名称Person，另一个用于getFullName，它是分配给Person.prototype的函数。第一个示例是函数声明：
function abc(){};
var xyz = abc;
function abc(){}
function abc(){}
function fn(){
console.log("Hello");
}
fn();
var xyz = function(){};
var abc = function() {};
var fn=function(){
console.log("Hello");
}
fn();
//this will work
abc(param);
function abc(){}
//this would fail
abc(param);
var abc = function() {}
(function(){
var exports = {};
function privateUtil() {
...
}
exports.publicUtil = function() {
...
};
return exports;
})();
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
}
var o = {
foo() {
}
};
functionOne(); --------------- var functionOne;
| is actually | functionOne();
var functionOne = function(){ | interpreted |-->
}; | like | functionOne = function(){
--------------- };
根据stack traces参数中显示的命名函数，现代JavaScript引擎实际上非常能够表示匿名函数 在撰写本文时，V8、SpiderMonkey、Chakra和Nitro总是按名称引用命名函数。如果匿名函数有标识符，它们几乎总是通过其标识符引用匿名函数 SpiderMonkey可以找出从另一个函数返回的匿名函数的名称。其他人不行 如果您真的非常希望迭代器和成功回调显示在跟踪中，您也可以将它们命名为
[].forEach(function iterator() {});
我添加我自己的答案，只是因为其他人已经完全涵盖了提升部分 很长一段时间以来，我一直想知道哪种方式更好，多亏了现在我知道了：
函数声明更快，这才是web开发中真正重要的，对吧 这只是声明函数的两种可能的方法，第二种方法是，您可以在声明之前使用函数。已经足够好了，但是我仍然想添加一些我刚才在观看视频时学到的东西 函数表达式：
var xyz = function(){};
var abc = function() {};
var fn=function(){
console.log("Hello");
}
fn();
// We can call it here
abc(); // Works
return;
function abc(){}
var foo = function foo() {};
var foo = undefined;
foo = function foo() {};
我在下面列出了不同之处： 函数声明可以放在代码中的任何位置。即使在定义出现在代码中之前调用它，它也会在函数声明提交到内存时执行，或者在页面中的任何其他代码开始执行之前以某种方式被提升
functionOne();
function functionOne() {
// Some code
}
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不是一个函数
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
functionOne();
function functionOne() {
// Some code
}
Scope with respect to function-block global.
Scope with respect to page undefined | not available.
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
var func = new Function("x", "y", "return x*y;");
function secondFunction(){
var result;
result = func(10,20);
console.log ( result );
}
secondFunction()
在JavaScript中，有两种创建函数的方法：
{
member:function() { /* How do I make "this.member" a named function? */
}
}
function abc(){};
var xyz = abc;
function abc(){}
function abc(){}
function fn(){
console.log("Hello");
}
fn();
var xyz = function(){};
var abc = function() {};
var fn=function(){
console.log("Hello");
}
fn();
参考：它们非常相似，但有一些小的区别，第一个是分配给匿名函数声明的变量，第二个是在JavaScriptAnonymous函数声明中创建函数的常规方法，两者都有用法，优缺点： 一,。函数表达式 函数表达式将函数定义为更大函数的一部分 表达式语法通常是变量赋值。功能 通过函数定义表达式可以命名或匿名。作用 表达式不能以“function”开头，因此使用括号 围绕下面的自调用示例 将变量分配给函数，意味着没有提升，正如我们所知，JavaScript中的函数可以提升，意味着可以在声明之前调用它们，而变量需要在访问它们之前声明，因此在这种情况下，意味着我们不能在声明函数之前访问函数，这也可能是一种编写函数的方法，对于返回另一个函数的函数，这种声明可能有意义，同样在ECMA6&上面，您可以将其分配给一个箭头函数，该函数可用于调用匿名函数，另外，这种声明方法是在JavaScript中创建构造函数的更好方法 二,。函数声明 函数声明定义了一个命名函数变量，而不包含 需要变量赋值。函数声明以如下形式出现 独立构造，不能嵌套在非功能块中。 将它们视为变量声明的兄弟是很有帮助的。 正如变量声明必须以“var”开头一样，函数 声明必须以“函数”开头
// Anonymous function expression
var a = function() {
return 3;
}
// Named function expression
var a = function foo() {
return 3;
}
// Self-invoking function expression
(function foo() {
alert("hello!");
})();
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
虽然这是正确的，但这一点与所问的问题有什么关系？结果差异太小，不能视为差异。如果您将测试运行100次，您将得到100个结果。@RonnySherer，您熟悉jsperf吗？测试是在运行超过1000万次之后进行的！每次测量都有干扰。计算机可能会发现它不处于相同的状态，并且这不是计算机上运行的唯一进程。当差异如此之小时，就意味着你不能依赖它，它实际上是一样的。试着一个接一个地运行sane测试10次，你会发现数字是不同的。非常接近，但不尽相同。@RonnySherer js perf创建了一个虚拟环境，特别是用来解释具有这些微小差异的进程。它没有在我的计算机上运行。它只运行那个。当事情这么小的时候，也许有人不该管它。但无论如何，我都会正确计算并报告。如果有人想在一个循环中使用它，进行数十亿次迭代，那么他应该选择性能最好的函数。虚拟环境位于一个服务器上，它可能会做其他事情。我做了一些测试。结果永远不会完全相同。函数定义在代码进入周围块时执行，而不是在代码进入封闭函数时执行。我不知道事情是否总是这样，但如果一个块使用let或const来定义一个被其中的函数关闭的变量，这是不可避免的，一致地应用该规则可能比仅在不可避免的情况下应用该规则要好。由于提升而产生的句子可能会给人一种错误的印象，即只有命名的函数被提升。事实上，var functionOne和functionTwo都在某种程度上被提升——只是functionOne被设置为undefined，你可以称之为半提升，变量总是被提升到那个程度，而functionTwo是完全提升的，因为它是定义和声明的。调用未定义的内容当然会抛出一个类型错误。感谢Greg和@Ben_Aston解释了这一区别。但是，你们中的一位是否也可以按照用户的要求给出一些“优点”和“缺点”的说明呢？请看，不同的resultsvar abc=function{}；console.logabc.name；//abc//从2021年开始，JS运行时明显变得更加智能。然而，总结一下：var abc==>function{}；console.logabc.name；//没有什么