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

js中this的使用

2014-08-15 21:04 381 查看
this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。

1、在HTML元素事件属性中inline方式使用this关键字。

<div onclick="lookfor(this)">division element</div>

我们一般比较常用的方法是在此使用:javascirpt: EventHandler(this),这样的形式。不过这里其实可以写任何合法的JavaScript语句,要是高兴在此定义个类也可以(不过将会是个内部类)。这里的原理是脚本引擎生成了一个div实例对象的匿名成员方法,而onclick指向这个方法。

2、用DOM方式在事件处理函数中使用this关键字。

<div id="elmtDiv">division element</div>

<script language="javascript">

//根据获取id获取当前元素

var div = document.getElementById('elmtDiv');

div.attachEvent('onclick', EventHandler);

function EventHandler()

{

this....

一些对this进行操作。我们要在这个方法中获得div对象引用,应该使用:this.event.srcElement。

}

</script>

3、用DHTML方式在事件处理函数中使用this关键字。

<div id="elmtDiv">division element</div>

<script language="javascript">

var div = document.getElementById('elmtDiv');

div.onclick = function()

{

// 在此使用this

};

</script>

4、类定义中使用this关键字。

function JSClass()

{

var myName = 'jsclass';

//这个this指向当前类添加了一个变量

this.m_Name = 'JSClass';

}

5、为脚本引擎内部对象添加原形方法中的this关键字。

Function.prototype.GetName = function()

{

var fnName = this.toString();

}

6、CSS的expression表达式中使用this关键字。

<table width="100" height="100">

<tr>

<td>

<div style="width: expression(this.parentElement.width);

height: expression(this.parentElement.height);">

division element</div>

</td>

</tr>

</table>

这里的this指向现在的div本身。

这里有一个例子很好的诠释了JavaScript 高级程序设计里this的描述。

this对象是在运行时基于函数的执行环境绑定的:

1、在全局函数中,this 等于 window;

2、在函数被作为某个对象的方法调用时,this等于那个对象;

3、匿名函数的执行环境具有全局性,this对象通常指向window。

var name = "the window";

var obj = {

name : "xiong zheng xiang",

getNameFunc : function(){

return function(){

return this.name;

}

}

};

alert(obj.getNameFunc()()); //"the window"

这是因为执行返回的匿名函数时,this动态绑定执行环境,这个时候this就是window对象了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: