JAVASCRIPT  THIS详解 面向对象


Posted in Javascript onMarch 25, 2009

虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的。JavaScript也提供了这个this关键字,不过用起来就比经典OO语言中要"混乱"的多了。
下面就来看看,在JavaScript中各种this的使用方法有什么混乱之处?
1、在HTML元素事件属性中inline方式使用this关键字:
<div onclick="
// 可以在里面使用this
">division element</div>
我们一般比较常用的方法是在此使用:javascirpt: EventHandler(this),这样的形式。不过这里其实可以写任何合法的JavaScript语句,要是高兴在此定义个类也可以(不过将会是个内部类)。这里的原理是脚本引擎生成了一个div实例对象的匿名成员方法,而onclick指向这个方法。
2、用DOM方式在事件处理函数中使用this关键字:
<div id="elmtDiv">division element</div>
<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关键字:
<div id="elmtDiv">division element</div>
<script language="javascript">
var div = document.getElementById('elmtDiv');
div.onclick = function()
{
// 在此使用this
};
</script>
这里的this关键字指示的内容是div元素对象实例,在脚本中使用DHTML方式直接为div.onclick赋值一个EventHandler的方法,等于为div对象实例添加一个成员方法。这种方式和第一种方法的区别是,第一种方法是使用HTML方式,而这里是DHTML方式,后者脚本解析引擎不会再生成匿名方法。
4、类定义中使用this关键字:
function JSClass()
{
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关键字:
Function.prototype.GetName = function()
{
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关键字使用:
function JSClass()
{
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关键字:
<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看作和1中的一样就可以了,它也是指代div元素对象实例本身。
8、函数中的内部函数中使用this关键字:
function OuterFoo()
{
this.Name = 'Outer Name';
function InnerFoo()
{
var Name = 'Inner Name';
alert(Name + ', ' + this.Name);
}
return InnerFoo;
}
OuterFoo()();
运行结果显示是:"Inner Name, Outer Name"。按我们在2中的讲解,这里的结果如果是"Inner Name, undefined"似乎更合理些吧?但是正确的结果确实是前者,这是由于JavaScript变量作用域的问题决定的 详细了解推荐参看"原来JScript中的关键字'var'还是有文章的"一文及回复

Javascript 相关文章推荐
经验几则 推荐
Sep 05 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
javascript 打印页面代码
Mar 24 #Javascript
jQuery 全选效果实现代码
Mar 23 #Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 #Javascript
javascript 对象定义方法 简单易学
Mar 22 #Javascript
JS array 数组详解
Mar 22 #Javascript
javascript multibox 全选
Mar 22 #Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 #Javascript
You might like
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
原生js获取left值和top值的三种方法
2017/08/02 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Python @property使用方法解析
2019/09/17 Python
python如何将两个txt文件内容合并
2019/10/18 Python
使用Python pip怎么升级pip
2020/08/11 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
四议两公开实施方案
2014/03/28 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
保护水资源的标语
2014/06/17 职场文书
盲山观后感
2015/06/11 职场文书
百家讲坛观后感
2015/06/12 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
《小小的船》教学反思
2016/02/18 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
Python List remove()实例用法详解
2021/08/02 Python