js的this指向哪里

Posted 2021-10-04 霜叶w

js的this指向哪里

• 为什么需要this
• this的绑定形式
• • 默认绑定
  • 隐式绑定
  • 显式绑定
  • new绑定
  • 箭头函数的this

为什么需要this

js中

    var a = 'window'
    var obj = {
        a:'obj',
        func: function(){
            console.log(this.a)
        }
    }
    obj.func()  //  obj
    var func = obj.func
    func()      //  window

js中执行上面的代码会有这样结果，虽然obj.func和func指向的是同一个函数，但是因为它们所处的运行环境不一致，所以打印结果也不同，而this就是用来指明当前函数的运行环境的

this的绑定形式

this绑定可以分为五种形式，分别是默认绑定、显式绑定、隐式绑定、new绑定、箭头函数的this绑定

默认绑定

当函数调用无任何调用前缀时，this默认执行全局对象（非严格模式）

    var a = 'window'
    function func1(){
        console.log(this.a)   // window
        var a = 1
        function func(){
            console.log(this.a,a)   //  window  1
        }
        func()
    }
    func1()

隐式绑定

函数调用时，this指向调用自己最近的对象

    var obj2 = {
        a:'obj2',
        func:function(){
            console.log(this.a)
        }
    }
    var obj = {
        a:'obj',
        b:obj2,
    }
    obj.b.func()  //  obj2 

显式绑定

显式绑定指我们通过call，apply和bind方法改变this的指向，在这个过程中this指向的变化可以被清晰感知

    var a = 'window'
    var obj = {
        a:'obj'
    }
    function func(){
        console.log(this.a)
    }
   func.call(obj)     //  obj
   func.apply(obj)    //  obj
   func.bind(obj)()   //  obj

new绑定

new操作符会将this指向新生成的实例

   function func(){
        this.a = 'a'
   }
   var newFunc = new func()
   console.log(newFunc.a,newFunc)      //  a   func {a:'a'}

箭头函数的this

箭头函数的this指向它定义时外层环境的this指向，也就是说它自身没有this，指向谁靠的是外层环境的this，并且一旦指定无法变更

    function func(){
        this.name = 'func'
        var obj ={
            name:'obj'
        }
        var a = ()=>{
            console.log(this.name)
        }
        a()            //  func
        a.call(obj)    //  func
    }
    func()

在这个示例中，使用call依旧不能改变this的指向