js中的this

最新推荐文章于 2023-02-09 12:54:59 发布

weixin_34378969

最新推荐文章于 2023-02-09 12:54:59 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b8a48b6f265da432e75daae

本文详细解析了JavaScript中this关键字的不同应用场景及其指向变化，包括直接调用、对象方法调用、构造函数调用等多种情况。

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);
复制代码