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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
js生成随机数的方法实例
Oct 16 Javascript
BootStrap selectpicker
Jun 20 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
PHP新手上路(五)
2006/10/09 PHP
php5.2时间相差8小时
2007/01/15 PHP
php函数与传递参数实例分析
2014/11/15 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
简单的三步vuex入门
2018/05/20 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
python二分法实现实例
2013/11/21 Python
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python编程实现归并排序
2017/04/14 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
餐厅考勤管理制度
2014/01/28 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
理解python中装饰器的作用
2021/07/21 Python
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
移除Selenium中window.navigator.webdriver值
2022/06/10 Python