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 相关文章推荐
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
vue+django实现下载文件的示例
Mar 24 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
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
Javascript 二维数组
2009/11/26 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
简单谈谈json跨域
2016/03/13 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
Python变量作用范围实例分析
2015/07/07 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
外贸销售员求职的自我评价
2013/11/23 职场文书
高中地理教学反思
2014/01/29 职场文书
幼儿教师国培感言
2014/02/19 职场文书
小学教学随笔感言
2014/02/26 职场文书
年会搞笑主持词
2014/03/27 职场文书
优秀教师先进材料
2014/12/16 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
暑期家教宣传单
2015/07/14 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android