return语句后的函数声明全局变量不会被覆盖 [英] function declaration after return statement global variable is not overwritten

问题描述

我有一个如下的Javascript代码， http://jsfiddle.net/ramchiranjeevi/63uML/

I have a Javascript code as below, http://jsfiddle.net/ramchiranjeevi/63uML/

var foo = 1;
function bar() {
    foo = 10;
    return;
    function foo() {}   
}

bar();
console.log(foo);  // returns 1

执行代码时，调用bar（）函数，并且全局变量为被值10覆盖，则日志应打印为10而不是值1。

When the code executed, the bar() function is called and the global variable is overwritten with value 10, then the log should be printed as 10 instead it is printed as value 1.

推荐答案

由于一个概念函数声明被称为提升，被移动到作用域的顶部。

Because of a concept called "hoisting", function declarations are "moved" to the top of the scope.

在这种情况下，将新建一个 foo 上下文是在本地范围内创建的。 10 的分配以后会影响本地化作用域，而不是父作用域中的变量。

When that happens, a new foo context is created within the local scope. The assignment of 10 later affects the localized scope and not the variable from the parent scope.

您可以看到如果使用 var 关键字声明一个名为 foo 的块局部变量，则行为相同：

You can see the same behavior if you declare a block-local variable called foo with the var keyword:

var foo = 1;
function bar() {
    var foo = 10; // this is, functionally,
    return;       // the same as declaring a function in this scope named foo
}

bar();
console.log(foo); // output: 1

http://jsfiddle.net/GRMule/8F5K3/

另一个示例，将其分解

var foo = 1;
function bar() {
    console.log(foo); // because of hoisting, you will get "function" as output
    foo = 10;         // you just over-wrote the block-local foo, the function
    return;
    function foo () {} // this is "hoisted" to the top of this scope, 
                       // creating a new "foo" context
}

您可以使用声明函数的 var 方法来阻止它起吊，但是您通常会避免像这样重复使用名称，以保持代码的可维护性：

You can use the var method of declaring functions to stop it from hoisting, but you would generally avoid re-using names like this instead, to keep your code maintainable:

var foo = 1;
function bar() {
    console.log(foo); // undefined
    foo = 10;
    return;
    var foo = function () {};
}
bar();
console.log(foo); // 1

http://jsfiddle.net/znrG2/

...但是如您所见，一旦您使用<范围块中的code> var 字，该本地上下文的存在（如果不是该值）被强加，并且父范围中具有相同名称的任何变量都不会

... but as you can see, once you use the var word in a scope block, the existence of that local context is hoisted, if not the value, and any variable with the same name from the parent scope will not be accessible or affected in the current scope.

类似地，使用 this 在范围中声明的函数和变量，如在 this.foo = function（）{}; 请勿葫芦中： http://jsfiddle.net/8F5K3/3/

Similarly, functions and variables declared in a scope using this, as in this.foo = function () {}; do not hoist: http://jsfiddle.net/8F5K3/3/

最重要的是，函数或变量声明使用此不会覆盖父作用域的变量上下文。如果您绝对需要重用名称 foo，则可以使用该事实来避免使用该语言的功能：

Most importantly, though, functions or variables declares using this don't overwrite variable contexts from the parent scope. You can use that fact to avoid this functionality in the language, if you absolutely need to reuse the name "foo":

var foo = 1;
function bar() {
    console.log(foo); // 1
    foo = 10;
    return;
    this.foo = function () {};
}
bar();
console.log(foo); // 10

http://jsfiddle.net/znrG2/1/

相关阅读

• 解释JavaScript中的函数和变量提升- http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/

MDN上的
• 范围备忘单- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Scope_Cheatsheet


• 功能和功能范围在MDN上- https://developer.mozilla.org/zh- US / docs / Web / JavaScript / Reference / Functions_and_function_scope

• Explaining function and variable hoisting in JavaScript - http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/
• Scope Cheatsheet on MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet
• Functions and function scope on MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope

这篇关于return语句后的函数声明全局变量不会被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！