なぜこのjavascriptスニペットが機能していないのですか？

Question

私の次のコードは動作していますが、私はES6の構文を使用するともう動作しません。何が起きているのか説明してください。

このコードは完全に機能しています。

function Library(){ this.books = [];}; 
    Library.prototype.addBook = function(book){ 
    this.books.push(book); 
    }; 

    Library.prototype.getBook = function(index){ 
    return this.books[index]; 
    }; 

    var m = new Library(); 
    m.addBook('The Demon Haunted World');  
    m.getBook(0); 
    // output will be like 'The Demon Haunted World' 

次に、構文をある程度ES6に変更しました。 コードは、このように見えた：

function Library(){ this.books = [];}; 
    Library.prototype.addBook = (book) => { 
    this.books.push(book); 
    }; 

    Library.prototype.getBook = (index) => { 
    return this.books[index]; 
    }; 

    var m = new Library(); 
    m.addBook('The Demon Haunted World'); 

は、なぜこれが動作しませんか？私は次のエラーを取得しています：

VM505:2 Uncaught TypeError: Cannot read property 'push' of undefined(…) 

Answer 1

thisはウィンドウではなくLibraryコンストラクタに属します。これは、矢印関数bindsのコンテキストlexicallyとウィンドウオブジェクトまたは環境がparentであるために発生します。

function Library(){ this.books = [];}; 
    Library.prototype.addBook = (book) => { 
    console.log(this); //window 
    this.books.push(book); 
    }; 

JSでは、通常、2つのコンテキスト/スコープ[グローバル、機能]があります。あなたの場合、arrow関数はwindow contextまたはnearest parent context.のウィンドウを指しています。 [ES6オブジェクトのメソッド：矢印機能を使用]の