this解析

究竟什么是this?

this是JavaScript中的一个关键字, 它的值取决于他所在的函数如何被调用. 下面是this可以获得新值的6中不同的方式:

this在全局范围内

this在对象的构造函数内

this在对象的方法内

this在一个简单的函数内

this在箭头函数内

this在一个事件侦听器内

This在全局范围内

当this在任何函数外面被调用时, 也就是说在全局环境中被调用, 在浏览器中, 它默认指向Window 对象 .

console.log(this)// Window

This在对象的构造函数内

当你使用new关键字创建一个对象的新的实例时, this关键字指向这个实例 .

functionHuman(age){

      this.age=age;

}

let greg=newHuman(22);

console.log(greg);// this.age = 22

This在对象的方法内

在对象的任何方法内的this都是指向对象本身 .

let o={

sayThis(){

     console.log(this);

}

}

o.sayThis()// o

This在一个简单的函数内

在浏览器中, 简单函数里面的this总是被指向Window. 即使你在对象的方法中调用一个简单函数, 在这个简单函数里面的this也是指向Window.

function simpleFunction(){

     console.log(this);

}

const  o={

         sayThis(){

                   simpleFunction();

          }

  }

simpleFunction();// Window

o.sayThis();// Window

This在箭头函数中

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。this对象的指向是可变的，但是在箭头函数中，它是固定的

function foo(){

      setTimeout(()=>{

                console.log('id:',this.id);},100);

               }

var id=21;

foo.call({id:42});// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。

This在事件侦听器内

在事件侦听器内, this被指向的是触发这个事件的元素: