你可能需要知道的前端小知识——JavaScript函数的执行

·  阅读 55

函数的执行

函数分类

  • 普通函数:function关键字定义的函数

  • 箭头函数:=>运算符定义的函数

  • 生成器函数:用function*定义的函数

  • 类:class语法糖定义的函数式

  • 方法:类中定义的函数

  • 异步函数:普通函数、箭头函数和生成器函数加async关键字

  • 对于普通变量而言,这些函数没有本质区别。行为差异在于this

  • 回顾:thisValue

函数执行过程

  • JavaScript使用栈来管理执行上下文,当有函数需要被执行时就进栈一个执行上下文,栈中每一项包含一个关于外层词法环境的链表,调用结束后,执行上下文出栈。

  • 几个私有属性

    • 函数有私有属性[[Environment]]:保存函数定义时的环境
    • JavaScript的私有属性[[thisMode]]
      • lexical:表示从上下文中找this
      • global:表示当this为undefined时,取全局对象
      • strict:当严格模式下,this严格按照调用时传入的值
  • 当一个函数被执行时,会创建一条新的执行环境记录。

    • 记录的外层词法环境会被设置成函数的[[Environment]],这个动作会切换上下文。
    • 根据[[thisMode]]标记记录的[[ThisBindingStatus]]属性。
      • 代码执行遇到this时,会储层检查当前词法环境记录汇总的[[ThisBindingStatus]],当找到有this的环境记录时,获取this
        • addition:嵌套的箭头函数中的代码都是指向最外层的this

更自由的使用this

  • Function.prototype.callFunction.prototype.apply
    • 作用是一样的,传参方式不同,都是通过一个给定的this值和参数来调用一个函数
  • Function.prototype.bind
    • 创建一个新的函数,在被调用时,新函数的this被指定为bind()的第一个参数,其余参数作为新函数的参数
  • 不接受没有绑定this值的函数:箭头函数/类等,无法改变this值,但是可以传参。

总结

  • 对于this和函数执行上下文,知道了其中的管理方式和切换方式,就不难理解了。
  • 欢迎评论讨论。
分类:
前端
标签:
分类:
前端
标签: