一个对于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 相关文章推荐
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery实现抽奖功能
Oct 22 jQuery
如何用JavaScript实现一个数组惰性求值库
May 05 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 split()函数的用法详解
2013/06/05 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
深入理解python对json的操作总结
2017/01/05 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python判断自身是否正在运行的方法
2019/08/08 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
实习单位推荐信范文
2013/11/27 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
校园安全教育广播稿
2014/02/17 职场文书
大学生求职信例文
2014/06/29 职场文书
法人代表证明书格式
2014/10/01 职场文书
庆祝国庆节标语
2014/10/09 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
电影复兴之路观后感
2015/06/02 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
python编程项目中线上问题排查与解决
2021/11/01 Python
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Go 内联优化让程序员爱不释手
2022/06/21 Golang