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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
React如何创建组件
Jun 27 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
详解Python的Django框架中的模版相关知识
2015/07/15 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
喷漆工的岗位职责
2014/03/17 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
建筑学专业自荐书
2014/07/09 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python