专栏首页Nian糕的私人厨房JavaScript this的指向

JavaScript this的指向

Unsplash

在 JavaScript 中 this 取什么值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了,因为 this 的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境

  1. this 作为普通函数,指向 window
function fn1() {
  console.log(this)
}
fn1() // window
  1. 使用 call() apply() bind(),指向第一个参数
fn1.call({x: 100}) // 指向第一个参数 {x: 100}
  1. 作为对象方法被调用,指向调用该方法的对象
const niangao = {
  name: '年糕',
  sayHi() {
    // this 即当前对象
    console.log(this)
  },
  wait() {
    setTimeout(function() {
      // this === window
      // setTimeout是作为普通函数去执行,而不是作为niangao.wait()去执行
      console.log(this)
    })
  }
}
  1. class 方法中被调用,指向实例对象
class Food {
  costructor(name) {
    this.name = name
  }
  eat() {
    console.log(this)
  }
}
const niangao = new Food('年糕')
niangao.eat() // Food{}
  1. 箭头函数,指向上级作用域的 this
const niangao = {
  name: '年糕',
  sayHi() {
    // this 即当前对象
    console.log(this)
  },
  waitAgain() {
    setTimeout(() => {
      // this 即当前对象
      console.log(this)
    })
  }
}
End of File

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2.0 歌手列表滚动及右侧快速入口实现

    本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

    Nian糕
  • JavaScript 九宫格抽奖

    这是之前国庆活动所做的一个新功能,以往抽奖都是采用转盘的形式,这次换了个新的玩法,折腾了两天才实现,主要代码出自哪里已经无法考究了,我做了部分优化,贴上来给大家...

    Nian糕
  • JavaScript 常见面试题分析(一)

    这道题考察的是 JS 的变量类型,JS 的变量类型有值类型和变量类型两种,值类型包括 undefined、字符串、数字、布尔值,引用类型包括对象、数组、函数

    Nian糕
  • Flutter组件学习(三)—— 输入框TextFiled

    Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架的魅力还是很吸引人...

    用户2802329
  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • JavaScript this关键字

    Mirror王宇阳
  • 撩妹技能 get,教你用 canvas 画一场流星雨

    玩过 canvas 的同学,你画圆画方画线条这么 6,如果说叫你画下面这个玩意儿,你会不会觉得你用的是假 canvas?canvas 没有画一个带尾巴玩意儿的 ...

    王小婷
  • SpringCloud源码学习(二) 面试官问我Eurake服务注册的实现细节?

    上期我们大概得了解了Eurake向Spring上下文中注册EurekaServiceRegistry和EurekaRegistration的详细过程,其中总调度...

    程序员_备忘录
  • 三、Vue 的一些语法样例

    其实vue 的语法在官网上都有详细的讲解和例子,我这里就不多做什么说明,只是把自己学习这些语法是练习的例子贴出来。另外官网上的例子是一个个的html文件。我这里...

    程序员爱酸奶
  • Java基础:五、this关键字、static含义(4)

    如果只有一个peel()方法,如何知道是被a还是b所调用的呢?因为编译器会把“所操作对象的引用”作为第一次参数传递给peel()。所以上述两个方法的调用就变成了...

    桑鱼

扫码关注云+社区

领取腾讯云代金券