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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
js自定义Tab选项卡效果
2017/06/05 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
js实现聊天对话框
2020/02/08 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python入门篇之字典
2014/10/17 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
电子商务个人职业生涯规划范文
2014/02/12 职场文书
绿色环保演讲稿
2014/05/10 职场文书
健康证明
2015/06/19 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
Python简易开发之制作计算器
2022/04/28 Python