ES 6文法入門——上

ECMAScript 6(以下、ES 6と略す)は、JavaScript言語の次世代標準である.現在のバージョンのES 6は2015年にリリースされているため、ECMAScript 2015とも呼ばれています.
最も一般的なES 6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

これらはES 6で最もよく使われるいくつかの文法で、基本的にそれらをマスターして、私たちは天下を歩き回っても怖くありません!私は最も分かりやすい言語と例でそれらを説明して、一目でわかることを保証して、勉強するとできます.

//let JavaScript        。        ，  let           。

let name = 'zach'
while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}
console.log(name)  //zach

//const      ,         
const monent = require('moment')

// 
class Animal {
    //    
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}
let animal = new Animal()
animal.says('hello') //animal says hello

//  
class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}
let cat = new Cat()
cat.says('hello') //cat says hello

上のコードはまずclassで「クラス」を定義し、コンストラクションメソッドが表示されます.これがコンストラクションメソッドですが、thisキーワードはインスタンスオブジェクトを表します.簡単に言えば、constructor内で定義された方法と属性はインスタンスオブジェクト自体であり、constructor外で定義された方法と属性はすべてのインスタンスオブジェクトが共有できる.
Class間ではextendsキーワードによる継承が可能であり,ES 5のプロトタイプチェーンの修正による継承よりも明確で便利である.上には、extendsキーワードを介してAnimalクラスのすべての属性とメソッドを継承するCatクラスが定義されています.
superキーワード.親のインスタンス(親のthisオブジェクト)を指します.サブクラスはconstructorメソッドでsuperメソッドを呼び出す必要があります.そうしないと、インスタンスを新規作成するときにエラーが発生します.これは,子クラスが自分のthisオブジェクトを持たず,親クラスのthisオブジェクトを継承して加工するためである.superメソッドを呼び出さないと、サブクラスはthisオブジェクトを取得できません.
ES 6の継承メカニズムは、実質的に親クラスのインスタンスオブジェクトthisを作成し(superメソッドを呼び出す必要がある)、次にサブクラスの構造関数でthisを変更する.

//arrow function
function(x, y) { 
    x++;
    y--;
    return x + y;
}//es5
(x, y) => {x++; y--; return x+y}//es6

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

//     this  self,  self   this
   says(say){
       var self = this;
       setTimeout(function(){
           console.log(self.type + ' says ' + say)
       }, 1000)

//       bind(this), 
   says(say){
       setTimeout(function(){
           console.log(this.type + ' says ' + say)
       }.bind(this), 1000)

//es6    
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

矢印関数を使用すると、関数内のthisオブジェクトは、使用時に存在するオブジェクトではなく、定義時に存在するオブジェクトです.矢印関数の内部にthisをバインドするメカニズムがあるわけではありませんが、実際には矢印関数には独自のthisがありません.このthisは外部を継承しているので、内部のthisは外層コードブロックのthisです.