It’s just that the text I lost in Jane’s book before moving was written when I was a beginner of ES6, so it’s not usable (though it’s not valuable).

Yes is only export, so…… The import to ignore

This code runs with {“presets”: [” ES2015 “,”stage-2”]} This is only for reference, and only for the operating environment. It is not recommended to translate all the code into ES5 when learning ES6. The converted code of ES6 can only tell you the result. The most important goal is to know why, why a behavior happens the way it does, what’s behind the behavior, that’s what learners need to pursue. Right

ES6 specification 15.2.3.2 Static Semantics: BoundNames

The first entry is export, the main keyword, which is basically used to precede a “declaration” or a set of “identifiers” to be exported wrapped in {} syntax (note that {} syntax here is not about objects)

//exportPlaced in the"Statement"beforeexport var a = 1, b = 2, c = 3
export let a = 1
export const a = 1
export let { a } = { a: 1 }
export var foo = function() {}
export function foo() {} / /exportPlace in a group"Identifier"Var a = 1, b = 2export{a, b} // equivalentexport var a = 1
export var b = 2
Copy the code

The above examples have a clear common point. There is no “expression” after export. In effect, the individual export is a binding of variable identifiers (pointer positions) with the expectation that the corresponding identifiers (Pointers) will be exported in the future.

Exporting “variable identifiers” is a confusing description. Consider the following code

var a = 1
export{a} a = 3 // equivalentexport var a = 1
a = 3
Copy the code

When the module is exported, if the assignment occurs, the exported value will also be updated, regardless of the stage in which the export occurred. Furthermore, the value at the time of import is irrelevant. These bindings are real-time links, so the only thing that matters is what the current value of the binding is when you access it.

  1. The statement
  2. Export identifier A, which at this point is a reference to, or pointer to, the variable itself, rather than a copy of its value
  3. Inside the module, a is reassigned and exported values are automatically updated
Reference specification 15.2.3.2 ExportDeclaration:export VariableStatement
  1. Return the BoundNames of VariableStatement.
ExportDeclaration : exportDeclaration 1. Return the BoundNames of Declaration. You can seeexportThe derivation of is explicitCopy the code

In addition, The word “identifier” is quoted in The above rule means that each ReferencedBindings of ExportClause is treated as an IdentifierReference. This is mainly word poor, and because module export is different from assignment, when exporting, it is essentially exporting a reference to a one-way bound variable (not allowed to change on the import side). Yes, it is more accurate to say that a module export does not care about the value of the variable container.

When exporting, you can use the alias, keyword as

var a = 1
export{a as b} // Rename a to bCopy the code

“When using the import command in a module, the user needs to know the name of the variable or function to load, otherwise it cannot be loaded. However, users will want to get started quickly and may not want to read the documentation to learn what properties and methods a module has.

“To make it easier for users to load modules without reading the documentation, use the export default command to specify the default output for modules.”

The above two sentences are excerpted from the introduction to ECMAScript 6. They are appropriate descriptions, but if they are changed, they are not comprehensive enough. Therefore, the following supplements are added to default

  1. Each module definition can have only one default, which is unique. Each exported module contains only one default element, so the export default command is only allowed to be used once in a module.

  2. Essentially, export default simply prints a default identifier called default. It is equivalent to adding the content after export default to the default element as an assignment.

var a = 1
exportDefault a // Equal toexportDefault 1 // exports the binding of that expression's value at that moment, not the binding of identifier A (export.default = expression)Copy the code

Export Default has many subtle details that are confusing (not the results, but the behavior). Consider the following code.

//m2.js
1.
function foo() {}
export default foo
foo = 'change'

2.
export default (function foo() {})
foo = 'change'

3.
function foo() {}
export { foo as default }
foo = 'change'// As described above, default is close to an identifier, so you can simply rename foo as default. 4.export default function foo() {}
foo = 'change'Import * as all from'm2.js'
console.log(all)
Copy the code

Does your brain know exactly what’s going to happen in each module? If not, please read on. If you can, please read on to review this episode. Let me copy the code and describe and explain the behavior of each module. # # # # # # 1 module.

function foo() {// Declare fooexportDefault foo // Assign foo to the default element (note that foo is an expression at this point) foo ='change'{default: [Function: foo]}Copy the code

Export Default exports the binding of the value of that function expression at that moment, not the binding of identifier foo. In other words, export default.. Receive an expression. If you later assign a different value to Foo inside your module, the module import will still represent the function that was exported, not the new value.

Export Default AssignmentExpression is defined in the export default expression

ExportDeclaration : export default AssignmentExpression ; 1.Return «”default”». Assign the value of the expression to default and Return the default ###### module 2.

export default (function foo() {}) will (..) Assign to the default element (note that () is the expression) foo ='change'// ReferenceError: foo is not definedexport default !function foo() {}! The equivalence operator can wrap a function as an expression return valueCopy the code

Export Default (function foo(){}), export default is followed by function expression, not function declaration definition, so its corresponding specification is the same as that of module 1, ExportedBindings is a «”default”».

The reason for this error is that the function expression only returns the function itself as a value and does not define a variable of the same name in the external scope, so foo = ‘change’ below does not find the definition of foo.

# # # # # # module 3.

function foo() {}
export { foo as default }
foo = 'change'// result {default:'change' }
Copy the code

ExportDeclaration : export Declaration 1.Return the BoundNames of Declaration. The behavior is the same as the export ‘identifier’, so the specification referenced is the same. The only thing to understand is that default can be assigned

4 # # # # # # module.

export default function foo() {} // A function declaration appears! foo ='change'// result {default:'change' }
Copy the code

function foo.. Part is a function expression, but for the module’s internal scope, it is treated as a function declaration because the name foo is bound to the top-level scope of the module

Export default function declaration defines the behavior defined in the specification, corresponding to export default HoistableDeclaration. ExportDeclaration: export default HoistableDeclaration 1.Let declarationNames be the BoundNames of HoistableDeclaration. 2.If declarationNames does not include the element “default”, append “default” to declarationNames. 3.Return declarationNames.

As you can see from the specification, if the declaration to be exported does not contain the element default, then it is assigned (the specification concept) and returns an identifier of the current binding, different from the state of the previous expression. As a result, you can see that the exported value has been updated.

The original title was A Detailed explanation of ES6 Module, and then I found that I did not really understand the part of Module, so I stopped writing and went back to reading. In fact, this article is to summarize the knowledge

Beginner of ES6, the article is wrong, please give advice, some words in the article is not accurate, please forgive, although the specification is quoted, but I do not have the ability to interpret, ashamed.

ES6 specification 15.2.3.2 Static Semantics: BoundNames