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 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
js 数组 fill() 填充方法
Nov 02 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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
域名查询代码公布
2006/10/09 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
python队列queue模块详解
2018/04/27 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python实现静态服务器
2019/09/05 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
材料会计岗位职责
2014/03/06 职场文书
乳制品整治工作方案
2014/05/29 职场文书
1000字打架检讨书
2014/11/03 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
居委会工作总结2015
2015/05/18 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python