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 相关文章推荐
javascript 正则表达式相关应介绍
Nov 27 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
JS数组的常用10种方法详解
May 08 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 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
一个目录遍历函数
2006/10/09 PHP
自定义PHP分页函数
2006/10/09 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
python实现获取序列中最小的几个元素
2014/09/25 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python实现学生管理系统
2018/01/11 Python
python实现多线程网页下载器
2018/04/15 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
平面设计自荐信
2013/10/07 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
国庆阅兵观后感
2015/06/15 职场文书
职工食堂管理制度
2015/08/06 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android