- 浏览: 229344 次
- 性别:
- 来自: beijing
文章分类
在面向对象编程语言中,对于this关键字我们是非常熟悉的。比如C++、C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的。JavaScript也提供了这个this关键字,不过用起来就比经典OO语言中要"混乱"的多了。
下面就来看看,在JavaScript中各种this的使用方法有什么混乱之处?
1、在HTML元素事件属性中inline方式使用this关键字:
// 可以在里面使用this
">division element</div>
我们一般比较常用的方法是在此使用:javascirpt: EventHandler(this),这样的形式。不过这里其实可以写任何合法的JavaScript语句,要是高兴在此定义个类也可以(不过将会是个内部类)。这里的原理是脚本引擎生成了一个div实例对象的匿名成员方法,而onclick指向这个方法。
2、用DOM方式在事件处理函数中使用this关键字:
<script language="javascript">
var div = document.getElementById('elmtDiv');
div.attachEvent('onclick', EventHandler);
function EventHandler()
{
// 在此使用this
}
</script>
这时的EventHandler()方法中的this关键字,指示的对象是IE的window对象。这是因为EventHandler只是一个普通的函数,对于attachEvent后,脚本引擎对它的调用和div对象本身没有任何的关系。同时你可以再看看EventHandler的caller属性,它是等于null的。如果我们要在这个方法中获得div对象引用,应该使用:this.event.srcElement。
3、用DHTML方式在事件处理函数中使用this关键字:
<script language="javascript">
var div = document.getElementById('elmtDiv');
div.onclick = function()
{
// 在此使用this
};
</script>
这里的this关键字指示的内容是div元素对象实例,在脚本中使用DHTML方式直接为div.onclick赋值一个EventHandler的方法,等于为div对象实例添加一个成员方法。这种方式和第一种方法的区别是,第一种方法是使用HTML方式,而这里是DHTML方式,后者脚本解析引擎不会再生成匿名方法。
4、类定义中使用this关键字:
{
var myName = 'jsclass';
this.m_Name = 'JSClass';
}
JSClass.prototype.ToString = function()
{
alert(myName + ', ' + this.m_Name);
};
var jc = new JSClass();
jc.ToString();
这是JavaScript模拟类定义中对this的使用,这个和其它的OO语言中的情况非常的相识。但是这里要求成员属性和方法必须使用this关键字来引用,运行上面的程序会被告知myName未定义。
5、为脚本引擎内部对象添加原形方法中的this关键字:
{
var fnName = this.toString();
fnName = fnName.substr(0, fnName.indexOf('('));
fnName = fnName.replace(/^function/, '');
return fnName.replace(/(^\s+)|(\s+$)/g, '');
}
function foo(){}
alert(foo.GetName());
这里的this指代的是被添加原形的类的实例,和4中类定义有些相似,没有什么太特别的地方。
6、结合2&4,说一个比较迷惑的this关键字使用:
{
this.m_Text = 'division element';
this.m_Element = document.createElement('DIV');
this.m_Element.innerHTML = this.m_Text;
this.m_Element.attachEvent('onclick', this.ToString);
}
JSClass.prototype.Render = function()
{
document.body.appendChild(this.m_Element);
}
JSClass.prototype.ToString = function()
{
alert(this.m_Text);
};
var jc = new JSClass();
jc.Render();
jc.ToString();
我就说说结果,页面运行后会显示:"division element",确定后点击文字"division element",将会显示:"undefined"。
7、CSS的expression表达式中使用this关键字:
<tr>
<td>
<div style="width: expression(this.parentElement.width);
height: expression(this.parentElement.height);">
division element</div>
</td>
</tr>
</table>
这里的this看作和1中的一样就可以了,它也是指代div元素对象实例本身。
8、函数中的内部函数中使用this关键字:
{
this.Name = 'Outer Name';
function InnerFoo()
{
var Name = 'Inner Name';
alert(Name + ', ' + this.Name);
}
return InnerFoo;
}
OuterFoo()();
发表评论
-
重写openalyers 的方法,加载天地图瓦片数据
2012-06-20 09:16 6350将TiandituLayer 加载到OpenLayers.js ... -
ArcGIS客户端API中加载大量数据的几种解决办法
2012-06-20 09:18 3063原文地址:http://blog.newnaw.com/?p= ... -
table_border.html
2011-01-21 17:07 927<html> <head> ... -
jquery 菜单效果一个
2010-09-26 16:02 1161<html> <head> ... -
ExtJs layout
2010-07-20 15:20 1337extjs的容器组件都可以设置它的显示风格,它的有效值有 ab ... -
验证验证
2010-05-28 15:40 922匹配中文字符的正则表 ... -
jquery validate.js x学习
2010-04-12 16:05 1254学习了 jquery validate.js ... -
CSS 定义鼠标的样式
2009-12-17 15:33 1689CSS允许你控制网页外观 ... -
学习AJAX框架后的理解
2009-11-25 14:20 1003现在很多的AJAX框架,表现的是很优秀恩 不大可能一下就 ... -
jquey中的$符号与其他框架的$的冲突解决方法
2009-11-25 12:39 1013Jquery 中的$(id)方法来获取一个元素,或者其他的一些 ... -
IE6下div不能将select框遮住
2009-11-24 13:35 1934<Fieldset style="border ... -
DHTMLX框架AJAX
2009-11-20 17:28 1376在项目中用了下Dhtml的Grid,一直都没有仔细的 ... -
关于页面的传值
2009-11-20 10:46 1106有两个页面,父页面与子页面,父页面要传一个参数给子页面, ... -
jQuery 的CSS属性
2009-11-15 16:06 6610CSS属性的设定, 可以用预先定义的 CSS样式,使用$ ... -
jQuery 理解
2009-11-15 14:10 1176jquery this的含义 在触发事件的时候,是指向原生态 ... -
jquery理解
2009-11-11 10:24 1094下载好后引用这个jQuery库就可以了我们的jQuery开发了 ... -
内存泄露与闭包
2009-11-05 17:34 1617JavaScript 编程来说,内存泄露是一个很潜在的危险,主 ... -
JavaScript的跨域问题
2009-11-05 17:03 1610可能是经过的项目少,还没有经历过跨域问题,于是收集点跨 ... -
使用dtmlxGrid 未知运行的错误。与显示不出来的情况
2009-09-22 16:05 951ie4,ie6,ie7 环境下会出现这个错误, 原因 gri ... -
javaScript 中 call 函数与apply的用法说明
2009-09-11 10:44 1504call 的用法 javaScript 中的 call ...
相关推荐
本文实例讲述了javaScript中this用法。分享给大家供大家参考。具体分析如下: 之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解。我后来也是看了许多别人写的文章,才理解过来的。现在把别人...
### JavaScript中的`this`用法详解 在JavaScript中,`this`关键字的使用十分常见,但也是最容易引起混淆的部分之一。正确理解`this`的工作原理对于编写高效、可靠的代码至关重要。本文将深入探讨`this`在不同上下...
总结来说,在javascript中,onclick(this)的用法主要是将当前被点击的元素作为上下文对象传递给事件处理函数。在事件处理函数内部,我们可以访问到这个对象的所有属性和方法,从而实现对事件的处理和响应。通过这种...
本文将结合实例详细介绍JavaScript中`this`的用法,并分析在各种调用场景下的表现和技巧。 首先,`this`关键字在JavaScript中的含义不是固定的,它的指向是在函数执行时动态决定的,而不是在函数定义时确定。`this`...
JavaScript中的`this`关键字是一个非常重要的概念,它用于在函数或对象中引用当前上下文的对象。在不同的场景下,`this`的值会有所变化...通过这些实例和解释,希望能帮助你更好地理解和掌握JavaScript中的`this`用法。
### JavaScript 中 `this` 的用法详解 #### 一、引言 在 JavaScript 开发过程中,`this` 关键字的使用常常令开发者感到困惑。这是因为 `this` 的值并不是静态确定的,而是取决于函数调用的方式。了解 `this` 的...
在JavaScript中,`this`关键字是一个非常重要的概念,但也是新手开发者经常困惑的地方。`this`的值在运行时才会确定,并且根据函数调用的方式不同而有所不同。以下是关于`this`用法的详细说明: 一、常见的`this`...
本篇将深入探讨JavaScript中的this用法,帮助你更好地掌握这个核心概念。 1. **函数调用方式与this绑定** - **默认绑定**:在全局环境中,this被绑定到全局对象,在浏览器中通常是window。例如: ```javascript ...
在本文中,我们将深入探讨`this`在JavaScript中的工作原理,以及在不同场景下的用法。 1. **函数调用方式** 在函数调用中,`this`的值取决于函数被调用的方式。如果函数是作为对象的方法调用,`this`将指向调用该...
在JavaScript中,`this`关键字是一个非常重要的概念,它指的是当前执行上下文中的对象。`this`的值取决于函数的调用方式,而不是定义方式。下面我们将详细探讨在不同场景下`this`的用法。 1. **全局作用域中调用...
JavaScript中的`this`关键字是程序设计中的一个核心概念,它在不同上下文环境中有着不同的指向,这使得理解和掌握`this`的用法至关重要。在JavaScript中,`this`的值取决于函数调用的方式,而不是定义的方式,这为...
应该是最常用的吧,函数中调用一个this,这里其实就是全局变量 var value="0"; function mei(){ var value="1"; console.log(this.value); //0 console.log(value); //1 } mei(); 输出0就是因为this指向的是全局...
在《javaScript语言精粹》这本书中,把 this 出现的场景分为四类,简单的说就是: 有对象就指向调用对象 没调用对象就指向全局对象 用new构造就指向新对象 通过 apply 或 call 或 bind 来改变 this 的所指。 1) 函数...
### this的用法以及改变this指向 #### 为什么学习this? 在JavaScript中,`this`关键字的使用极为广泛。理解并掌握`this`的工作机制对于提高编程能力至关重要: 1. **阅读代码的能力**:不了解`this`的工作原理,...
通过对不同场景下`this`的用法进行分析,我们可以更好地控制代码中的对象引用,从而编写出更清晰、更易于维护的程序。在实际开发中,应根据需求灵活运用`call`、`apply`和箭头函数来处理`this`的指向问题。
本文实例讲述了javascript中this的用法。分享给大家供大家参考,具体如下: 实践一:this在点击等事件中的指向 html结构: <button id='btn'>click me</button> javascript结构: var btn = document...