如何在JavaScript 2015(EcmaScript 6)中对此进行别名？

Question

在ECMAScript中5,我们可以别名this为var ctrl = this如以下的片段.

// EcmaScript 5
function BookController {
    var ctrl = this;

    ctrl.books = [];

    ctrl.getBook = getBook;

    function getBook(index) {
        return ctrl.books[index];
    }
}

等效BookController于ES6使用class.我曾在其中一个场景中getBook被调用this以外BookController.在getBook功能,我想确保上下文总是BookController让我想别名this的BookController在ES6.

// EcmaScript 6
class BookController {

    constructor() {
        this.books = [];
    }

    getBook(index) {
        return this.books[index];
    }
}

如何this在JavaScript 2015中使用别名(EcmaScript 6)？

Answer 1

BookController在ES6中使用类等效.

不,它不等同,它有明显的不同.您的class示例基本上等同于此ES5:

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

请注意,getBook在您使用时将分配给实例的原型上定义new BookController.但这不是你的第一个例子.您的第一个示例为getBook每个实例分配一个不同的,作为"自己的"(不是继承的)属性.

在getBook功能,我想确保上下文总是BookController让我想别名this的BookController在ES6.

它不是别名,它是一个参考.你以同样的方式(在构造函数中)执行它,但不需要变量:

// EcmaScript 6
class BookController {

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

因为这是一个箭头功能,它会关闭this.

例:

// EcmaScript 6
class BookController {

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

let c1 = new BookController();
c1.books.push("The Hitchhiker's Guide to the Galaxy");
let f1 = c1.getBook;

let c2 = new BookController();
c2.books.push("Do Androids Dream of Electric Sheep?");
let f2 = c2.getBook;

console.log(f1(0));
console.log(f2(0));

但是请注意,没有特定原因这样做,通常的做法是将管理权this交给调用者.