Question

我收到了这段代码：

class TestClass = function() {
    var methodOne = function(a, b) {
        return (a == b);
    }

    var methodTwo = function() {
        var elements = $('.element');

        elements.droppable({
            drop: function(event, ui) {
                if (!this.methodOne(ui.draggable.data('a'), ui.draggable.data('b'))) {
                    return false;
                }

                return true;
            }
        });
    }
};

运行时，我收到以下错误：

未捕获的TypeError：this.methodOne不是函数

任何想法为什么？

Answer 1

不要将javascript与java混淆。通过javascript，您的课程没有私有方法，因此您无法使用this关键字访问这些功能。

您可以执行以下操作：

var TestClass = function() {
    var methodOne = function(a, b) {
        return (a == b);
    }

    var methodTwo = function() {
        var elements = $('.element');

        elements.droppable({
            drop: function(event, ui) {
                if (!methodOne(ui.draggable.data('a'), ui.draggable.data('b'))) {
                    return false;
                }

                return true;
            }
        });
    }
};

但请注意，methodOne和methodTwo变量没有构造函数之外的值，因为它们是构造函数的局部变量，而不是方法。

您可以通过将方法添加到原型来定义方法，例如：

TestClass = function() {};
TestClass.prototype = {
    constructor: TestClass,
    methodOne: function (){...},
    methodTwo: function (){...}
};

在这种情况下，如果您从this调用methodOne，则methodTwo关键字有效，但在您的示例中，您可以使用methodTwo中定义的函数调用它，所以你必须使用bind()函数来创建一个包装器，它通过该函数设置上下文。

var TestClass = function() {
};
TestClass.prototype = {
    constructor: TestClass,
    methodOne: function(a, b) {
        return (a == b);
    },
    methodTwo: function() {
        var elements = $('.element');

        elements.droppable({
            drop: function(event, ui) {
                if (!this.methodOne(ui.draggable.data('a'), ui.draggable.data('b'))) {
                    return false;
                }

                return true;
            }.bind(this)
        });
    }
};

如果你想使用ES6类而不是ES5，那么故事有些不同，但你需要一个编译器，例如： babel，traceur等...据我所知，您不能使用ES5的class关键字，因此您应该使用var代替。{/ p>

Answer 2

要提出的一些观点：

ES6类的语法不同。
您可以使用bind将this对象修复为分配给drop的函数。
与问题无关，但该函数中的if确实是不必要的。您只需返回布尔表达式的结果：

代码：

class TestClass {
    methodOne (a, b) {
        return (a == b);
    }

    methodTwo () {
        var elements = $('.element');

        elements.droppable({
            drop: function(event, ui) {
                return this.methodOne(ui.draggable.data('a'), ui.draggable.data('b'));
            }.bind(this)
        });
    }
};

Javascript OOP - 从同一个类的不同方法调用方法

2 个答案: