JavaScript执行（三）：你知道现在有多少种函数吗？

winter



该思维导图由 AI 生成，仅供参考

在前一篇文章中，我们大致了解了执行上下文是什么，也知道了任何语句的执行都会依赖特定的上下文。
一旦上下文被切换，整个语句的效果可能都会发生改变。那么，切换上下文的时机就显得非常重要了。
在 JavaScript，切换上下文最主要的场景是函数调用。在这一课，我们就来讲讲函数调用切换上下文的事情。我们在讲函数调用之前，首先来认识一下函数家族。
函数在 ES2018 中，函数已经是一个很复杂的体系了，我在这里整理了一下。
第一种，普通函数：用 function 关键字定义的函数。
示例：
function foo(){
    // code
}
第二种，箭头函数：用 => 运算符定义的函数。
示例:
const foo = () => {
    // code
}
第三种，方法：在 class 中定义的函数。
示例：
class C {
    foo(){
        //code
    }
}
第四种，生成器函数：用 function * 定义的函数。
示例：
function* foo(){
    // code
}
第五种，类：用 class 定义的类，实际上也是函数。
示例：
class Foo {
    constructor(){
        //code
    }
}
第六 / 七 / 八种，异步函数：普通函数、箭头函数和生成器函数加上 async 关键字。
示例：
async function foo(){
    // code
}
const foo = async () => {
    // code
}
async function foo*(){
    // code
}
ES6 以来，大量加入的新语法极大地方便了我们编程的同时，也增加了很多我们理解的心智负担。要想认识这些函数的执行上下文切换，我们必须要对它们行为上的区别有所了解。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

JavaScript执行（三）：你知道现在有多少种函数吗？本文介绍了JavaScript中的不同函数类型及其执行上下文切换机制。文章首先介绍了ES2018中的八种函数类型，包括普通函数、箭头函数、方法、生成器函数、类、异步函数等。随后，重点讲解了this关键字的行为和机制，以及内置函数如Function.prototype.call和Function.prototype.apply对this值的操作。此外，还掏出了new与this的关系。通过本文，读者可以快速了解JavaScript中不同函数类型的特点，以及函数执行上下文切换的机制，对于理解JavaScript中函数的行为和机制有很好的帮助。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(79)

最新
精选

飞
老师，这个例子中的最后一行代码o.showThis(); // global 好像写错了，应该是C的实例o吧。 class C { showThis() { console.log(this); } } var o = new C(); var showThis = o.showThis; showThis(); // undefined o.showThis(); // global
作者回复: 哦哦对的对的我改一下
2019-02-28
3
33
x
es6中箭头函数是没有this的吧，所以他不能用作构造函数，他的this取决于外部环境
作者回复: 不是“没有this”，是“使用定义时的this”。也不是“所以不能用作构造函数”，没有这个因果关系。
2019-06-24

5
奋奋
老师我这样对Reference的理解对吗？？？ showThis(); // Reference中的对象是global (false || showThis)() // Reference由于运算而被解引用，然后触发this机制[[thisMode]]私有属性的global取值
作者回复: 没错
2019-10-11

2
dennisleung
> 我们可以看到，仅普通函数和类能够跟 new 搭配使用，这倒是给我们省去了不少麻烦。老师请问这里是省去了什么麻烦呢？
作者回复: 你不需要考虑箭头函数或者async函数跟new搭配会发生什么了
2019-08-06


lsy
[[ThisMode]] 是 global （普通函数）的时候，是从哪里取的 this 值呢
作者回复: 取global啊
2019-07-09


东
var o = { foo: function() {console.log(11111)} } new o.foo() //11111 对象方法用new 调用不会报错呢？
作者回复: 不会
2019-07-08


咲夜
不太能理解为何下面这段代码中 showThis 为 undefined class C { showThis() { console.log(this); } } var o = new C(); var showThis = o.showThis; showThis(); // undefined o.showThis(); // o
作者回复: 就是一个普通的函数的行为。
2019-06-24
2

令狐洋葱
老师，我想问下 ThisMode 和 ThisBindingStatus 这些只是的获取来源是哪里？是从es标准中查阅的么。
作者回复: 对
2019-06-07


奥斯特洛夫斯基
var a = 1; foo(); 在别处定义了 foo： var b = 2; function foo(){ console.log(b); // 2 console.log(a); // error } 为什么我执行出来是undefined ，1
2019-02-28
23
110
钟凯
关于this，Kyle Simpson有四条总结： 1. 由new调用? 绑定到新创建的对象。 2. 由call或者apply(或者bind)调用? 绑定到指定的对象。 3. 由上下文对象调用? 绑定到那个上下文对象。 4. 默认:在严格模式下绑定到undefined，否则绑定到全局对象。例外：箭头函数不适用以上四条规则，它会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。
2019-02-28
2
88

收起评论