js函数中this的指向

Posted 2020-09-13

本文是我个人对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指的晕头转向！！！