在网上,大部分文章都会出现下面这段话:
this的指向在函数定义的时候是确定不了的,只有在函数执行的时候才能确定this到底指向谁,实际上this最终指向的是那个调用他的对象
这句话总是让人有哦一种琢磨不透的感觉。
为什么要理解this?如果已经学过了面向对象,那么就应该指导this的重要性!
1.我们来看一个例子:
function fun(){ var userName = "lzh"; console.log(this.userName); //undefined console.log(this); //Window } fun();
按照上面加粗的字体所说的 this最终指向的是那个调用他的对象。上述代码中的函数fun,实际上是属于window这个大对象下的一个方法,下shutdown代码便可证明:
function fun(){ var userName = "lzh"; console.log(this.userName); //undefined console.log(this); //Window } window.fun();
2.我们来看下面的例子2:
var obj = { userName:"lzh", fun:function(){ console.log(this.userName); //lzh } } obj.fun();
在这个例子里,this的指向是对象obj,调用的fun是通过obj.fun实现的,那么this的指向自然就是obj这个对象;
再次强调一下:this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,哪个对象调用,this就指向谁
3.我们来看第三个例子:
var obj = { userName:"lzh", fun:function(){ console.log(this.userName); //lzh } } window.obj.fun();
例2和例3两段代码,只有在调用时候的写法不一样;
但是,例3 里面的this为什么不指向window?
我们首先要知道window是js中的全局对象,我们创建的变量市级上就是给window这个大对象添加属性,
接着我们来看代码段4
var obj = { a:6, b:{ a:12, fun:function(){ console.log(this.a); //12 } } } obj.b.fun();
代码4中的fun是由对象obj ”.“出来的,同样this并没有指向obj;所以本文最开始那一段黑体字说的难道有错误吗?
应该算是说的并不准确(我觉得说的很别扭,就当他不对)
来看下面三短话(百度了好多资料觉得这几句写的非常好):
1. 如果一个函数中有this,但是他没有被上一级的对象所调用,那么this的指向就是window
2. 如果一个函数中有this,这个函数有被上一级对象所调用,那么this的指向就是上衣及对象
3. 如果一个函数中有this,这个函数中包含了多个对象,尽管这个哈哈哈书是被最外层的对象所调用,this的指向也只是他上一级的对象
对于第三段话 我们来看下面这段代码:
var obj = { a:6, b:{
// a:12, 对象b中的 a 已经被隐掉fun: function (){ console.log( this.a); //undefined } }}obj.b.fun();
尽管对象b中没有属性a,但是这个this仅指向对象b,并不会向上一级寻找。
但是(万事万物都有但是,哈哈哈):
我们来看一个特殊的例子:
var obj = { a:6, b:{ a:12, fun:function(){ console.log(this.a); //undefined console.log(this); //window } } } var fun1 = obj.b.fun; fun1();
在这里 this的指向就变成了 window,奇怪吗?不奇怪!原因是因为:
this永远指向的是最后调用他的对象;这句话的意思就是说:看他执行的时候是谁调用的,上面的例子中,虽然函数fun是被对象b引用的,但是将fun赋值给变量fun1的时候并没有执行,而是有fun1执行的,所以this最终的指向是window,而例子3中是直接执行了fun;