一个对于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 相关文章推荐
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 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分页函数
2006/07/08 PHP
深入PHP异步执行的详解
2013/06/03 PHP
PHP页面中文乱码分析
2013/10/29 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP实现的日历功能示例
2018/09/01 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
通过python3实现投票功能代码实例
2019/09/26 Python
python实现简单银行管理系统
2019/10/25 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Python接口自动化测试的实现
2020/08/28 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
个人股份合作协议书
2014/10/24 职场文书
换届选举主持词
2015/07/03 职场文书
详解python网络进程
2021/06/15 Python
Redis高可用集群redis-cluster详解
2022/03/20 Redis