一个对于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与DropDownList 区别分析
Jan 01 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 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
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php通过字符串调用函数示例
2014/03/02 PHP
跟我学Laravel之路由
2014/10/15 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
jQuery 选择器详解
2015/01/19 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
Python网络编程详解
2017/10/31 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python 处理图片像素点的实例
2019/01/08 Python
python集合常见运算案例解析
2019/10/17 Python
wxpython绘制圆角窗体
2019/11/18 Python
Python中url标签使用知识点总结
2020/01/16 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
运动会通讯稿150字
2014/02/15 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python