javascript - 为什么这个 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 属于 window 而不是 Library 构造函数。发生这种情况是因为箭头函数绑定(bind)上下文词法与窗口对象或作为父级的环境。

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

通常在 JS 中，我们有两个上下文/作用域 [全局、函数]。在您的情况下，arrow 函数指向 window context 或 nearest parent context. which is window.