JS ES6 supplement

Supplementary points: 1, let const 2, 3 template string, the function arrow 4, 5 monomer object model, the object-oriented

First, the definition of variables

, I have

Features:

1, the definition of global variables

2, the definition may be repeated

3, variable names upgrade

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <Meta name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0"> 
    < HTTP-equiv = Meta "X--the UA-Compatible" Content = "IE = Edge"> 
    <title> declare variables </ title> 
</ head> 
<body> 
    <Script> 
        { 
            var A = 66 ; 
            the console.log ( ' in '+ a); 
        } 
        // in the variable block-level scope may be used in the global 
        // 1.var global variables are defined in 
        the console.log (' OUT '+ a);
         // 2.var be redefined variable 
        var A = 88 ; 
        the console.log ( 'new new' +A);
         // 3. lifting variable name 
        // Process var b -> enhance print b, b no assignment results: undefined 
        the console.log (B);      // undefined 
        var B = 10 ;
     </ Script> 
</ body> 
</ HTML>

B、let

Features:

1, the variable block-level

2, in the same scope, can not be redefined

3 does not support variable names upgrade

{ 
    The let B =. 5 ; 
    the console.log ( 'B1' , B) 
} 
// 1.let declaration block level variables 
// the console.log ( 'B2', B); // B IS Not defined 
the let B = 10 ; 
the console.log ( 'B3' , B) 

// 2.let not be re-declared variables 
// the let B = 20 is; 
// the console.log ( 'B4', B) // Identifier 'B' has already been declared 

// 3. let the variable lift does not support 
the console.log (C);      // Can not Access 'C' Initialization before 
the let C = 2;

C、const

Features:

1, define constants

2, in the same scope, not redefine

3 does not support variable lift

A 10 = const ;
 // 1.const defined is constant, a constant can not be modified 
// A = 20 is; 
// the console.log (A) to the Assignment // Constant variable. 

// 2. Statement can not repeat 
// const = 20 is A; 
// the console.log (A) // Identifier 'A' has already been declared 


// 3. const variable defined, does not support the variable lift 
the console.log (B); 
const B = 30;    // Can not Access 'b' before initialization

Second, the template string

1, Backticks (table key, the key above)

2, the format: variable name $ {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串模板</title>
</head>
<body>
    <script>
    var name = 'tom';
    var age = 24;
    // 注意：
    // 1. 反引号
    // 2.${变量名}
    var info = `${name},今年${age}岁!!!`;
    console.log(info)    
    
    </script>
</body>
</html>

Third, the function arrow

A, Introduction

format:

f = function(a, b){} ---> f = (a, b)=>{}

note:

1, when the parameter is a number, the brackets can be omitted

2, as long as the return {}, {} may be omitted not write

Pits B, arrow Function

1、this

this traditional function, point to the object call

this function of the arrow, pointing to declare the object object

// Create an object literal embodiment 
var Person = { 
    name: 'Tom' , 
    Age: 24 , 
    INFO: function () {
         // 1. ordinary function call object this refers to both the Person 
        the console.log ( this );    // {name : "Tom", Age: 24, iNFO: ƒ} 
    } 
}; 
person.inf0 (); 

// Create object literal embodiment 
var PERSON2 = { 
    name: 'Alex' , 
    Age: 43 is , 
    info: () => {
         // 1. The function of this arrow pointing to declare objects and windows
        console.log(this);  // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }
};

person2.info();

2、arguments

    // 2.箭头函数不能使用 arguments
    var foo = function(){
        console.log(arguments);  // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    }
    foo(1, 2, 3);

    var bar = ()=>{
        console.log(arguments);     // Uncaught ReferenceError: arguments is not defined
    }
    bar(3, 2, 1);

Fourth, the monomer object model

Objective: To solve function of this pit arrow

// Create an object literal embodiment 
var Person = { 
    name: 'Tom' , 
    Age: 34 is ,
     // Format comparison: 
    @ info: () => {} 
    // info () {} 
    info () { 
        the console.log ( the this .name);      // Tom 
    } 
} 
person.info ();

Fifth, object-oriented

1, ES5

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <Meta name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0"> 
    < HTTP-equiv = Meta "the X-UA-Compatible-" Content = "IE = Edge"> 
    <title> the Document </ title> 
</ head> 
<body> 
    <Script> // method to create an object constructor, pay attention to the name uppercase function the Person (name, Age) { 
        the self.name = name; 
        self.age = Age; 
    } // method to create the object 
    Person.prototype.= showname function () { 
        the console.log (the self.name); 
    } 
　　 // instantiate an object var
    
    
    
     p1 = new Person('tom', 24);
    p1.showname();      // tom
    </script>
</body>
</html>

ES6

// definition of class 
class the Person {
     // Constructors 
    constructor (name, Age) { 
        the self.name = name; 
        self.age = Age; 
    } 
    // custom method 
    showname () { 
        the console.log (the self.name); 
    } 
} 

// instantiate an object 
var P2 = new new the Person ( 'Tom', 24 );
 // call the method 
p2.showname ();   // Tom

Note: The syntax ES6 than ES5 object-oriented object-oriented syntax like Object Oriented

Guess you like