Question

来自C ++背景，尝试使用没有明确输入的OO语言只是一个令人头痛的问题。

所以我有一个动态元素用于被控制的网页＆＃34;由对象，因为我需要管理大量的东西才能使它工作。元素只是对象本身内部数据的可视输出，这是我真正需要的。

除之外，我需要对象在单击时执行内部功能。到目前为止，这似乎是我头痛的最大原因。

使用Javascript：

function onClick(file) //The external onClick function I use to try to get it to call from. 
{
    file.state = INUSE;
    file.checkState();
}

function fileObject () { //The file object itself
    this.element;
    this.newElement();         
    //initialize stuff for the object
}

fileObject.prototype.newElement = function() { //creates a new element and sets its event listener
    this.element.click(function() {onClick(this)});
}

fileObject.prototype.checkState = function() {/*does stuff*/} //apparently this is "not a function"

我得到的错误是＆＃34; file.checkState不是函数＆＃34;来自Firefox的控制台面板。

我还是javascript的新手，但在做了一些调试之后，我发现它明确表示导致所有错误的onClick(this)函数。当与其他东西一起使用时，onClick函数可以正常工作，但出于某种原因，this关键字似乎并没有实际发送对fileObject的引用，因为所有检查都显示{{1在onClick范围内时为file。

我尝试这样做的方式是否存在根本性的错误，或者我只是错过了一个步骤（或添加了我不需要的东西），这将有助于使这个代码段正常工作。

Answer 1

所以你知道，你的初始问题实际上并不是处理动作，而是倾听它。 click将触发合成点击事件，而不是侦听一个。

您希望... .element.addEventListener("click", callback);之后立即表示您遇到第二个问题。我会在你编写代码时留下我的示例代码，以免混淆此事......

但是，当您看到click( )知道我的意思是订阅addEventListener时，如果element确实意味着浏览器DOM元素。如果它不是标准的浏览器元素和您自己的API，则忽略前一部分，然后继续。

this在函数的调用时动态绑定（不在定义时）。

上面的最近函数是你传递给.click( ... )的回调函数。

这与您在回调中之外的this完全不同。无论点的左侧是什么，都是特定调用期间的this上下文。

毋庸置疑，click()不足以将你所指的this绑定到回调的左侧。

解决方案（或其中之一）是使用词法作用域和/或闭包来保留您所指对象的值。

// easy but messier
var fileObject = this;
... .click(function () { onClick(fileObject); });


// Cleaner with thunks:
function clickHandler (onClick, obj) {
  return function () { onClick(obj); };
}

... .click(clickHandler(this));

Answer 2

来自c ++的Javascript处理this的方式看起来有点疯狂，看起来你需要告诉你已定义this是什么的函数 - 就像这样：

this.element.click(function() {onClick(this)}.bind(this));

Javascript *不是函数（原型函数）

2 个答案: