一个对于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(JS)替换节点实现思路介绍
Apr 17 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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基于yii框架实现生成ICO图标
2015/11/13 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
实例解析php的数据类型
2018/10/24 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python字典排序的方法
2019/10/12 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
简单的辞职信范文
2014/01/18 职场文书
医药个人求职信范文
2014/01/29 职场文书
团日活动策划书
2014/02/01 职场文书
幼儿评语大全
2014/04/30 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
详细介绍python类及类的用法
2021/05/31 Python
python 离散点图画法的实现
2022/04/01 Python