一个对于js this关键字的问题

所以拿出来与大家共勉：
先运行以下的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)返回的是一个全局引用

赞 (0)

相关推荐

  • js中的this关键字详解

    this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, 复制代码 代码如下: function test(){ this.x = 1; } 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 下面分四种情况,详细讨论this的用法. 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global. 请看下面这段代码,它的运行结果是1.

  • JavaScript中的this使用详解

    其实this是一个老生常谈的问题了.关于this的文章非常多,其实我本以为自己早弄明白了它,不过昨天在做项目的过程中,还是出现了一丝疑惑,想到大概之前在JavaScript weekly里收藏待看的一篇详解this的文章(后有链接,也附上了稀土上的中文译文)和另一篇一位前辈推荐的文章,就把它们看了看,对this的认识确实提升了一些. JavaScript 中的'this'是动态的,它在函数运行时被确定而非在函数声明时被确定.所有的函数都可以调用'this',这无关于该函数是否属于某个对象.关于t

  • 关于js里的this关键字的理解

    this关键字在c++,java中都提供了这个关键字,在刚开始学习时觉得有难度,但是只要理解了,用起来就方便多了,下面通过本篇文章给大家详解js里this关键字的理解. 关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:knockout,有时候不明白为什么不直接使用this,而要把 this 作为参数传入. 接下来你谈谈我对它的理解,也作为一个笔记,

  • JavaScript中this关键字使用方法详解

    在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的.JavaScript也提供了这个this关键字,不过用起来就比经典OO语言中要"混乱"的多了. 下面就来看看,在JavaScript中各种this的使用方法有什么混乱之处? 1.在HTML元素事件属性中inline方式使用this关键字: <div onclick="  // 可以在里面使用

  • Javascript this关键字使用分析

    关于js中的this关键字的文章已经不少了,我看过几篇,我写这篇文章的目的是从实例中分析出this的工作原理,希望对大家有所帮助. 一.基本的: 复制代码 代码如下: function doSomething(){ alert(this.id); } alert(window.doSomething);//证明了doSomething是属于window的 doSomething();//undefined window.onload = function(){ document.getEleme

  • 一个对于js this关键字的问题

    所以拿出来与大家共勉: 先运行以下的js代码 <script> foo = {  'bar': function () {  alert(this);  },  'toString': function () {  return 'foo';  } }; foo.bar();//返回的是"foo" (foo.bar)();//返回的是"[object Window]" (foo.bar || null)();//返回的是"[object Win

  • Javascript实现一个简单的输入关键字添加标签效果实例

    Javascript实现一个简单的输入关键字添加标签效果实例

    本文主要给大家介绍的是关于js输入关键字添加标签效果的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 实现功能: 输入关键字加空格键添加tag标签 按Backspace键删除一个标签 输入关键字后,鼠标失去焦点添加tag标签 keyWord.init方法初始化方法 展示效果: demo演示地址 示例代码 <style> .block { display:flex; flex-direction:row; align-items:center; width:500px; height:

  • 使用requirejs模块化开发多页面一个入口js的使用方式

    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多.理论这样其实也没什么,但是到后面用grunt进行合并压缩就会有很多入口js,虽然这个入口js都把配置的模块内容都压缩到里面了,但是各个入口合并压缩后的文件中其实都有很多重合的代码,所以考虑到这个就想到把所以的入口文件都统一了,使用一个,到时候用grunt合并压缩也只有这么一个入口文件,也很方便. 实

  • 自己封装的一个原生JS拖动方法(推荐)

    代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point)? point = target : ''; //如果没有拖动点,则拖动点默认为整个别拖动元素 function getPos(t){ var offsetLeft = 0, offsetTop = 0, offsetParent = t; while(offsetParent){ offsetL

  • 通过V8源码看一个关于JS数组排序的诡异问题

    前言 前几天一个朋友在微信里面问我一个关于 JS 数组排序的问题.通过该问题发现了一些之前没发现的内容,下面话不多少了,来一起看看详细的介绍吧. 原始数组如下: var data = [ {value: 4}, {value: 2}, {value: undefined}, {value: undefined}, {value: 1}, {value: undefined}, {value: undefined}, {value: 7}, {value: undefined}, {value:

  • 如何启动一个Vue.js项目

    如何启动一个Vue.js项目

    一. Node.js与Vue 1.1 Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型. [Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP.Python.Perl.Ruby 等服务端语言平起平坐的脚本语言. 发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装. Node对一些特殊用例

  • 一个关于JS正则匹配的踩坑记录

    一个关于JS正则匹配的踩坑记录

    最近发现在JS里的正则匹配有一个坑,而且当时很莫名奇妙,一度让我怀疑出现了灵异事件. 下面是踩坑代码 var str=["二七1","二七2","金水","二七3","二七4","二七5"] var reg=new RegExp("二七","g"); for(var i=0;i<str.length;i++){ if(reg.test(str

  • 一个关于JS操作符in问题引发的探究

    事情是这样的:大家都知道"内存泄露"这回事吧.它有几个常见的场景: 闭包使用不当引起内存泄漏 (未声明的)全局变量 分离的DOM节点 (随意的)控制台的打印 遗忘的定时器 循环引用 内存泄漏需要重视,它是如此严重甚至会导致页面卡顿,影响用户体验! 其中第 3 点引起了我的注意 -- 我当然清楚地知道它说的是比如:"假设你手动移除了某个dom节点,本应释放该dom节点所占用的内存,但却因为疏忽导致某处代码仍对该被移除节点有引用,最终导致该节点所占内存无法被释放"的情况

  • JS this关键字在ajax中使用出现问题解决方案

    背景: 在一次web网站开发维护中,使用手机验证码进行登录.再点击获取手机验证码时,验证码按钮并没有置灰,同时也没有出现倒数读秒的效果. 设置按钮倒数60秒前端代码: var clock = ''; var nums = 60; var btn; function sendCode(thisBtn) { btn = thisBtn; btn.disabled = true; //将按钮置为不可点击 btn.value = nums + '秒重新获取'; btn.className = 'regG

  • 一个php+js实时显示时间问题

    我们先来看下这段代码 $(function(){ setInterval(function(){ var timer = '<?php echo date("Y-m-d H:i:s",time()) ?>'; $("#test").append(timer); },500); }); 这段代码哪里有问题,为啥网页加载后网页一直是那个时间不会变呢?php和js的加载机制有啥不同? 这样是不对的,php代码在输出前被解释,浏览器收到的代码应该是这个样子的 $

随机推荐