JavaScript中的this实例分析


Posted in Javascript onApril 28, 2011

以人为镜,可知得失,看来这句话是很有道理的。

Demo 1 :
如果是一个全局的function,则this相当于window对象,在function里定义的各种属性或者方法可以在function外部访问到,前提是这个function需要被调用。

<script type="text/javascript"> 
//在function中使用this 
function a() { 
if (this == window) { 
alert("this == window"); 
this.fieldA = "I'm a field"; 
this.methodA = function() { 
alert("I'm a function "); 
} 
} 
} 
a(); //如果不调用a方法,则里面定义的属性会取不到 
alert(window.fieldA); 
methodA(); 
</script>

Demo 2 :
如果使用new的方式去实例化一个对象,则this不等于window对象,this指向function a的实例
<script type="text/javascript"> 
//在function中使用this之二 
function a() { 
if (this == window) { 
alert("this == window"); 
} 
else { 
alert("this != window"); 
} 
this.fieldA = "I'm a field"; 
} 
var b = new a(); 
alert(b.fieldA); 
</script>

Demo 3 :
使用prototype扩展方法可以使用this获取到源对象的实例,私有字段无法通过原型链获取
<script type="text/javascript"> 
//在function中使用this之三 
function a() { 
this.fieldA = "I'm a field"; 
var privateFieldA = "I'm a var"; 
} 
a.prototype.ExtendMethod = function(str) { 
alert(str + " : " + this.fieldA); 
alert(privateFieldA); //出错 
}; 
var b = new a(); 
b.ExtendMethod("From prototype"); 
</script>

Demo 4 :
不管是直接引用function,还是实例化一个function,其返回的闭包函数里的this都是指向window
<script type="text/javascript"> 
//在function中使用this之四 
function a() { 
alert(this == window); 
var that = this; 
var func = function() { 
alert(this == window); 
alert(that); 
}; 
return func; 
} 
var b = a(); 
b(); 
var c = new a(); 
c(); 
</script>

Demo 5 :
在HTML中使用this,一般代表该元素本身
<div onclick="test(this)" id="div">Click Me</div> 
<script type="text/javascript"> 
function test(obj) { 
alert(obj); 
} 
</script>

Demo 6 :
在IE和火狐(Chrome)下注册事件,this分别指向window和元素本身
<div id="div">Click Me</div> 
<script type="text/javascript"> 
var div = document.getElementById("div"); 
if (div.attachEvent) { 
div.attachEvent("onclick", function() { 
alert(this == window); 
var e = event; 
alert(e.srcElement == this); 
}); 
} 
if (div.addEventListener) { 
div.addEventListener("click", function(e) { 
alert(this == window); 
e = e; 
alert(e.target == this); 
}, false); 
} 
</script>

以上就是我总结的this在javascript中的不同应用场景,可能还有其他的情况不一而足,以后发现了会补充进来。
Javascript 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
js动态设置div的值下例子
Oct 29 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
关于JS中prototype的理解
Sep 07 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
js实现登录与注册界面
Nov 01 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 #Javascript
JavaScript中获取未知对象属性的代码
Apr 27 #Javascript
JavaScript之HTMLCollection接口代码
Apr 27 #Javascript
利用jQuery操作对象数组的实现代码
Apr 27 #Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 #Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 #Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 #Javascript
You might like
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php的curl封装类用法实例
2014/11/07 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
围观tangram js库
2010/12/28 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
请解释在new与override的区别
2012/10/29 面试题
运动会稿件100字
2014/02/21 职场文书
安全生产实施方案
2014/02/23 职场文书
小学生期末评语
2014/04/21 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
小学数学教学反思范文
2016/02/16 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android