js函数中this的指向

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js函数中this的指向相关的知识,希望对你有一定的参考价值。

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

 

 

 

  







以上是关于js函数中this的指向的主要内容,如果未能解决你的问题,请参考以下文章

js 中this到底指向哪里?

JS中this的指向

js中this指向的三种情况

js中this指向

js中this指向

浅谈js中的this指向