JavaScript关于this指向的问题及案例

this指向问题通常是分为普通函数的this指向和箭头函数的this指向。

本文中侧重描述普通函数的this指向问题。 下面直接给出案例

    let obj = {
      name:'小许',
      func:function(){
        console.log(this.name)
      }
    }
    //此时通过对象的方法调用,则我们可以默认把obj.func当作obj.func.call(obj)来调用,则this指向的就是obj。
    obj.func() // output  "小许"
    let obj1 = obj.func
    //通过函数的方式直接调用，则把obj1()当作obj1.call(window),因为function的this指向在默认情况下浏览器自动设置为window
    obj1() //output "小周"

通过以上的案例可以知道，this的指向问题其实本质就是方法是谁调用的问题。 如果funciton是在设置为对象中的一个属性,并且最终通过 "obj.func()" 的方式调用,this则指向该对象。 如果funciton是通过另外设置全局变量来实现并调用，如上的 "obj1()" 的方式调用,则很明显，funciton就暴露在全局环境当中，自然此时的this指向就为window。

下面再通过一道阿里的面试题目(类似)巩固一下知识。

    var obj = {
      age:21,
      func:function(){
        console.log(this.age)
      }
    }

    var obj1 = obj.func() // 对象直接调用 this指向obj 输出 21
    var obj2 = obj.func
    obj2() //函数直接调用 this指向window 输出22

    var Obj = {
      age:23,
      func:function(fun){
        fun()
      }
    }
    Obj.func(obj.func) //函数直接调用 this指向window 输出 22
    //此步将obj.func里的整个funciton函数传进去,fun() 相当于 function(){console.log(this.age)}()
    //故本质还是通过funcion直接调用,this指向window。

    Obj.func = obj.func
    Obj.func() // 对象直接调用，this指向Obj 输出 23