Say goodbye to procrastination, all new features commonly used in ES6-ES10 have been updated today, as study notes only, do not spray.

directory

• ECMAScript
  • ECMAScript overview
  • ES2015 overview
  • Classification of new features
• scope
  • Global scope
  • Function scope
  • Block-level scopes (new in ES6)
  • Dynamic scope
• Es6-es10 Learning layout

ECMAScript

ECMAScript overview

• ECMAScript is often seen as a standard specification for JavaScript, which is actually an extension of ECMAScript. ECMAScript provides only the most basic syntax.

JavaScript = ECMAScript + BOM + DOM

• From 2015, ES kept iterating one version per year and began to be named according to the year.

ES2015 overview

• This is a big change compared to ES5.1
• Since then, the standard naming rules have changed
• ES6 generally refers to all the new standards after 2015, and we should see clearly whether it is specific or general

Classification of new features

• Solve some problems or deficiencies in the original grammar
• The original syntax is enhanced
• Brand new object, brand new method, brand new function
• New data types and data structures

scope

1. Global scope
2. Function scope
3. Block scope
4. Dynamic scope

Global scope

Variables defined using var globally are global variables

Case 1:

var abc = 1234
abcd = 2345

delete abc //false
console.log(abc) / / 1234
delete abcd //true
console.log(abcd) //abcd is not defined

// ABC is a global object, but abcd is not a global variable. It exists as an attribute of the window object.
// But since the window is a global object, it looks like it has global properties and a global scope
Copy the code

Case 2:

function test(){
    ab = 45
}
test()

console.log(ab) / / 45
// All variables that are not defined by var inside the function are mounted on the window. They are not global variables, but have a global scope
Copy the code

Function scope

Variables defined inside a function have function scope/local scope

function test(){
    var a = 3
    return a + 4
}
console.log(test()) / / 7
console.log(a) //a is not defined
Copy the code

How do I have a in function scope, but some values are shared?

1. return
2. closure

Block-level scopes (new in ES6)

ES5

// ES5
function test(){
    var a = 3
    if (a === 3) {
        var b = 4
        console.log('abc')}else {
        console.log('abcd')}console.log(b)  / / 4
    return a + 4
}

// There is no barrier in the if block, and variables defined in {} can be used outside
//ES6 separates things in {}

function test () {
    var a = 3
    function test2 () {
        var b = 4
        return a + b
    }
    return test2
}

Test2 = test2; /* test2 = test2; Test2: select * from test2, return from test2, return from test2, return from test2, return from test2, return from test2, return from test2, return from test2 
Copy the code

ES6

function test(){
    var a = 3
    if (a === 3) {
        let b = 4
        console.log('abc')}else {
        console.log('abcd')}console.log(b)  // b is not defined
    return a + 4
}

// If you want to use block scope, you can't use var because var has a variable promotion mechanism.
// If you see var, you will be promoted to the top level of the current scope, so you can only use let,const
Copy the code

Dynamic scope

This is a very special keyword identifier that is automatically created in the scope of each function. The scope of a variable can only be determined at execution time.

window.a = 3
function test () {
    console.log(this.a)
}
test()  / / 3
test.bind({ a:100}) ()/ / 100

// Because this is a dynamic pointer, not a fixed pointer. So we call this dynamic scope.
// Bind dynamically binds a function to an object, which in this case refers to the object itself, causing the same function to have different effects.
Copy the code

Lexical scope

• Js uses lexical (static) scope, so enable dynamic scope with the help ofbind.with.evalAnd so on.
• Bash uses dynamic scope

// After verification, js uses static scope by default
// a is not found in the current function scope when foo is called, so it is found in the outer layer of the function in the order that it is written, i.e. var a = 2 instead of in bar
function foo() {
    console.log(a)  / / 2
}

function bar() {
    var a = 3
    foo()
}

var a = 2
bar()
Copy the code

Learning map