关于js this指针和prototype的问题

Question

function Range(wrapper, settings) {
//初始化div
this.slider = document.createElement("div");
this.ranger = document.createElement("div");
//传入初始值
if (settings == null) {
settings = {
min : 0,
max : 100,
id : "gt"
};
}
with (this) {
min = settings.min;
max = settings.max;
value = settings.min;
slider.setAttribute("id", settings.id + "slider");
slider.setAttribute("className", "slider");
slider.innerHTML = "d";
ranger.setAttribute("id", settings.id + "ranger");
ranger.setAttribute("className", "ranger");
}
this.onChange = function() {
};
//绑定监听器
var _self = this;
this.slider.addEventListener("mousedown", function() {
_self._onMouseDown();
}, true);
//显示
this._initialize(wrapper);
} Range.prototype._valueChanged = function(x) {
if (x) {
slider.style.left = x + "px";
} else {
with (this) {
slider.style.left = Math.round((value - min) / (max - min)
* (ranger.offsetWidth - slider.offsetWidth))
+ "px";
}
}
this.onChange();
};
Range.prototype._initialize = function(wrapper) {
this.ranger.appendChild(this.slider);
wrapper.appendChild(this.ranger);
this._valueChanged();
};
Range.prototype._onMouseMove = function(e) {//为什么context是body
if (e.clientX <= this.ranger.offsetLeft) {
this.value = this.min;
this._valueChanged();
} else if (e.clientX >= this.ranger.offsetLeft) {
this.value = this.max;
this._valueChanged();
} else {
this.value = this.min
+ Math
.round((e.clientX - this.slider.offsetLeft)
/ (this.ranger.offsetWidth - this.slider.offsetWidth)
* (this.max - this.min));
this._valueChanged(e.clientX);
}
};
Range.prototype._onMouseUp = function() {
document.body.removeEventListener("mousemove", this._onMouseMove, true);
document.body.removeEventListener("mouseup", this._onMouseUp, true);
};
Range.prototype._onMouseDown = function() {
console.log(this);
document.body.addEventListener("mousemove", this._onMouseMove, true);
document.body.addEventListener("mouseup", this._onMouseUp, true);
};为什么加重那行 _onMouseMove中的this会是document.body 但是前面的_initialize中的this是Range对象啊只有这么几分了 求解啊 

Answer 1

Range.prototype._onMouseUp = function() {
var me = this;
document.body.removeEventListener("mousemove", me._onMouseMove, true);
document.body.removeEventListener("mouseup", me._onMouseUp, true);
};以此类推

Answer 2

Range.prototype._onMouseUp = function() {
var me = this;
document.body.removeEventListener("mousemove", function(){me._onMouseMove}, true);
document.body.removeEventListener("mouseup", function(){me._onMouseUp}, true);
};
上面写错了 这样

Answer 3

如果add的时候用匿名函数 remove的时候不管用了啊 顺便解释一下 为什么这个样子啊 不是在定义的时候决定context吗

Answer 4

因为你的传得方法要维护指定的上下文（也就是以个this）这个this是在方法运行的时候 动态映射的 
var o = {
     name:'is o'
     ,test:function(){alert(this.name);}
}o.test();var test1 = o.test;
var name = 'other name'
test1();看看2个运行的区别
所以绑定上下文的方法在传递的时候 一定要把  上下文一起传送document.body.removeEventListener("mousemove", function(){me._onMouseMove();}, true);