混合jQuery，原型和“this”

Mixing jQuery, prototype and 'this'

本文关键字：this 原型 jQuery 混合      更新时间：2024-03-25

我正在做一个使用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) {}

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

您可以使用

$.proxy(( 将自定义执行处理程序传递给事件处理程序，this事件处理程序内部引用了连接侦听器的 dom 元素 - 它与 Function.bind(( 相同，但 jQuery 版本支持 IE <9。

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

如果一个对象obj有一个函数func并且你这样做obj.func()该函数是在obj的上下文中调用该函数的，其中该函数中的this然后引用obj。

但是，如果您执行以下操作：

var callback = obj.func;
callback();

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

要解决此问题，您可以使用Function.prototype.bind(您需要检查浏览器支持是否适合您或使用 polyfill，可以在 mdn 页面上找到(，您可以使用jQuery.proxy或创建闭包并自己维护上下文。

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 调用。

有关此值、构造函数和原型的更多信息，请参见此处。

相关文章：