重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

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

winter 2019-02-28
在前一篇文章中,我们大致了解了执行上下文是什么,也知道了任何语句的执行都会依赖特定的上下文。
一旦上下文被切换,整个语句的效果可能都会发生改变。那么,切换上下文的时机就显得非常重要了。
在 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/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(48)

  • 奥斯特洛夫斯基
    var a = 1;
    foo();

    在别处定义了 foo:

    var b = 2;
    function foo(){
        console.log(b); // 2
        console.log(a); // error
    }
    为什么我执行出来是undefined ,1
    2019-02-28
    7
    83
  • 钟凯
    关于this,Kyle Simpson有四条总结:
    1. 由new调用? 绑定到新创建的对象。
    2. 由call或者apply(或者bind)调用? 绑定到指定的对象。
    3. 由上下文对象调用? 绑定到那个上下文对象。
    4. 默认:在严格模式下绑定到undefined,否则绑定到全局对象。
    例外:箭头函数不适用以上四条规则,它会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。
    2019-02-28
    51
  • Rushan-Chen
    老师写的 "在别处定义了foo" 的意思是,这句话上下两部分的代码,不在同一个文件哒~
    已经有同学贴了代码,是这样的:
    ```js
    // 这是 foo.js 文件里的代码
    var b = 2;
    module.exports = function() { // 导出function
      console.log(b);
      console.log(a);
    };
    ```
    ```js
    // 这是test.js 文件里的代码
    var foo = require("./foo.js"); // 引入function 为foo
    var a = 1;
    foo();
    // node 执行 test.js 输出:
    // -> 2
    // -> ReferenceError: a is not defined
    ```
    2019-03-02
    1
    26
  • 郭鹏飞277
    老师,这个例子中的最后一行代码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
    25
  • Thomas Cho
    我发现啊,不能只看文中代码结果,还是得自己跑一下,我看了文章后很是疑惑,跑了一下[[Environment]]下方那段代码后,打印出来的是 undefined和1。而不是2和error,不知为何
    2019-02-28
    12
  • 阿成
    这里先说声抱歉,之前可能误导了大家...
    这里更新一下答案😅
    @Rushan-Chen(虽然你并不能收到,希望极客时间赶紧增加@或者评论的功能,至少也展示个邮箱啊...不然找人都找不到,影响大家交流)
    --------------分割线-------------------
    文中,winter老师所说的“在别处定义”的意思,应该就是指在另一个模块中定义,即:

    在另一个模块中定义...这样引入这个模块时,b就定义且初始化了,而且在这个模块中访问不到变量a...
    // module a.js
    import {foo} from 'b.js'
    var a = 1
    foo()

    // module b.js
    var b = 2;
    export function foo () {
      console.log(b); // 2
      console.log(a); // error
    }

    其实,只要foo访问不到变量a就可以了嘛:
    var b = 2;
    function foo () {
      console.log(b); // 2
      console.log(a); // error
    }

    void function () {
    var a = 1
    foo()
    }()
    2019-03-16
    9
  • Tony
    晕得一塌糊涂... 结合上一章的 let var 来看, js 这门语言居然还能火成这样, 世界实在是太奇妙了😥
    2019-03-04
    5
  • zhangbao
    老师,您好,看完文章后,我有几个问题:

    1. 代码段

    ```
    class C {
        showThis() {
            console.log(this);
        }
    }
    var o = new C();

    o.showThis(); // 这里打印的 this 应该是 o 吗?
    ```

    2. 介绍函数时提到了“方法”,定义是“在 class 中定义的函数”。但是举代码例子时,举了对象方法的例子。方法定义成“作为属性值的函数”,是不是更贴切一点呢?

    3. 执行代码段

    ```
    var a = 1;
    foo();

    // 在别处定义了 foo:

    var b = 2;
    function foo(){
        console.log(b); // 2
        console.log(a); // error
    }
    ```

    后,控制台,打印出的 b 是 undefined,a 是 1。跟老师描述的不一样,是我理解错了吗?

    麻烦老师您解答一下,谢谢啦!
    2019-02-28
    4
  • Geek_376ed4
    // foo.js
    var b=2;
    module.exports = function() {
     console.log(b);//2
     console.log(a);//error

    };

    var foo = require("./foo.js");

    var a=1;

    foo();

    2019-03-01
    3
  • jacklovepdf
    按照老师的理解,应该少了一种,类的方法也是可以加async的,亲测有效。
    2019-06-19
    2
  • study
    @奥斯特洛夫斯基
    var和function,只是提升声明,代码提升完成是下面的代码:
    var a,b;
    function foo(){};
    a = 1;
    foo();
    b = 2;
    所以a的值为1,b为undefined
    2019-05-09
    2
  • Geek_fc1551
    winter老师普通函数不是方法吗?
    2019-11-27
    1
  • Mr.杨
    默认this 就是普通方法的this
    隐式this 变量接收方法后的this 会发生隐式指向错误
    显式this 对象.方法的this
    固定this call apply bind 的this
    分为四种
    2019-04-04
    1
  • var a = 1;
    foo();

    在别处定义了 foo:

    var b = 2;
    function foo(){
        console.log(b); // 2
        console.log(a); // error
    }
    为什么我执行出来是2,1
    2019-03-18
    1
  • 渭河
    var a = 1;
    foo();

    var b = 2;
    function foo(){
        console.log(b); // 2
        console.log(a); // 输出并不是老师说的error而是1
    }
    为什么存在这种情况
    2019-03-12
    1
  • itgou
    var a = 1;
    foo();

    在别处定义了 foo:

    var b = 2;
    function foo(){
        console.log(b); // 2
        console.log(a); // error
    }
    这段代码我在chrome上执行出来是undefined,1.
    我是写在一个js文件中,然后通过HTML的script引入,不知道老师说的在别处定义是什么意思,是写在两个js文件吗?

    如果是两个文件,HTML中引入文件的顺序不同,会有不同的结果,一种报错,一种两个值都正常打印,我都试了的,总之怎么也不会有老师说的那种结果。

    请老师看看是不是我哪里理解错了,还是老师写错了
    2019-03-09
    1
  • 乃乎
    `[[thisMode]]` 这个讲的很棒
    2019-03-04
    1
  • Rushan-Chen
    @阿成 我试了下你说的第二种方法,但是在全局里,只要在foo调用之前定义了a,a就可以被访问到:
    ```js
    var foo = (function() {
      let b = 2;
      return function() {
        console.log(b);
        console.log(a);
      };
    })();

    let a = 1;
    foo();
    // 2
    // 1
    ```
    想问你说的第2种方法,你是怎么实现的?(虽然你可能不会看到😂)
    2019-03-02
    1
  • 拼命十一郎
    var a = 1;
    foo();

    在别处定义了 foo:

    var b = 2;
    function foo(){
        console.log(b); // 2
        console.log(a); // error
    }


    js里,调用函数的时候,如果上面没有找到函数定义,会向下搜索用function开头定义的函数,但是其他的代码是不会识别的,所以我觉得执行函数foo()时,向下找到了foo()函数的定义,执行内部内容,这时已知的只有a=1,b的值还没有定义,所以console.log(b) undefined,console.log(a)=1。还是说这里的在别处定义有什么条件么?
    2019-02-28
    1
  • Scorpio
    自从用了箭头后,都很少使用call apply bind了。。。
    2019-02-28
    1
收起评论
48
返回
顶部