js中的this

 

js中的this(第六周)

---

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

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

1. 通过函数名()直接调用的：this指向window
2. 通过对象.函数名()调用的：this指向这个对象；
3. 函数作为数组的一个元素，通过数组下标调用的：this指向这个数组
4. 函数作为window内置函数的回调函数调用时：this指向window.setTimeout(func,XXms);setInterval(func,XXms)等
5. 函数作为构造函数，用new关键字调用时：this指向的是new出的新对象
6. 通过函数指定，用apply()\call()\bind() 方法指定this
7. 箭头函数中的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);

 

---

 

7. 箭头函数中的this问题，指向为定义时的this，而不是执行时的this

箭头函数中的this下次分析
<完>
20180901

发挥不广泛