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将是绑定事件的更好方法。

修改：更新了您的小提琴以显示其实际效果 - http://jsfiddle.net/dqk8n3xk/3/

Answer 2

您可以执行以下操作：

'use strict';

class App {

    constructor() {
        var that = this;

        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);
            });
        }
    }

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

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

}

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

如此jsfiddle

所示

从ES6中的类调用动态方法

2 个答案: