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 清除输入框中的数据
Apr 13 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
JavaScript实现京东快递单号查询
Nov 30 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
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python的中异常处理机制
2018/08/30 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python线程信号量semaphore使用解析
2019/11/30 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
python利用faker库批量生成测试数据
2020/10/15 Python
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
英语老师推荐信
2014/02/26 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
企业法人代表证明书
2015/06/18 职场文书
《少年闰土》教学反思
2016/02/18 职场文书