background
ES5 because of the absence of block-level scope, so if ES5 provisions can not be declared such a block function, but for compatibility with all major browsers and is not strictly comply with this provision.
ES6 when the block-level scope is introduced, the function specified in the block-level statement is equivalent scope to let declare variables using the same. But also because the browser compatibility issues, the standard explanation achieve browser may not fully comply with their actions, as follows:
- It allows block-level domain acting function declaration.
- Function declaration is similar to var, that is, will be promoted to head of global scope or function scope.
- Meanwhile, the function declaration will be promoted to head of block-level scope is located.
if (false) {
function a() {}
}
console.log(a);
The above output undefinedindicating that the two above, is a block level allows scope function declaration, a statement is similar to the block-level scope var.
if (true) {
console.log(a);
function a() {}
}
Output function a, which indicates that the Article III: function declaration will be promoted to the head where the block-level scope.
Questions and information
Existing theory above is not enough to explain the following phenomenon:
var a;
{
a = 5;
function a() {}
a = 0;
console.log(a);
}
console.log(a);
chrome latest version of the output is : first console output is the 0second console output is 5.
Obtain the above code based on several unreasonable phenomenon known under the theory first three statements:
- First, little work had known the following code:
{
function a() {}
}
console.log(a);
Where a is a function of printing, the penetration of block-level scope. Above does not explain this phenomenon.
a = 0;Assignment did not affect the external block a.
Two issues explained above, we require additional information (information from stackoverflow high praise replied, in reference to the original link):
function enclosing() {
{
function compat() {}
}
}
// works the same as
function enclosing() {
var compat₀ = undefined; // function-scoped
{
let compat₁ = function compat() {}; // block-scoped
compat₀ = compat₁;
}
}
On the face of the additional function declaration block concept introduced, more clarity of explanation of the underlying done.
First, the introduction of additional information itself, there are some problems. Less function raised to the top of the current block scope, I think it should be modified as follows:
function enclosing() {
var compat₀ = undefined; // function-scoped
{
function compat() {}
let compat₁ = compat; // block-scoped
compat₀ = compat₁;
}
}
This will fix the problem is not the function improvement.
guess
According to additional supplementary knowledge coupled with their imagination get the following results:
var a₀;
{
// 这部分被提升
function a() {}
let a₁ = a;
a₀ = a;
// 这部分被提升END
a₀ = 5;
a₁ = 0;
console.log(a₁);
}
console.log(a₀);
a₀ and a₁ are a different avatar in different locations.
reference
