的JavaScript OOP - 调用同一类

的不同方法的方法，我得到这个代码：的JavaScript OOP - 调用同一类

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

运行此，我得到以下错误：

Uncaught TypeError: this.methodOne is not a function

任何想法，为什么？

来源

2016-08-21 Daniel

这是因为'this'不再是识别TestClass，但指定'this'上降（事件，UI），加var self = this;在var元素下面，并调用self.methodOne（） – Roberrrt

那么我怎样才能从那里调用一个方法？ – Daniel

这是'class'关键字的无效使用。它会抛出'Uncaught SyntaxError：Unexpected token ='。你的意思是使用'var' /'let' /'const'吗？ – nem035

请勿将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(){...} 
};

在这种情况下，如果你从methodTwo致电methodOne的this关键字的工作，但在你的例子，你从一个函数调用它在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而不是那个。

来源

2016-08-21 08:02:13 inf3rno

几点提高：

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

来源

2016-08-21 08:26:37 trincot

Yepp，目前还不清楚他是否想使用ES5或ES6，语法是它们之间的一半。由于他使用的是DOM，在这个问题上没有babel标签，所以我猜他正试图在浏览器中使用ES5。 – inf3rno

的JavaScript OOP - 调用同一类

回答

相关问题