Js中常见this指向问题

不管是工做或者面试中，this指向问题是常常遇到的。因此这篇文章把常见的指向问题列出来给你们，避免踩坑。首先咱们要知道，在函数中this到底取何值，是在函数真正被调用执行的时候肯定的，函数定义的时候肯定不了，也就是说，this的指向彻底取决于函数调用的位置。由于this的取值是做用域环境的一部分，每次调用函数，都会在不一样的做用域环境。

1：全局环境中

在浏览器环境严格模式中（区别于node），this默认指向window。当即执行函数，默认的定时器等函数，this也是指向window。

console.log(this === window) // true
    function fn(){
        console.log(this === window)
    }
    fn() // true
    (function(){
        console.log(this === window) // true
    })()
    setTimeout(function() {
      console.log(this === window); //true
    }, 500)

2：对象函数中

若是函数做为对象的一个属性被调用时，函数中的this指向该对象。

var x = 10 // 至关于 window.x = 10
    var obj = {
        x: 20,
        f: function(){
            console.log(this.x)
        },
        s: function(){
            console.log(this.x) // 20
            function fn(){
              console.log(this.x)
            }
            return fn  // 函数f虽然是在obj.fn内部定义的，可是它仍然是一个普通的函数，this仍然指向window
        }
    }
    var fn = obj.f
    fn()  // 10 
    obj.f() // 20
    obj.s()() // 10

首先调用fn()为何结果为10，由于新建了变量fn，至关于fn = function(){ console.log(this.x)}, 函数中this默认指向window,故输出为10。而 obj.f() 中this 指向obj，因此this.x = obj.x, 输出结果为20。

3：构造函数中

构造函数建立的实例的属性指向构造函数的prototype。

function Man(name){
        this.name =  name
    }
    Man.prototype.getName = function(){
        // this指向 Man
        return this.name
    }
    const tom = new Man('tom')
    console.log(tom.getName()) // 'tom'
    
    // 切记请勿修改构造函数的返回值，将会改变默认指向，好比
    function Man(name){
        this.name =  name
        return {
            name: 'lily'
        }
    }
    Man.prototype.getName = function(){
        // this指向 Man
        return this.name
    }
    const tom = new Man('tom')
    console.log(tom.name) // 'lily'

4：箭头函数中

箭头函数的this是在定义函数时绑定的，不是在执行过程当中绑定的，箭头函数中的this取决于该函数被建立时的做用域环境。

// 第一种状况
    var x= 10
    var obj ={
      x: 20, 
      f1: function(){
        console.log(this.x)
      },
      f2: () => {
        console.log(this.x) // 指向 window
      }
    }
    obj.f1() // 20
    obj.f2() // 10
    
    // 第二种状况
    var name = "jack"
    var man = {
      name: 'tom',
      f1: function(){
        // 这边的this和下面的setTimeout函数下的this相等
        var that = this
        setTimeout(()=>{
          console.log(this.name, that === this) // 'tom' true
        }, 0)
      },
      f2: function(){
        // 这边的this和下面的setTimeout函数下的this不相等
        var that = this
        setTimeout(function(){
          console.log(this.name,  that === this) // 'jack' false
        }, 0)
      }
    }
    man.f1()  // 'tom' true
    man.f2() // 'jack' false

setTimeout默认指向window，可是，在箭头函数中，this的做用域环境在man内，故this指向了man。也就是说此时的this能够忽略外围包裹的setTimeout定时器函数，看上一层及的做用域。

5：dom节点中

特别在是react中jsx语法中，咱们一般要改变dom的this指向，否则获取不到指定的执函数。因此一般须要在函数声明使用bind绑定事件。

// html
    <button id="btn">myBtn</button>
    
    // js
    var name = 'window'
    var btn = document.getElementById('btn')
    btn.name = 'dom'
    var fn =  function (){console.log(this.name)}
    btn.addEventListener('click', f()) // this指向 btn
    btn.addEventListener('click', f.bind(obj)) //  this指向 window

本文涉及到的案例是相对比较常见，若是想更加深刻的理解this，能够参考github上的一篇文章 ☛ 传送门