Question

我正在开发一个使用JS原型和jQuery的项目。

我相信，我的问题是'这个'是如何被使用的。

在我的代码中，我在函数中有一些jQuery，我将进行原型设计。 jQuery看起来像这样:(在此代码中，'target'是首次创建IMAGE_UPLOADER时传递的jQuery对象。）

document.getElementById(target.find('.file_selector').prop('id')).addEventListener("change", this.FileSelectHandler, false);

在此事件侦听器中，有一个名为FileSelectHandler的函数。这个功能被称为正常。但是，在此函数中，调用第二个函数。以下是该函数的简短版本：

FILE_UPLOADER.prototype.FileSelectHandler = function(e) {

this.FileDragHover(e);
 }

这是出现错误的地方。 JS抱怨函数'FileDragHover'不存在。它当然存在并且定义如下：

FILE_UPLOADER.prototype.FileDragHover = function(e) {}

我希望这是了解问题的足够信息。如果没有，请告诉我，我可以添加更多。

Answer 1

您可以使用$.proxy()将自定义执行处理程序传递给事件处理程序，事件处理程序内的this引用侦听器附加的dom元素 - 它与{{3}相同但是jQuery版本Function.bind()。

document.getElementById(target.find('.file_selector').prop('id')).addEventListener("change", $.proxy(this.FileSelectHandler, this), false);

可以使用jQuery简化处理程序注册

target.find('.file_selector').change($.proxy(this.FileSelectHandler, this))

Answer 2

如果一个对象obj有一个函数func而你做obj.func()，那么该函数会在obj的上下文中调用，其中this在该函数中然后引用到obj。

如果你做了这样的事情：

var callback = obj.func;
callback();

然后callback不再在obj的上下文中调用window。对于浏览器，上下文是addEventListener。如果您将函数作为回调函数传递给this，则会发生这种情况。根据回调的使用方式，可以使用另一个上下文调用，对于事件侦听器，它是DOM元素，因此代码中的{{1}}指的是DOM元素。

要解决此问题，您可以使用Function.prototype.bind（您需要检查浏览器支持，如果它可以使用或使用polyfill，可以在mdn页面上找到），您可以使用{ {3}}或创建一个闭包并自己维护上下文。

Answer 3

this变量引用调用对象而不是声明方法的对象。因此，如果我有someObject.someFunction();，则someObject是调用对象，函数中的值为this。

演示：

var obj1 = {
  name:"obj1",
  say:function(){
    console.log(this.name);
  }
};
var obj2 = {name:"obj2"};
obj2.say = obj1.say;
obj2.say()//logs obj2

在上面的代码中，say在obj1上声明，但是从obj2调用。

有关此值的更多信息，构造函数和原型here。

混合jQuery，原型和'this'

3 个答案: