本文是我个人对this指向的一些理解,如有不足之处,还望大家可以批评指正,在此先谢过了!
首先,我们来回顾一下ES5里函数的几种调用方式:
1??直接调用
foo();
2??方法调用
obj.foo();
以上两种调用方法,this的指向可以这样去确定: 函数的调用者就是this的指向!
例如 obj.foo(); 里.foo()前面obj就是调用者,所以this的指向就是obj,而直接调用的foo()等价于window.foo();这样的话,上面两种调用方法的this指向就显而易见了,1??的this是window,2??的this是obj
举个栗子:
1.关于直接调用
function foo(){ console.log(this) } foo() 这个foo()等价于window.foo(),所以this的指向就是window
2.关于方法调用
var obj = { foo: function(){ console.log(this) } } obj.foo();这里foo的调用者是obj,所以this的指向就是obj
3??call/apply
obj.foo.call(context,parma)/obj.apply(context,[parma]);
关于 call/apply调用,context是谁,this指向的就是谁。需要注意的是,当context值为undefined/null的时候,this指向的是window,this的指向还是undefined/null。
相信看到这里,大家应该对this的指向有一定的理解了吧,最后再来个个人认为对我们初学者来说很恶心的一个栗子:
function fn (){ console.log(this) };function fn2(){ console.log(this)}; var arr = [fn, fn2] arr[0](); 我擦,这个也没有点语法(就是obj.foo())调用,看样子长得很像foo()这种调用方式,那它的this指向是window吗?ma蛋,事实上并不是,它的this指向的是arr,那么为什么呢? 首先arr是一个数组,而数组也是对象,也就是obj,访问obj内部元素有两种方式[]语法和.语法,也就是obj[key]和obj.key,数组里面的index就可以看作是obj里的key,所以在这里,它不是没有点语法调用吗?那我们就给他改造成点语法,也就是这样arr.0(),最后也就不难理解,这个this的指向就是arr了,但切记,数组里面内容的访问只能是arr[index]语法,实际应用千万不要写arr.index!!!这里只是为了方便理解。
小结:
1.call/apply的调用方式自不用说,this指向就是context值,切记当context值为undefined/null的时候,this指向的是window,this的指向还是undefined/null。;
2.obj.foo();的this指向就是obj
3.直接调用foo();转换成点语法调用就是window.foo();所以this的指向就是window;
4.最恶心的就是那种看似是foo();的骗子们,这时候我们一定要想办法给它转换成点语法调用来帮助我们找到this指向(比如上面数组的栗子)。
5.如果是一大串点语法调用的,像这样 obj1.obj2.obj3.foo(); 我们只需要看离foo最近的那个obj就行了,这个栗子里的this指向也就是obj3;
总之一句话,套路再多我们也不用管,只要看到是谁最后调用的函数,函数内的this就指向谁!!!
最后祝愿大家都不再被this指的晕头转向!!!