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节点知识
Jan 31 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
图解js图片轮播效果
Dec 20 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
vue2中filter()的实现代码
Jul 09 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 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
一个程序下载的管理程序(四)
2006/10/09 PHP
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php汉字转拼音的示例
2014/02/27 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
详解一个小实例理解js原型和继承
2019/04/24 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python中操作mysql的pymysql模块详解
2016/09/13 Python
python 全文检索引擎详解
2017/04/25 Python
浅析使用Python操作文件
2017/07/31 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python 带时区的日期格式化操作
2020/10/23 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
幸福家庭事迹材料
2014/02/03 职场文书
收银员岗位职责
2014/02/07 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
地方课程教学计划
2015/01/19 职场文书
二手车转让协议书
2015/01/29 职场文书
大一学生个人总结
2015/02/15 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS