this的指向

this指向

正常情况下,this的指向分为以下几种情况

  1. 如果是个构造函数,this指向新生成的对象
  2. 如果是个箭头函数,this指向函数声明位置处,外面包裹着他的函数
  3. 如果函数调用,但是没有显式的调用者,默认为window(全局),不管他的位置在哪里,嵌套有多深
  4. 如果函数调用,有显式调用者,则指向调用者
  5. 通过call 、bind 、 apply 显式改变

迷惑性较高

const obj = {
    dev: 'bfe',
    a: function() {
        return this.dev
    },
    b() {
        return this.dev
    },
    c: () => {
        return this.dev
    },
    d: function() {
        return (() => {
            return this.dev
        })()
    },
    e: function() {
        return this.b()
    },
    f: function() {
        return this.b
    },
    g: function() {
        return this.c()
    },
    h: function() {
        return this.c
    },
    i: function() {
        return () => {
            return this.dev
        }
    }
}

console.log(obj.a())
console.log(obj.b())
console.log(obj.c())
console.log(obj.d())
console.log(obj.e())
console.log(obj.f()())
console.log(obj.g())
console.log(obj.h()())
console.log(obj.i()())

解析

相同的函数

const obj = {
  dev: 'bfe',
  a: function() {
    return this.dev
  },
  b() {
    return this.dev
  },
}

console.log(obj.a()) // bfe
console.log(obj.b()) // bfe

箭头函数

const obj = {
  dev: 'bfe',
  c: () => {
    //当我们使用一个箭头函数作为对象属性,他创造出一个新的上下文环境,this指向window,this.dev不存在
    return this.dev
  },
}
console.log(obj.c()) // undefined

立即执行函数与箭头函数

const obj = {
  dev: 'bfe',
  d: function() {
    //立即执行函数和箭头函数同时使用,立即执行函数只用于执行箭头函数,this会以箭头函数为准,指向d:function()
    return (() => {
      return this.dev
    })()
  },
  e: function() {
    return this.d()
  },
}
console.log(obj.d()) // bfe
console.log(obj.e()) // bfe
const obj = {
  dev: 'bfe',

  b() {
    return this.dev
  },

  f: function() {
   	//这里 被解析为两部分,b() {return this.dev}和()(),合在一起就是(b() {return this.dev})()
    //变成了一个立即执行函数,无显式调用者,this指向window
    return this.b
  },
  g: function() {
   //这里也可以拆分成两部分,() => { return this.dev }和()(),但是这里要注意箭头函数,箭头函数的this只跟他声明的地方的,包裹着他的函数有关,跟其他无关,所以this指向window
    return this.c()
  },
  h: function() {
   	//同 g:function一样
    return this.c
  },
}


console.log(obj.f()()) // undefined
console.log(obj.g()) // undefined
console.log(obj.h()()) // undefined

Finally nested arrow functions

const obj = {
  dev: 'bfe',
  i: function() {
    return () => {
      return this.dev //箭头函数,this指向声明位置的包裹他的函数,所有this指向i:function
    }
  }
}

console.log(obj.i()()) // bfe

总结:this的指向

  • 跟调用方式有关
    • 构造函数
    • 调用函数
  • 跟调用者有关
    • 有显式调用者
    • 无显式调用者

举例:函数调用(指向window) 对象方法(对象) 构造函数(实例化出来的对象) 定时器调用(全局) 匿名函数(window)

原型中的this指向调用他的对象不指向本身

笔记中有不对的地方,请斧正,谢谢

posted @ 2021-08-21 22:03  走我们钓鱼去  阅读(79)  评论(0)    收藏  举报