无法解析此引用的Javascript对象方法

我已经创建了一个JS对象，带有一些原型函数，使用这个函数从构造函数中调用它们是很好的。[函数]

但在后面的事件处理函数中，这指的是元素，而不是对象，我不确定如何解决这个问题：

它通过AddListener精细，鼠标按下事件触发，导致启用/禁用拖动正常工作。但在该函数中，“this”是元素，而不是dragger对象，因此我不能调用access WindowCenter、DraggingBool或Add/RemoveListener事件

从阅读来看，我可能需要实现prototype.bind？但不知道如何重新排列现有代码来实现这一点。还是更改其中一个函数以返回函数

是的，我知道我可以在jQuery中这样做，做了很多次，只是想看看我是否可以在POJS中使用它：）

---

这是因为在使用

addEventListener

时，执行范围被设置为节点，就像使用了

node.onclick=foo

一样。在IE中使用

attachEvent

时，执行范围将成为全局执行范围，即窗口

解决此问题的一种方法是使用Function.call或Function.apply指定您喜欢的执行范围。许多库将声明一个绑定函数来帮助实现这一点，例如：

function bind(fn, context) {
  return function() {
    return fn.apply(context, arguments);
  };
}

this.AddListener(this.DraggingElement, "mousedown",
    bind(this.enableDragging, this));

您还可以向AddListener函数添加一个上下文参数，并在那里进行绑定

具有内置的绑定方法。

Function.prototype.bind=Function（）{
  Function.prototype.bind = function () {
    if (arguments.length < 2 && arguments[0] === undefined) {
     return this;
   }

    var thisObj = this,
    args = Array.prototype.slice.call(arguments),

    obj = args.shift();

    return function () {
     return thisObj.apply(obj, args.concat(Array.prototype.slice.call(arguments)));
    };

  };



  Function.bind = function() {
    var args = Array.prototype.slice.call(arguments);
    return Function.prototype.bind.apply(args.shift(), args);

  }

Dragger = function(element, draggingElement) {
    this.Element = element;
    this.DraggingElement = element;
    this.WindowCenter;
    this.DraggingBool = false;

    this.AddListener(this.DraggingElement, "mousedown", this.enableDragging,this); 
    this.AddListener(this.DraggingElement, "mouseup", this.disableDragging,this);
}

Dragger.prototype.AddListener = function (element, eventType, listener, bubble,dragger_obj) {
    if (typeof (element) != "object" || typeof (listener) != "function")
        return;
    if (typeof (bubble) == "undefined")
        var bubble = false;
    eventType = eventType.toLowerCase();
    if (eventType.substr(0, 2) == "on")
        eventType = eventType.substr(2);
    if (window.addEventListener) { // Mozilla, Netscape, Firefox
        element.addEventListener(eventType, listener.bind(dragger_obj), bubble);
    } else if (window.attachEvent) { // IE
        element.attachEvent("on" + eventType, listener.bind(dragger_obj));
    }
}

Dragger.prototype.RemoveListener = function (element, eventType, listener,dragger_obj) {
    eventType = eventType.toLowerCase();
    if (eventType.substr(0, 2) == "on")
        eventType = eventType.substr(2);
    if (window.addEventListener) { // Mozilla, Netscape, Firefox
        element.removeEventListener(eventType, listener.bind(dragger_obj), false);
    } else if (window.attachEvent) { // IE
        element.detachEvent("on" + eventType, listener.bind(dragger_obj));
    }
}

Dragger.prototype.enableDragging = function (e) {
    if (!e) var e = window.event;
    //dont move for right click
    if (e.which && e.which == 3)
        return;
    else if (e.button && e.button == 2)
        return;

    this.DraggingBool = true;
    this.WindowCenter = new Point(e.pageX, e.pageY);
    this.AddListener(document.body, "mouseover", this.mouseMoveListener,this);
}

Dragger.prototype.disableDragging = function () {
    this.DraggingBool = false;
    this.RemoveListener(document.body, "mouseover", this.mouseMoveListener,this);
}

Dragger.prototype.mouseMoveListener = function (e) {
    if (!this.DraggingBool)
        return;
    if (!e) var e = window.event;
    e.preventDefault();
    var newLoc = new Point(e.pageX, e.pageY);
    var xDif = windowCenter.X - newLoc.X;
    var yDif = windowCenter.Y - newLoc.Y;
    this.Element.style.left = (this.Element.offsetLeft + xDif) + "px";
    this.Element.style.top = (this.Element.offsetTop + yDif) + "px";
    this.WindowCenter = newLoc;
}

if（arguments.length<2&&arguments[0]==未定义）{
归还这个；
}
var thisObj=此，
args=Array.prototype.slice.call（参数），
obj=args.shift（）；
返回函数（）{
返回thisObj.apply（obj，args.concat（Array.prototype.slice.call（arguments））；
};
};
Function.bind=函数（）{
var args=Array.prototype.slice.call（参数）；
返回函数.prototype.bind.apply（args.shift（），args）；
}
Dragger=函数（元素，draggingElement）{
这个元素=元素；
this.DraggingElement=元素；
这是WindowCenter；
this.DraggingBool=false；
this.AddListener（this.DraggingElement，“mousedown”，this.enableDragging，this）；
this.AddListener（this.DraggingElement，“mouseup”，this.disableDragging，this）；
}
Dragger.prototype.AddListener=函数（元素、事件类型、侦听器、气泡、Dragger_obj）{
if（typeof（element）！=“object”| | typeof（listener）！=“function”）
返回；
if（气泡类型）=“未定义”）
var泡泡=假；
eventType=eventType.toLowerCase（）；
if（eventType.substr（0，2）=“开”）
eventType=eventType.substr（2）；
if（window.addEventListener）{//Mozilla、Netscape、Firefox
element.addEventListener（eventType，listener.bind（dragger_obj），bubble）；
}else如果（window.attachEvent）{//IE
元素attachEvent（“on”+eventType，listener.bind（dragger_obj））；
}
}
Dragger.prototype.RemovelListener=函数（元素、事件类型、侦听器、Dragger_obj）{
eventType=eventType.toLowerCase（）；
if（eventType.substr（0，2）=“开”）
eventType=eventType.substr（2）；
if（window.addEventListener）{//Mozilla、Netscape、Firefox
element.removeEventListener（eventType，listener.bind（dragger_obj），false）；
}else如果（window.attachEvent）{//IE
element.detachEvent（“on”+eventType，listener.bind（dragger_obj））；
}
}
Dragger.prototype.EnableDraging=函数（e）{
如果（！e）var e=window.event；
//不要移动鼠标右键单击
if（e.which&&e.which==3）
返回；
else if（e.button&&e.button==2）
返回；
this.DraggingBool=true；
this.WindowCenter=新点（e.pageX，e.pageY）；
this.AddListener（document.body，“mouseover”，this.mouseMoveListener，this）；
}
Dragger.prototype.DisableDraging=函数（）{
this.DraggingBool=false；
this.RemoveListener（document.body，“mouseover”，this.mouseMoveListener，this）；
}
Dragger.prototype.mouseMoveListener=函数（e）{
如果（！this.DraggingBool）
返回；
如果（！e）var e=window.event；
e、 预防默认值（）；
var newLoc=新点（e.pageX，e.pageY）；
var xDif=windowCenter.X-newLoc.X；
var yDif=windowCenter.Y-newLoc.Y；
this.Element.style.left=（this.Element.offsetLeft+xDif）+“px”；
this.Element.style.top=（this.Element.offsetTop+yDif）+“px”；
this.WindowCenter=newLoc；
}

太棒了！干杯，比我在创建对象时将全局变量设置为对象的实例，并在函数中调用硬编码的技巧要好得多：）现在我必须让它在IE中工作，因为你显然无法设置样式。左。但我会弄明白的^^

  Function.prototype.bind = function () {
    if (arguments.length < 2 && arguments[0] === undefined) {
     return this;
   }

    var thisObj = this,
    args = Array.prototype.slice.call(arguments),

    obj = args.shift();

    return function () {
     return thisObj.apply(obj, args.concat(Array.prototype.slice.call(arguments)));
    };

  };



  Function.bind = function() {
    var args = Array.prototype.slice.call(arguments);
    return Function.prototype.bind.apply(args.shift(), args);

  }

Dragger = function(element, draggingElement) {
    this.Element = element;
    this.DraggingElement = element;
    this.WindowCenter;
    this.DraggingBool = false;

    this.AddListener(this.DraggingElement, "mousedown", this.enableDragging,this); 
    this.AddListener(this.DraggingElement, "mouseup", this.disableDragging,this);
}

Dragger.prototype.AddListener = function (element, eventType, listener, bubble,dragger_obj) {
    if (typeof (element) != "object" || typeof (listener) != "function")
        return;
    if (typeof (bubble) == "undefined")
        var bubble = false;
    eventType = eventType.toLowerCase();
    if (eventType.substr(0, 2) == "on")
        eventType = eventType.substr(2);
    if (window.addEventListener) { // Mozilla, Netscape, Firefox
        element.addEventListener(eventType, listener.bind(dragger_obj), bubble);
    } else if (window.attachEvent) { // IE
        element.attachEvent("on" + eventType, listener.bind(dragger_obj));
    }
}

Dragger.prototype.RemoveListener = function (element, eventType, listener,dragger_obj) {
    eventType = eventType.toLowerCase();
    if (eventType.substr(0, 2) == "on")
        eventType = eventType.substr(2);
    if (window.addEventListener) { // Mozilla, Netscape, Firefox
        element.removeEventListener(eventType, listener.bind(dragger_obj), false);
    } else if (window.attachEvent) { // IE
        element.detachEvent("on" + eventType, listener.bind(dragger_obj));
    }
}

Dragger.prototype.enableDragging = function (e) {
    if (!e) var e = window.event;
    //dont move for right click
    if (e.which && e.which == 3)
        return;
    else if (e.button && e.button == 2)
        return;

    this.DraggingBool = true;
    this.WindowCenter = new Point(e.pageX, e.pageY);
    this.AddListener(document.body, "mouseover", this.mouseMoveListener,this);
}

Dragger.prototype.disableDragging = function () {
    this.DraggingBool = false;
    this.RemoveListener(document.body, "mouseover", this.mouseMoveListener,this);
}

Dragger.prototype.mouseMoveListener = function (e) {
    if (!this.DraggingBool)
        return;
    if (!e) var e = window.event;
    e.preventDefault();
    var newLoc = new Point(e.pageX, e.pageY);
    var xDif = windowCenter.X - newLoc.X;
    var yDif = windowCenter.Y - newLoc.Y;
    this.Element.style.left = (this.Element.offsetLeft + xDif) + "px";
    this.Element.style.top = (this.Element.offsetTop + yDif) + "px";
    this.WindowCenter = newLoc;
}