【没有废话】通俗易懂理解JavaScript中的this

  • 以下讨论情况针对浏览器宿主环境
  • 情况一: 函数调用时候前面没有调用者,也就是fn()前面没有,那么非严格模式下this就是window严格模式下this就是undefined
// 注意:let/const没有和全局对象window映射关系
// 非严格模式
const foo1 = function () {
  console.log(this)
}
foo1() // this:window 函数调用前面没有`.`

const obj = {
  bar () {
    console.log(this)
  }
}
let foo2 = obj.bar
foo2() // this:window 函数调用前面没有'.'

const foo3 = function (fn) {
  fn() // this:window 函数调用前面没有'.'
}
foo3(obj.bar)

// 严格模式
"use strict"
const foo1 = function () {
  console.log(this)
}
foo1() // this:undefined

const obj = {
  bar () {
    console.log(this)
  }
}
let foo2 = obj.bar
foo2()  // this:undefined

const foo3 = function (fn) {
  fn()  // this:undefined
}
foo3(obj.bar)

结果
在这里插入图片描述
在这里插入图片描述

  • 情况二:函数调用时候前面拥有,那么前面那个称为调用者。函数调用栈内部this就是调用者
const obj = {
  bar () {
    console.log(this)
  }
}
obj.bar() // this:obj; bar函数调用时候'.'前面就是obj,那么bar函数内部this就是obj
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #fa0;
}
</style>
<div class="box"></div>
const boxEle = document.querySelector('.box')
boxEle.addEventListener('click',function () {
  console.log(this) // this:boxEle
})
boxEle.onclick = function () {
  consoele.log(this) // this:boxEle
}

在这里插入图片描述

  • 情况三:构造器内部this指向当前实例
function Person() {
    console.log(this)
  }
  class Page  {
    constructor () {
      console.log(this)
    }
  }
  new Person() // this:Person实例
  new Page() // this:Page实例

在这里插入图片描述

  • 其他情况
    1)浏览器定时器回调函数调用栈内部this非严格模式window,严格模式undefined
    2)自执行函数调用栈内部this非严格模式window,严格模式undefined
    3)数组内置方法回调处理函数调用栈内部this一般情况指向window
    4)间接调用类似自执行函数
// 定时器
 setTimeout(function () {
    console.log(this) // 非严格模式this:window
  },2000)
  // 数组API回调  
  ;[1,2].forEach(function (item){
    console.log(this) // this:windnow
  })
  // 自执行函数
  ;(function () {
    console.log(this) // 非严格模式自调用函数内部this:window
  })()
  
  const obj1 = {
    foo () {
      console.log(this)
    }
  }
  const obj2 = {
    bar () {
      console.log(this)
    }
  }
  // 间接调用
  ;(obj2.bar = obj1.foo)() // this:window 

在这里插入图片描述

  • 情况四:call、apply、bind可以修改ES3/ES5规范函数的this指向
function bar() {
  console.log(this)
}
const obj = {
  name:'obj',
  foo () {
    console.log(this)
  }
}
bar.call(obj) // this:obj
obj.foo.call(null) // this:window
obj.foo.call() // this:window

在这里插入图片描述

  • 情况五:箭头函数
    1)箭头函数调用栈内部this永远取决于上级作用域,和调用者没有任何关系。JavaScript语言中对象的{}不是调用栈,不会形成作用域,仅仅是一个命名空间,没有this。JavaScript编程语言中,只有全局作用域、局部作用域以及ES6新规范的块级作用域
function bar () {
  console.log('window bar')
}
const obj = {
  foo: () => {
     console.log(this) // this:window 。对象的{}不会形成作用域,此时箭头函数foo上级作用域就是全局作用域window
     this.bar() // 'window bar'
   },
   bar () {
     console.log(this) // this:obj
     // baz的上级作用域是bar函数调用栈 所以箭头函数baz内部this:obj
     const baz = () => {
       console.log('obj bar') // this:obj
     }
     baz()
   }
 }
 obj.foo() 
 obj.bar() 

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值