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

Question

来自 C++ 背景，尝试使用没有显式类型的 OO 语言有点让人头疼。

所以我有一个网页的动态元素，这些元素由对象 "controlled" 组成，因为我需要在每个元素上管理大量内容才能正常工作。元素只是对象本身内部数据的视觉输出，这就是我真正需要它的全部。

除了，我需要对象在单击时执行内部功能。到目前为止，这似乎是我最头疼的问题。

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"

我得到的错误正是来自 Firefox 的控制台面板的 "file.checkState is not a function"。

我还是 javascript 的新手，但在进行了一些调试之后，我发现显然是 onClick(this) 函数导致了所有错误。当与其他东西一起使用时，onClick 函数可以完美运行，但由于某些原因，this 关键字似乎并没有真正发送对 fileObject 的引用，因为所有检查都显示 file在 onClick 范围内时 undefined。

我尝试执行此操作的方式是否存在根本性错误，或者我只是错过了有助于使此代码段正常工作的步骤（或添加了我不需要的内容）。

Answer 1

来自 c++ Javascript 处理 this 的方式看起来有点疯狂，看起来你需要告诉你定义的函数 this 是什么 - 比如所以：

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

Answer 2

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

你想要 ... .element.addEventListener("click", callback); 那就是说，紧接着你面临第二个问题。我将保留您编写的示例代码，以免混淆问题...

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

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

以上范围内的最近函数是您要传递给 .click( ... ) 的回调函数。

这与 this 完全不同，您指的是 outside 回调。点左侧的任何内容都是该特定调用期间的 this 上下文。

不用说，click() 的知识不足以将 this 绑定到回调的左侧。

解决方案（或许多解决方案之一）是使用词法范围 and/or 闭包来保留您所指对象的值。

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


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

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

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

Javascript * is not a function (prototype function)

javascript

prototype

function

object

undefined