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第一天(Jquery学习笔记)
May 11 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
简单实现js拖拽效果
Jul 25 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
vue计算属性及使用详解
Apr 02 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 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
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
JS实现图片切换效果
2018/11/17 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
出纳员岗位职责
2014/03/13 职场文书
葬礼司仪主持词
2014/03/31 职场文书
低碳环保标语
2014/06/12 职场文书
接待员岗位职责
2015/02/13 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
靠谱的活动总结
2019/04/16 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA