一个对于js this关键字的问题


Posted in Javascript onJanuary 09, 2007

所以拿出来与大家共勉:
先运行以下的js代码
<script>
foo = {
 'bar': function () {
 alert(this);
 },
 'toString': function () {
 return 'foo';
 }
};
foo.bar();//返回的是"foo"
(foo.bar)();//返回的是"[object Window]"
(foo.bar || null)();//返回的是"[object Window]"
bar = foo.bar; bar();//返回的是"[object Window]"
</script>

我对这里的代码的解释:

foo.bar(); //打印foo
//1. alert隐式调用toString方法,转型成字符串,在foo里重写了toString方法,因此为foo

(foo.bar)();//打印foo
//2. 这里的执行同上

(foo.bar || null)();
/*
3. 这里在IE6.0,Mozilla Firefox1.5.0.7和Opera9.0里有不同的效果,IE和Opera都是object,Mozilla的为foo
暂且不谈这几个的JS对||的解释方法,这与bar方法中的this还有和||运算符是有关的。经过||之后
这里的this已经不再为window了,this关键字的作用,如果按照C++的理解,应该为动态联编,而非静态联编,我们平常的例子中
<script>
(function (){
this.div = document.createElement("div");div.innerHTML="never-online";
document.body.appendChild(div);
 this.div.onclick = function(){
 alert(this.tagName);//这里的this就是div而非匿名函数中的this
 }
})()
</script>
也就是说,这里this的作用域不再是foo对象,而是一个全局的作用域。因此alert(this)相当于alert(window);
所以为object

BTW:有可能是||运算符是要把两个表达式的执行转换为全局范围的比较,所以在IE和Opera中,这里(foo.bar || null)返回的是一个全局引用,即:
 'bar': function () {
 alert(this);//这里的this已经为全局this,全局的this,即为window
 },
详细的,我将在篇末加入一段代码,以示说明
*/

bar = foo.bar; bar();//返回的是"[object Window]"
/*4. 
这里在IE6.0,Mozilla Firefox1.5.0.7和Opera9.0里都为相同的object,如果理解上面的执行,理解这句显然会比较简单
理由同上,这里把foo.bar的引用给到一个全局变量bar,而全局变量都隶属于window的引用,看下面代码:
var a = 'never-online';
alert(this.a); //never-online
alert(window.a); //never-online
如果你尝试着把bar = foo.bar; bar();改成以下代码,或许就可以明白了
foo.alert = foo.bar; foo.alert ();
这里的foo.alert依然为foo对象的引用,因此foo对象里的this,在这里依然有效,并没有成为window object
因为很明显的bar属性window,因此引用foo.bar里虽然有this,但是this引用为window
*/

再看看我们把这个例子改成这样:
<script>
foo = {
 'bar': function () {
 var oSelf = this;
 alert(this.toString);
 if (oSelf==window) {
 oSelf = foo;
 }
 alert(oSelf);
 },
 'toString': function () {
 return 'foo';
 }
};

window.toString = function () {
 alert("引用全局this --- window");
}

foo.bar();
(foo.bar)();
(foo.bar || null)();
bar = foo.bar; bar();
</script>

这样应该明白原因了。

从这个例中(foo.bar || null)(); 可以看出Mozilla的解释器会更“标准”一些,而Opera和IE的解释方法则与Mozilla的不一样。||运算符的作用,出现了不同的效果。同我上面所说的, 有可能是||运算符是要把两个表达式的执行转换为全局范围的比较,所以在IE和Opera中,这里(foo.bar || null)返回的是一个全局引用 

Javascript 相关文章推荐
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 #Javascript
根据分辩率调用不同的CSS.
Jan 08 #Javascript
如何用javascript判断录入的日期是否合法
Jan 08 #Javascript
[IE&amp;FireFox兼容]JS对select操作
Jan 07 #Javascript
javascript中的对象和数组的应用技巧
Jan 07 #Javascript
JavaScript For Beginners(转载)
Jan 05 #Javascript
JavaScript的目的分析
Jan 05 #Javascript
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Python 切分数组实例解析
2019/11/07 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
秋季运动会活动方案
2014/02/05 职场文书
2014信息公开实施方案
2014/02/22 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
课程设计感想范文
2015/08/11 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android