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

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

函数的执行

函数分类

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

总结

• 对于this和函数执行上下文，知道了其中的管理方式和切换方式，就不难理解了。
• 欢迎评论讨论。