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 live
May 15 Javascript
javascript preload&amp;lazy load
May 13 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
vue组件vue-esign实现电子签名
Apr 21 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
python爬虫实例详解
2018/06/19 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
什么是规则表达式
2012/05/03 面试题
关于环保的建议书400字
2014/03/12 职场文书
演讲比赛策划方案
2014/06/11 职场文书
初中教师个人总结
2015/02/10 职场文书
刑事辩护词范文
2015/05/21 职场文书
仙境之桥观后感
2015/06/16 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书