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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
怎样去阅读一份php源代码
2009/08/21 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
python读取xlsx的方法
2018/12/25 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python读写文件基础知识点
2019/06/10 Python
Django url 路由匹配过程详解
2021/01/22 Python
自我鉴定范文200字
2013/10/02 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
优秀校长事迹材料
2014/12/24 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
2015年教师节主持词
2015/07/03 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS