重学前端
程劭非(winter)
前手机淘宝前端负责人
105348 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

JavaScript执行(三):你知道现在有多少种函数吗?

Function.prototype.bind
Function.prototype.apply
Function.prototype.call
[[thisMode]]私有属性
[[Environment]]私有属性
方法中的this
箭头函数中的this
普通函数中的this
函数类型与new搭配使用的效果
new调用函数与直接调用的this取值区别
操作this的内置函数
this关键字的机制
this关键字的行为
上下文切换时机
异步函数
生成器函数
方法
箭头函数
普通函数
补充阅读:new与this
执行上下文切换机制
JavaScript函数类型
JavaScript函数类型与执行上下文切换机制

该思维导图由 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
收起评论
显示
设置
留言
79
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部