js中的this指向问题

this是很多编程语言中的关键字，在JavaScript中一般这样理解this：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

this指向的情况，取决于函数调用的方式有哪些：

通过函数名()直接调用的：this指向window
通过对象.函数名()调用的：this指向这个对象；
函数作为数组的一个元素，通过数组下标调用的：this指向这个数组
函数作为window内置函数的回调函数调用时：this指向window.setTimeout(func,XXms);setInterval(func,XXms)等
函数作为构造函数，用new关键字调用时：this指向的是new出的新对象
通过函数指定，用apply()\call()\bind() 方法指定this
箭头函数中的this问题，指向为定义时的this，而不是执行时的this

1. 通过函数名()直接调用的：this指向window

场景一 （函数名直接调用）

 function myobj(){
     var myname = "发挥不广泛";
     console.log(this);
     console.log(this.myname);
 }
 myobj();//等价于 window.myobj();
复制代码

函数执行中this指向的并不是函数本身，（函数也是对象），而是调用它的对象，我们知道，浏览器的全局变量是window，所以这里的this指向window，当然window.mynmme 为 undifined

2. 通过对象.函数名()调用的：this指向这个对象；

场景二 （对象.函数名调用）

 var myname = "我是window的name";
 function myobj(){
     var myname = "发挥不广泛";
     console.log(this);
     console.log(this.myname);
 }
 var a = {
     fun:myobj, //将函数myobj 赋值给a.fun
     myname:"我是a的name"
 };
 myobj();
 a.fun();
复制代码

直接调用myobj();实际上是window.myobj(),所以调用myobj的是全局window，所以这里的this指向window， 而将myobj赋值给a对象的fun属性后，调用a.fun(),就是a来调用myobj（），所以this指向a
场景三 （对象.对象.函数名调用）

 var myname = "我是window的name"
 function myobj(){
     var myname = "发挥不广泛";
     console.log(this);
     console.log(this.myname);
 }
 var a = {
     myname:"我是a的name",
     fun:myobj,
     b:{
         myname:"我是b的name",
         fun:myobj
     }
}
myobj();
a.fun();
a.b.fun();
复制代码

这里没有什么好说的，对象多级嵌套，this指向调用它的那个对象，即被调用函数的上一级对象

场景四 （函数名直接调用变种）

 var myname = "我是window的name";
 function myobj(){
     var myname = "发挥不广泛";
     console.log(this);
     console.log(this.myname);
 }
 var a = {
     fun:myobj, //将函数myobj 赋值给a.fun
     myname:"我是a的name"
 };
 a.fun();
 var b = a.fun;
 b();
复制代码

这里现象好像很奇怪，下面是我个人的理解方式，看下图：

3. 函数作为数组的一个元素，通过数组下标调用的：this指向这个数组

场景五 （数组下标调用）

  var myname = "我是window的name";
 function myobj(){
     var myname = "发挥不广泛";
     console.log(this);
     console.log(this.myname);
     console.log(this[0].myname);//打印数组第0个元素myname属性
 }
 var myarr = [{myname:"我是myarr[0]的name"},myobj];//新建以数组对象
 myarr.myname = "我是myarr的name";//为数组对象添加myname属性
 myarr[1]();//数组下标方式调用函数
复制代码

4. 函数作为window内置函数的回调函数调用时：this指向window.setTimeout(func,XXms);setInterval(func,XXms)等

场景六 （window内置函数调用）

var myname = "我是window的name";
 function myobj(){
     var myname = "发挥不广泛";
     console.log(this);
     console.log(this.myname);
 }
  setTimeout(() => {
   myobj();
 }, 1000);
复制代码

5. 函数作为构造函数，用new关键字调用时：this指向的是new出的新对象

场景七 （作为构造函数，new关键字调用）

var myname = "我是window的name";
 function Myobj(){  //构造函数通常首字母大写
     this.myname = "发挥不广泛";
     console.log(this);
     console.log(this.myname);
 }
 var mobj = new Myobj();
复制代码

如果函数没写return ，系统会默默的在函数的结尾加return undefined； new关键字调用函数是会忽略return undefined，（自己写的return undefined也会被忽略）， new关键字调用没写return（或者写了return undefined）函数是会在函数结尾默默加 return this(试了一下，这样并不能成功，不过可以这样理解)

6. 通过函数指定，用apply()\call()\bind() 方法指定this

场景八 （通过函数指定this）

 var myname = "我是window的name";
 function myobj(){
     var myname = "发挥不广泛";
     console.log(this);
     console.log(this.myname);
 }
 var a = {
     myname:"我是a的name"
 };
 myobj.apply(a);
复制代码

原文：https://blog.csdn.net/weixin_34150503/article/details/91386486?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163568882716780269871309%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=163568882716780269871309&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-1-91386486.pc_search_es_clickV2&utm_term=js%E4%B8%AD%E7%9A%84this&spm=1018.2226.3001.4187