首页 > 代码库 > 深究js中无所不在的this
深究js中无所不在的this
总是感觉js中的this无处不在却又琢磨不透,虽然他的调用原理很简单,就是跟调用形式相关,但是调用方式多种多样,海底针啊..试图用各种方法去诠释,有时候也说不出个所以然..今天干脆耐下心来实际体验下,尝试下,试图根据实际情况自己理解一下this的行为方式,欢迎交流。
----------------------------------------------->函数相关的this<-----------------------------------------------------
先看一个最最简单的例子:
this当然会undefined,因为this的指向实际是指向它的调用的。
下面还有两个特殊的情况,闭包中this的表现:
因为闭包立即执行,这相当于在全局的作用于下调用了函数,于是乎,可以看到,他就是指向了window了。
可是.......strict模式下的:
这就是闭包中使用严格模式的后遗症,它不让this指向全局作用域了呢。
这有个总结javascript中‘use strict’的资料,总结的挺好听明白的:http://www.web-tinker.com/article/20125.html
那么说了this是指向他的调用了,到底是怎么指向的呢,我们试试几个小例子,看看它的行为:
1.最普通的:
看吧,刚才还undefined呢,调用一下this就指向调用它的作用域了喔。
这个更印证了this指向调用他的作用域。
2.那我现在把函数嵌套一下试试看呢:
还是window喔,这里this是属于window喔,好像说也说不清楚,自己写写试试想想,体会体会喔。
3.上面基本上都是函数调用时候的情况,那下面我试一下函数引用,来看看会是什么样子呢,稍稍复杂些:
上面事实证明,引用函数是可以改变函数的执行作用域的,但是像之前的,调用函数是不会改变函数的执行作用域的呢:
事实证明条用函数是不会改变函数的执行作用域的(注意上面两段代码中me:后面的使用方式)。
------------------------------------------------>构造函数中的this<----------------------------------------------------
1.下面我们先看看js中简单封装过程中用到的this:
上面实现的并不是严格的封装,但是从中我们可以看到this的作用。
2.别急,肯定还是有点有意思的事情的:
这里通过new创建了一个新的对象呢,并将这个对象通过this传入到了构造器中,这也就是为什么b的作用域跑到了a{}里面。
这是为什么呢?? 我们来来看new构造函数这种用法是怎么回事吧:
简单来看:
其实new的作用就是使this指向一个新建的对象,然后return this。
实际它的运行情况是这样的:
1 function Person (){2 // var obj = new Object();3 // this = obj;4 alert(this); // new 出来的 Person 对象5 // return this;6 }7 var person = new Person();
实际上js的实现是这样的:
1 function newOperator(Constr, args) {2 var thisValue = http://www.mamicode.com/Object.create(Constr.prototype); // (1)3 var result = Constr.apply(thisValue, args);4 if (typeof result === ‘object‘ && result !== null) {5 return result; // (2)6 }7 return thisValue;8 }
在网上看资料的时候看到的,链接在这里:http://speakingjs.com/es5/ch17.html#_the_new_operator_implemented_in_javascript
--------------------------------------------->call和apply对this的影响 <------------------------------------------------------------
看例子:
这里this就指向String了。
上面这个例子就通过call(),把x,y,传到了函数中。
------------------------------------------------------->定时器(setTimeout,setInterval)中的this<--------------------------------------------------------------
先看最简单的:
这里面this就是指向window。
实际上因为setTimeout()和setInterval()发放根本就是window的,所以当然指向window了。
更加印证了上面所说的。
--------------------------------------------------------------->eval()中的this<---------------------------------------------------------------------------
直接调用eval():
直接调用eval()的话,this指向当前作用域的。(‘use strict‘不用也是一样的)
下面展示了不直接调用的情况:
------------------------------------------------------->复杂情况中的this<--------------------------------------------------------
在查找资料的过程中,发现了一个总结的挺好的,复杂情况下this的优先级,贴过来收藏:
优先级 | 情景 | this 的值 | 备注 |
1 | new | new出来的空 object | |
apply / call | 传入的参数 | 并列第一,apply / call不能和 new 同时出现 new arr1.show.apply(“1”); // 报错 | |
2 | 定时器 | window | |
3 | 事件 | 发生事件的元素 | |
4 | 方法 | 所有者 | |
5 | 其他(嵌套等) | window || undefined | 看是否为严格模式 |
注:不管如何修改this,this只会影响一层
例:
后面要是在发现别的this相关,再补充咯.......
深究js中无所不在的this