为什么这个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上下文.lexicallyparent

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

通常在JS中,我们有两个上下文/范围[Global,Function].在您的情况下,arrow函数指向window context或nearest parent context.窗口.