您的位置：首页 > Web前端 > JavaScript

JavaScript中的this用法详解（续）

2009-01-20 19:38 881 查看

上篇中介绍了JavaScript中this关键字的各种用法，已经相当想尽，只是有些凌乱，另外第6点中的代码如何解释也是个问题，俺研究了半天，就在此做个补充和总结吧~

归纳起来，JavaScript中的this用法有以下3种（详细用法参原文）：

1.在HTML元素事件属性或 CSS的expression表达式中inline方式使用this关键字——对应原文的1、7

2.在事件处理函数中使用this关键字——对应原文的2、3

其中可分为两种方式

(1)DOM方式——此种方式的结果是this指向窗口（window）对象

(2)DHTML方式——此种方式的结果是this指向div元素对象实例

3.在类定义中使用this关键字并在其内部函数或成员函数（主要是prototype产生）中使用——对应原文的4、5、8

需要说明的是，在函数也是个对象，因此需要区分变量定义和成员变量定义，如下：

var variableName;        //变量定义
//作用域：函数定义范围内
//使用方法：直接使用variableName
this.varName;            //成员变量定义
//作用域：函数对象定义范围内及其成员函数中
//使用方法：this.varName

以上归纳出的三类this的使用方法中，第一种比较容易理解，这里对原文中第6点提到的程序进行了测试和改进如下，以说明上述后两种使用方法：

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><title>Test "this"</title><mce:script type="text/javascript"><!--
function JSClass()
{
var varText = "func variable!";									//函数中的普通变量
this.m_Text = 'func member!';										//函数类的成员变量
this.m_Element = document.createElement('DIV');		//成员变量，创建一个div对象
this.m_Element.innerHTML = varText;  						//使用函数的普通变量
this.m_Element.attachEvent('onclick', this.ToString);	//给这个对象的事件连上处理函数
this.newElement = document.createElement('DIV');
this.newElement.innerHTML = "new element";
this.newElement.m_Text = "new element text!";			//给创建的对象建个成员
this.newElement.onclick = function()
{
alert(this.m_Text);												//指向div对象的成员
};
}

JSClass.prototype.Render = function()
{
document.body.appendChild(this.m_Element);				//把div对象挂在窗口上
document.body.appendChild(this.newElement);
}

JSClass.prototype.ToString = function()
{
alert(this.m_Text);													//指向窗口（window）对象
};

function initialize(){
var jc = new JSClass();
jc.Render();
jc.ToString();															//里面的this指向JSClass类的实例，里面有m_Text成员
}

// --></mce:script></head><body><mce:script type="text/javascript"><!--
initialize();

// --></mce:script></body></html>

上面的代码执行结果是：

页面加载时，弹出对话框，输出func member!

页面上显示

func variable!

new element

单击func variable时，弹出对话框，显示undefined

——因为这时toString函数里的this指针指向window

单击new element时，弹出对话框显示new element text!

——因为这时toString函数里的this指针指向div元素，而该元素已经定义了m_Text成员（this.newElement.m_Text = "new element text!"）

注：此代码及执行结果已在Opera及各IE内核的浏览器中测试通过，但不支持Firefox，应该是因为其中用到了没有定义的变量

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航