javascript中的this指针、函数、事件、对象

最新推荐文章于 2024-08-13 16:15:07 发布

oldseasoul

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签： javascript button function prototype div 工具

本文链接：https://blog.csdn.net/oldseasoul/article/details/1729384

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在浏览这篇文章之前，先让我们来看一下下面这段代码：

var toolbar_1 = new ToolBar();/**创建工具栏*/
toolbar_1.addButton(new Button("首页").setWidth("40px").addOnclickListener(new goto("main")).setActivse(true));/**往工具栏中添加按键*/
toolbar_1.addButton(new Button("日志"));/**往工具栏中添加按键*/
toolbar_1.addButton(new Button("相册"));/**往工具栏中添加按键*/

这一段代码如果是在java中，则平平无奇，事实上，如果放在javascript中呢:

随着ajax的出现，javascript又被注视起来，但要想使用ajax，大量的javascript自然是少不了的，javascript代码一多，如果按传统的写法，则不容易组织代码，如果我们在javascript中使用面向对象的思想，本人认为是相当不错的。

javascript已经提供了一些方法来供我们模拟对象编程，但应该是由于javascript天生带有的局限，实现起来有些麻烦，特别是对于this这个东西。

好了，废话不多说，先开始看代码吧

注：本篇中使用的CSS如下：
.activse{
background-color:#E89B28;
width:1%;
}
.unactivse{
background-color:#666666;
width:1%;
}
.mouseover{
background-color:#E7C698;
width:1%;
}

/***********************************************************************/
/*
*按键风格类
*/

/**模拟构造函数*/
function ButtonStyle(value){
/**节点*/
this.this_node = this.createNode(value);
/**激活状态*/
this.activse = false;

}
/**创建按键节点，value为按键名*/
ButtonStyle.prototype.createNode = function(value){
/**创建一个div元素*/
var top = document.createElement("div");
/**指定这个div元素的样式*/
top.className = "unactivse";
/**创建文本节点*/
var text = document.createTextNode(value);
/**将文本节点加入div元素中*/
top.appendChild(text);

return top;
}
ButtonStyle.prototype.getNode = function(){
return this.this_node;
}
关于上面的代码，首先是prototype属性，本人认为这是javascript中相当强大的一个东西。
对于对象的prototype属性的说明，JScript手册上如是说：
所有 JScript 内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法)，
但该对象不能被赋予不同的原型。然而，用户定义的对象可以被赋给新的原型。
这里不对prototype进行讨论，不明白的朋友可以看http://www.webjx.com/htmldata/2005-10-15/1129345082.html
另一个是需要显示指定this,如this.this_node、this.activse，注意一定要显示指定this，否则会报错
/***********************************************************************/
/***********************************************************************/
<body>
<div id="bar"></div>
<script type="text/javascript">
var bar = document.getElementById("bar");
bar.appendChild(new ButtonStyle("button1").getNode());
</script>
</body>
在html中使用上面这段代码，就可以看到一个简单的button1了，当然，如果你喜欢，也可以不用创建元素div，而改
用元素input等。
/***********************************************************************/

现在我们开始加入事件

首先加入鼠标点击处理函数
ButtonStyle.prototype.onclick = function(){
this.this_node.className = "activse";
this.activse = true;
}
至于如何将这个处理函数指定给this.this_node呢？一般来说，我们首先想到在“构造函数：ButtonStyle”中加入如下代码：
this.this_node.onclick = this.onclick;

新的构造函数如下：
function ButtonStyle(value){
/**节点*/
this.this_node = this.createNode(value);
/**激活状态*/
this.activse = false;
/**指定节点的鼠标点击处理函数*/
this.this_node.onclick = this.onclick;
}

很遗憾，当我们满怀欢喜的点击时，JScript却报错：'this.this_node' 为空或不是对象
为什么会出现这种情况呢？问题出在this这里，我们给出的函数是this.onclick，
这就导致ButtonStyle.prototype.onclick = function(){
this.this_node.className = "activse";
this.activse = true;}
执行时的this指针是this_node(onclick是在this_node中被触发的，故this指向this_node)
,而不是指向ButtonStyle本身，这就导致了“this.this_node为空或不是对象”这个错误,
想像一下,它访问的是this.this_node.this_node这个对象，很明显这个对象不存在。
至于解决方法，本人是这样子做的：
function ButtonStyle(value){
/**节点*/
this.this_node = this.createNode(value);
/**激活状态*/
this.activse = false;

/**注意这里*/
this.this_node.pButtonStyle = this;
/**指定节点的鼠标点击处理函数*/
this.this_node.onclick = function(){this.pButtonStyle.onclick();};
}
在这里，为this.this_node指定一个指向自身的属性pButtonStyle，然后使用pButtonStyle调用
ButtonStyle中的方法onclick 这样就不会出现“'this.this_node' 为空或不是对象”这种错误了，
但我觉得这种办法并没有实际解决问题，而是绕过这个问题。如果各位大大有更好的处理方案，请告之小弟，
在下不胜感激。

/*******************************************************************************/
好了，现在我们继续创建一个Button类来对ButtonStyle进行包装
/*
* 按键类
*/
function Button(name){
/**onclick函数数组*/
this.onclick_list = new Array(0);
this.buttonName=name;
/**该Button的风格类*/
this.buttonstyle = new ButtonStyle(name);
this.onclick_list.push(this.buttonstyle);

/**消息类*/
this.eventObject = this;

/**这里和前面的做法一样*/
this.buttonstyle.getNode().pButtonThis = this;
this.buttonstyle.getNode().onclick = function(){this.pButtonThis.onclick();};
};
/**添加onclick事件监听者，注意这里将要求传入的pObject对象实现onclick函数*/
Button.prototype.addOnclickListener = function(pObject){
this.onclick_list.push(pObject);
return this;
};

Button.prototype.onclick = function(){
/**循环onclick函数数组，依次执行onclick函数*/
for(var i=0;i<this.onclick_list.length;i++){
this.onclick_list[i].onclick(this.eventObject);
}
}
Button.prototype.getNode = function(){
return this.buttonstyle.getNode();
}

html中
/***********************************************************************/
<script type="text/javascript">
function goto(index){
this.index = index;
this.onclick = function(eventObject){
alert(eventObject.target.name + this.index);
}
}
</script>
<body>
<div id="bar"></div>
<script type="text/javascript">
var bar = document.getElementById("bar");
bar.appendChild(new ButtonStyle("button1").addOnclickListener(new goto(1)).getNode());
bar.appendChild(new ButtonStyle("button2").addOnclickListener(new goto(2)).getNode());
bar.appendChild(new ButtonStyle("button3").addOnclickListener(new goto(31)).getNode());
</script>
</body>
/***********************************************************************/

关于javascript中的this指针、函数、事件、对象，在本篇中就写到这里吧
本人新手，刚接触web编程没几个月，有不正确的地方请留言，并多多包函哈：）

另抱怨下，JScript调试真TMD的变态。。。。。。

标题长才有人点，内容多却多半没人能看完。。。。至少本人就是这样。。。呵呵

oldseasoul

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中的this指针、函数、事件、对象

在浏览这篇文章之前，先让我们来看一下下面这段代码： var toolbar_1 = new ToolBar();/**创建工具栏*/ toolbar_1.addButton(new Button("首页").setWidth("40px").addOnclickListener(new goto("main")).setActivse(true));/**往工具栏中添加按键*
复制链接

扫一扫

专栏目录