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 相关文章推荐
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
React实现动效弹窗组件
Jun 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
MYSQL环境变量设置方法
2007/01/15 PHP
php 什么是PEAR?
2009/03/19 PHP
PHP 身份证号验证函数
2009/05/07 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
layui表格设计以及数据初始化详解
2019/10/26 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
python读取文件名并改名字的实例
2019/01/07 Python
Mac安装python3的方法步骤
2019/08/09 Python
想学画画?python满足你!
2020/12/24 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
如何做好总经理助理
2013/11/12 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
警察群众路线整改措施
2014/09/26 职场文书
领导参观欢迎词
2015/01/26 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL