javascript - ES6 类中的动态方法调用

Question

如何从 ES6 中的类动态调用方法？

在 ES5 及更低版本中，我可以使用以下代码执行此操作。 JSFiddle example

var App = function() {

    var that = this;

    this.init = function() {
        var elements = document.getElementsByClassName('call-method');

        for(var i = 0; i < elements.length; i++) {
            elements[i].addEventListener('click', function() {
                that['method' + this.dataset.method](this);
            });
        }
    };

    this.methodOne = function(element) {
        console.log(element.innerText);
    };

    this.methodTwo = function(element) {
        console.log(element.innerText);
    };

};

(function() {
    var app = new App();

    app.init();
}());

当我尝试在 ES6 中做同样的事情时，我得到一个错误 Uncaught TypeError: not a function。这在 ES6 中是可能的还是我在这里做错了什么？ JSFiddle example

'use strict';

class App {

    constructor() {
        var elements = document.getElementsByClassName('call-method');

        for(var i = 0; i < elements.length; i++) {
            elements[i].addEventListener('click', function() {
                this.constructor['method' + this.dataset.method](this); // Uncaught TypeError: not a function
                App['method' + this.dataset.method](this); // Uncaught TypeError: not a function
            });
        }
    }

    methodOne(element) {
        console.log(element.innerText);
    }

    methodTwo(element) {
        console.log(element.innerText);
    }

}

(function() {
    new App();
}());

Answer 1

我认为您误解了 ES6 类的工作原理。你的第一个策略是行不通的，因为 this.constructor 是一个方法，而不是对任何构造函数类的引用。第二个不起作用，因为那只会引用静态方法。

相反:

constructor() {
    var elements = document.getElementsByClassName('call-method');

    for(var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('click', (e) => {
            this['method' + e.target.dataset.method](e);
        });
    }
}

还有 arrow functions将是绑定(bind)事件的更好方式。

编辑:更新您的 fiddle 以展示它的实际效果 - http://jsfiddle.net/dqk8n3xk/3/