一个对于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 相关文章推荐
封装html的select标签的js操作实例
Jul 02 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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
PHP APC配置文件2套和参数详解
2014/06/11 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
Python如何实现守护进程的方法示例
2017/02/08 Python
Python对List中的元素排序的方法
2018/04/01 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
python开发入门——列表生成式
2020/09/03 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
求职者应聘的自我评价
2013/10/16 职场文书
前台文员岗位职责
2013/12/28 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
工厂会计员职责
2014/02/06 职场文书
班班通项目实施方案
2014/02/25 职场文书
工作会议方案
2014/05/21 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书