[100分][新手问题] 帮我javascript面向对象中关于this的一个小问题，不明白！！
<%@ Page Language= "C# " AutoEventWireup= "true " CodeBehind= "WebForm1.aspx.cs " Inherits= "MapEditer.WebForm1 " %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml " >
<head runat= "server ">
<title> Untitled Page </title>
<script type= "text/javascript ">
//
DragObject = function (object)
{
//
this._object = object;
this._isStartDraging = false;
// Set Event
this._object.onmousedown = this.dragStart;
};
// dragStart
DragObject.prototype.dragStart = function()
{
alert(this._isStartDraging); // 为什么这里this._isStartDraging是 'undefined ';
};
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div id= "div1 " style= "background-color: Green; width: 100px; height: 100px; ">
11111111111
</div>
<div id= "div2 " style= "background-color: red; width: 50px; height: 50px; ">
22222222222
</div>
</form>
<script type= "text/javascript ">
var drag1 = new DragObject(document.getElementById( 'div1 '));
var drag2 = new DragObject(document.getElementById( 'div2 '));
</script>
</body>
</html>
[解决办法]
这里的this是指DIV
[解决办法]
<script type= "text/javascript ">
//
DragObject = function (object)
{
//
this._object = object;
this._isStartDraging = false;
object.dragObject = this; //给object控件加个对 对象的引用
// Set Event
this._object.onmousedown = this.dragStart;
};
// dragStart
DragObject.prototype.dragStart = function()
{
alert(this.dragObject._isStartDraging); // 这里的this指div,即之前传入的object
};
</script>
[解决办法]
var drag1 = new DragObject(document.getElementById( 'div1 '));
var drag2 = new DragObject(document.getElementById( 'div2 '));
这两行调用了函数DragObject，分别把div1和div2作为参数
所以，所有在函数中的this表示的就是带进去的这个参数
DragObject = function (object)
{
//
this._object = object;
this._isStartDraging = false; //这里给this(也就是div控件)加了2个属性
// Set Event
this._object.onmousedown = this.dragStart; //这里给它加了事件
};
在javascript里加属性和事件可以直接用赋值号
[解决办法]
this._object.onmousedown = function (e) {
this.dragStart(e);
};
修改成这个即可。
[解决办法]
<html xmlns= "http://www.w3.org/1999/xhtml " >
<head runat= "server ">
<title> Untitled Page </title>
<script type= "text/javascript ">
//
DragObject = function (object)
{
//
this._object = object;
this._isStartDraging = false;
// Set Event
this._object.onmousedown = delegate(this,this.dragStart);
};
function delegate(obj,fun){
var de = function()
{
fun.call(obj);
}
return de;
}
// dragStart
DragObject.prototype.dragStart = function()
{
alert(this._isStartDraging); // 为什么这里this._isStartDraging是 'undefined ';
};
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div id= "div1 " style= "background-color: Green; width: 100px; height: 100px; ">
11111111111
</div>
<div id= "div2 " style= "background-color: red; width: 50px; height: 50px; ">
22222222222
</div>
</form>
<script type= "text/javascript ">
var drag1 = new DragObject(document.getElementById( 'div1 '));
drag1.dragStart();
var drag2 = new DragObject(document.getElementById( 'div2 '));
</script>
</body>
</html>
