总结js中this的指向问题

咱们知道js中有个全局对象就是window,若是在顶层声明一个变量如

var a=1 //就至关于window.a=1

同时有了node之后，js也能够在服务端运行了，官方解释为Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。通俗说node是一个支持js语法的容器，直接写js就能够在node下运行。这里介绍node主要说一下在node中的全局变量叫global,就像window同样有一些js默认的变量和方法。下面只探讨this在浏览器中的指向，有兴趣的也能够把后面的例子在node中跑一下。

this通常在函数中使用比较多，那就从函数提及吧，咱们调用的函数通常分为声明式函数，或者是放在对象中做为方法的函数

1、声明式

function demo1(){
    console.log(this)  
}
function demo2(){
    this.num=2
    function demo3(){
          this.num++
          console.log(num)
    }
    return demo3
}
demo1() // 调用demo1函数，这里this很显然指向window
var a=demo2();
a()  // 这里看到会打印出3，应该也很好理解，a变量将demo2函数执行后的的返回值及demo3函数返回，而后执行，此时this依旧指向window

2、对象中的方法调用

var obj1={
      value:3,
      increment:function(){
           this.value++;
           console.log(this,this.value)
      }
}
obj1.increment() //  obj1{value:4,increment:function(){...}},4 ;打印出obj1对象和4，obj1包含一个value值和一个increment方法，也好理解

在看一个例子

var obj2={
      value:4,
      increment:function(){
           this.value++;
           console.log(this,this.value);
           (function(){
                 console.log('这又是啥',this,this.value)
                 this.value=1
           })() 
      },
      print:function(){
            console.log('print',this.value)
      }
}
obj2.increment() 
obj2.print()
var P=obj2.print
P()
// 打印结果出以下
// {value: 5, increment: ƒ, print: ƒ} 
// 5
// 这又是啥 Window 
// undefined
// print 5
// print 1

依次分析：

第一条先执行obj2中的increment方法，跟上一个例子同样，这里的this是指向我obj2对象，因此this.value再执行+1之后为5，后面是一个自执行函数，这里面的this直接指向了window，window的value一开始不存在因此为undefined,后面增长一个全局变量value值为1；而后是第二条直接执行obj2中的方法print，此时的this仍是obj2因此值为5,；而后是第三条声明一个变量P指向obj2中的print方法，执行这个方法这是this指向window，因此输出1

总结来讲：

使用声明式函数（后面两个对象中的方法也是使用的声明式函数）会自动绑定 this,直接在全局中声明的函数 this会直接指向 window对象

延伸一下，如今咱们都常常会用的es6的箭头函数，箭头函数是不会自动绑定this的，默认从上一级继承下来，那不妨把刚才的例子改下看看

例子1改写

var demo1=()=>{
    console.log(this)  
}
var demo2=()=>{
    this.num=2
    function demo3(){
          this.num++
          console.log(num)
    }
    return demo3
}
demo1() // 调用demo1函数，这里this仍是指向window,由于以前说的在全局下声明自己就有个this指向window对象
var a=demo2();
a()  // 3，这里也同样

例子2改写

var obj1={
      value:3,
      increment:()=>{
           this.value++;
           console.log(this,this.value)
      }
}
obj1.increment() // 这时候会看到输出window对象和一个NaN

简单说明下：

如前面所说箭头函数不会自动绑定 this，因此执行increment函数中的 this依旧会指向 window，而 window下的 value还不存在，因此为 undefined再执行+1操做因此 value就变成了 NaN了

例子3改写

var obj2={
      value:4,
      increment:()=>{
           this.value++;
           console.log(this,this.value);
           (function(){
                 console.log('这又是啥',this,this.value)
                 this.value=1
           })() 
      },
      print:()=>{
            console.log('print',this.value)
      }
}
obj2.increment() 
obj2.print()
var P=obj2.print
P()
// 打印结果出以下
// Window 
//  NaN
// 这又是啥 Window
// NaN
// print 1
// print 1

简单说明下：

第一个依旧 window对象(this没绑定的嘛)，后面的value固然又是没声明.....而后自执行函数也没得说,后面才接着给 window的 value赋值为1了，后面就两句天然输出两次1了

那么箭头函数怎么绑定this呢,有apply,call和bind这三个方法得嘛，你们应该都知道，具体区别能够查一下