当图片已经被成功地重新调整大小后,在 applyFilter 函数中为图片应用一个滤镜。 在图片被压缩和添加滤镜后,保存图片并且打印成功的日志! 最后,代码很简单如图: 注意到了吗?...尽管以上代码也能得到我们想要的结果,但是完成的过程并不是友好。 使用了大量嵌套的回调函数,这使我们的代码阅读起来特别困难。...最终,这变成了一个混乱的嵌套回调。 幸运的,Promise 可以帮助我们解决这个问题! 首先,让我们重写整个代码块,以便每个函数返回一个 Promise 来代替之前的函数。...这样,我们就可以暂停一个异步函数吗?很好,但这到底是什么意思? 当我们运行下面的代码块时让我们看下发生了什么: 额,这里发生了什么呢? 首先,JavaScript 引擎遇到了 console.log。...现在,因为遇到了await关键字,异步函数myFunc被暂停,JavaScript引擎跳出异步函数,并且在异步函数被调用的执行上下文中继续执行代码:在这个例子中是全局执行上下文!
1.1 那么什么是执行上下文? 执行上下文,它是比较抽象的概念,就是当前JavaScript代码被解析和执行时所在环境,so,在JavaScript中运行任何的代码都是在执行上下文中运行的。...其实词法环境就是描述环境的对象,先确定当前环境的外部引用,环境记录初始化,就是常遇到的声明提前,全局代码执行之前,先初始化全局环境;函数代码执行之前,先初始化函数环境。...so,这就是为什么可以在声明之前访问var定义的变量,但如果在声明之前访问let和const定义的变量就会提升引用错误的原因。...作用域控制着变量和参数的可见性以及生命周期,在一块代码块中定义的所有变量在代码块的外部是不可见的 ,定义在代码块中的变量在代码块执行结束后会释放。...它允许你为异步操作的成功和失败分别绑定相应的处理方法。这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象。
如果您发现本文有帮助,请您点赞,收藏,评论,留下您学习的脚印?,我很乐意谈论? 1. 执行上下文/作用域链/闭包 什么鬼,这是什么鬼??...其实词法环境就是描述环境的对象,先确定当前环境的外部引用,环境记录初始化,就是常遇到的声明提前,全局代码执行之前,先初始化全局环境;函数代码执行之前,先初始化函数环境。...so,这就是为什么可以在声明之前访问var定义的变量,但如果在声明之前访问let和const定义的变量就会提升引用错误的原因。...作用域控制着变量和参数的可见性以及生命周期,在一块代码块中定义的所有变量在代码块的外部是不可见的 ,定义在代码块中的变量在代码块执行结束后会释放。...它允许你为异步操作的成功和失败分别绑定相应的处理方法。这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象。
这里还是有个疑问,为什么在同一个JS代码块中在后面定义的函数可以调用,而在后面定义的变量却报not undefined的错误呢?...考察如下代码: javascript"> test(); //在同一个JS代码块中,函数可以先调用,后定义 alert(lvlv);...答:可以同时加载,一个是JS引擎在工作,一个是http超文本传输协议在工作,二者可以同时进行。但是JS引擎在解析JS代码时,需要等待一个完整的JS代码块加载完成。...所以修改后的代码实际上是没有在函数作用域内定义新的变量,所以输出结果就是global local。...其实很简单,带上括号就是将hi函数执行的结果返回给变量aaa,不带括号,就是将函数hi赋给变量bbb,这个有点类似于CC++中的函数指针。
1、代码块 定义:JavaScript中的代码块是指由标签分割的代码段。...: // 正常调用到函数alert(sum(2, 6));function sum(a, b) { return a + b; }执行了声明式函数,在预编译期声明函数及被处理了,所以即使sum( )调用函数放在声明函数前也能执行...:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码;函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。...function show(){ alert("我是另外一个代码块中的函数"); } 解析:为什么运行上面的代码浏览器会报错?...声明函数不是会在预处理期就会被处理了吗,怎么还会找不到show()函数呢?
「作用域」,「闭包」 都是和「执行上下文」密切相关的两个概念。 在解释「执行上下文」是什么之前, 我们还是先回顾下「作用域」 和 「闭包」。 正文 1. 作用域 什么是作用域呢?...毕竟,闭包里的自由变量会绑定在代码块上,在离开创造它的环境下依旧生效,而使用代码块的人可能无法察觉。 闭包里的自由变量的形式有很多,举个简单例子。...,代码块是相同的,但若是执行a(1)和b(1)的结果却是不同的,原因在于这两者所绑定的自由变量是不同的,这里的自由变量其实就是函数体里的 p1 。...执行上下文 首先, 执行上下文是什么呢? 简单来说, 执行上下文就是Javascript 的执行环境。 当 Javascript 执行一段可执行代码的时候时,会创建对应的执行上下文。...Javascript 解释器在初始化执行代码时,会创建一个全局执行上下文到栈中,接着随着每次函数的调用都会创建并压入一个新的执行上下文栈。 函数执行后,该执行上下文被弹出。
不可变性 (Immutability) 你还记得你第一次看到下面的代码是什么时候吗var x = 1; x = x + 1; 教你初中数学的老师看到以上代码,可能会问你,你忘记我给你教的数学了吗?...在in块中,计算可以包含在let块中定义的值,即 x,返回计算结果 x + y + z,或者更准确地说,返回 1 + y + z,因为 x = 1。...重构 让我们考虑一下重构,下面是一些Javascript代码: 我们以前可能都写过这样的代码,随着时间的推移,开始意识到这两个函数实际上是相同的,函数名称,打印结果不太一样而已。...现在可以调用高阶函数(这在Javascript中有效,因为Regex.exec在找到匹配时返回一个truthy值): validateValueWithFunc('123-45-6789', /^\d{...例如,只要childFunc 还引用 child 的作用域,child 的作用域就存在。 闭包具体还看看之前整理的一篇文章:我从来不理解JavaScript闭包,直到有人这样向我解释它...
大家好,又见面了,我是你们的朋友全栈君。 一 目的 使开发人员对javascript语言有较深入的理解,提升开发人员的js功底,在以后的项目中更准确、高效的使用js,编写出高质量的js程序。...然后执行函数f1,在执行f1中的所有代码之前,会创建一个执行环境,放入执行环境栈。 然后执行函数f2,在执行f2中的所有代码之前,会创建一个执行环境,放入执行环境栈。...百度百科的描述是:闭包是指可以包含自由(未绑定到特定对象)变量的代码块;这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)。...结合前面执行环境的内容,具体过程如下: 执行intIterator函数之前 intIterator函数返回之前 iter函数返回之前 iter函数返回之后 注意...一般有的操作在时序上依赖于某个异步操作的结果。
什么是内存泄漏? 内存泄漏是软件无法回收的已分配的内存块。 Javascript 提供了一个垃圾收集程序,但这并不意味着我们就能避免内存泄漏。为了符合垃圾收集的条件,该对象必须不被其他地方引用。...主要还是我们应该避免保留不必要的资源。来看看一些常见的场景。 1.计时器的监听 setInterval() 方法重复调用函数或执行代码片段,每次调用之间有固定的时间延迟。...它返回一个时间间隔ID,该ID唯一地标识时间间隔,因此您可以稍后通过调用 clearInterval() 来删除它。 我们创建一个组件,它调用一个回调函数来表示它在x个循环之后完成了。...尽管它很强大,但我们也要谨慎的使用它。一旦完成了对对象的观察,就要记得在不用的时候取消它。...然而,一旦组件被卸载,观察者会发生什么?它不会被清除,那内存可就泄漏了。我们怎么解决这个问题呢?
我们遗漏了什么? A 部分:类型系统编译器概述 语法 vs 语义 语法和语义之间的区别对于早期的运行很重要。 语法 - Syntax 语法通常是指 JavaScript 本机代码。...在进一步讨论之前,我们需要快速了解一下 JavaScript 编译器中的一个重要机制 AST。 关于 AST 详细介绍请看这篇文章。 AST 的意思是抽象语法树 ,它是一个表示程序代码的节点树。...最后返回一个 programmast,它是一个包含两个 AST 块的程序。 在AST中,您可以看到参数标识符 a 上的 typeAnnotation,与它在代码中的位置相匹配。...在我们进一步讨论之前,对于每种类型,我们将使用的基本逻辑是: 函数声明:检查参数的类型是否有效,然后检查函数体中的每个语句。...我们遗漏了什么? 如前所述,类型编译器还有许多其他部分,我们在编译器中省略了这些部分。其中包括: 解析器:我们是手动编写的 AST 代码,它们实际上是在类型的编译器上解析生成。
你会看到一个有趣的命名:Call Stack(在Firefox中,你可以在代码中插入一个断点后看到调用栈): 什么是调用栈(Call Stack)?...其中一个组件是调用栈,它与全局内存和执行上下文一起运行我们的代码。你准备好迎接他们了吗? JavaScript 引擎和全局内存 我认为 JavaScript 既是编译型语言又是解释型语言。...单线程的JavaScript 我们说 JavaScript 是单线程的,因为有一个调用栈处理我们的函数。也就是说,如果有其他函数等待执行,函数是不能离开调用栈的。 当处理同步代码时,这不是什么问题。...异步JavaScript,回调队列和事件循环 全局内存、执行上下文和调用栈解释了同步 JavaScript 代码在浏览器中的运行方式。然而我们还错过了一些东西。当有异步函数运行时会发生什么?...我所指的异步函数是每次与外界的互动都需要一些时间才能完成的函数。例如调用 REST API 或调用计时器是异步的,因为它们可能需要几秒钟才能运行完毕。
我们已经把问题缩小到了processData函数上。在这三种情况中,你对优化途径的假设是什么?我看了第一种情况,发现我们在两个不同的地方保存了两块不同的数据,然后只是返回一个对象。...我看到我们在连续调用save,尽管其中一个并不依赖于另一个。 我们可以将我们的两个save调用并行化。...我觉得它们是一种精神上的负担。每当有try/catch时,我们现在不仅要担心函数返回什么,还要担心它抛出什么。我们不仅有分支逻辑,这增加了复杂性,而且还必须担心同时处理两种不同的范式。...JavaScript中的try块会立即将这部分代码排除在许多引擎优化之外,因为代码不能再被分解成确定的片段。...换句话说,在JavaScript中,同样的代码在被try块包裹的情况下会比不被包裹的情况下运行得更慢,即使它没有抛出的可能性。Promise让我们看看Promise在做什么。
摘要: 嗨,新一年的招聘季,你找到更好的工作了吗?小姐姐最近刚换的工作,来总结下面试必备小技能,从this来看看javascript,让我们更深入的了解它。...接下来这篇文章会把我自己对于JavaScript中这些点通过this指向做个总结并分享给大家,希望可以帮助大家更好的了解这些所谓的难点。 一、this this是什么?this的常见使用场景呢?...对象,但是如果我换种形式,将其换成构造函数来调用呢,结果又会如何呢,直接上代码 function Test(){ this.a='this is test'; console.log(this.a...第三问:此时,实例化var b=new B(),那么b.constructor指向的是构造函数A还是B呢? 通过之前的原型链解读,小伙伴们找到答案了吗?是不是虽然有点绕,但其实很简单呢!...当然还有一种常见的方式可以实现上面的效果,即从自执行匿名函数中返回一个函数。
二、假OOP范式引起的内存泄漏 在这里我为什么叫他假OOP呢,原因是这代码是想实现OOP范式却让自己掉到坑里去了,先上代码: var fun = function(arg){ this.sarg...闭包函数内引用外面的this对象(var self = this)。 然后,通过new的方式调用fun,返回值用fn接受,这里谁都知道返回的是一个函数,所以可以括号运算符进行执行。...此图是上述代码片段在chrome浏览器中执行完成后,不能被gc回收的内存变量。...然后上述代码在构造函数中又返回了一个函数,且函数中引用了new出来的新对象,返回函数赋值给了fn变量 4....2.3 总结: 因为正常情况下,我们对一个function进行new操作的时候,在构造函数内是不会进行返回的,其实这个时候new操作默认给你返回的就是构造函数中的this对象。
在开始之前,首先要确保我们对函数的理解是扎实的。 快速回顾:JavaScript 函数 什么是函数? 函数是在其中有一组代码的逻辑构件,用来执行特定任务。...调用一个函数 在下列任何一种情况下,将调用之前声明的函数: 发生事件时,例如,用户单击按钮,或者用户从下拉列表中选择某些选项等等。 从 javascript 代码中调用该函数时。...按照 MDN 的描述:回调函数是作为参数传给另一个函数的函数,然后通过在外部函数内部调用该回调函数以完成某种操作。 让我用人话解释一下,回调函数是一个函数,将会在另一个函数完成执行后立即执行。...当 JavaScript 忙于执行一个块时,它不可能移到下一个块。 换句话说,我们可以认为 JavaScript 代码本质上总是阻塞的。...但是这种阻塞性使我们无法在某些情况下编写代码,因为在这些情况下我们没有办法在执行某些特定任务后立即得到结果。 我谈论的任务包括以下情况: 通过对某些端点进行 API 调用来获取数据。
稀疏数组遇上 map( ) 函数一个惊喜那么,当你在我们的稀疏数组上运行 map() 函数时会发生什么呢?...因为在我们的停车管理员完成巡逻后,停车场(我们的数组)必须保持相同的大小!类似地,JavaScript 的 map() 方法将始终返回与原始数组相同长度的新数组。...为什么?当我们在 JavaScript 中的数组上使用 map() 时,我们在参数中提供的函数会在分配了值的每个索引上调用。我们知道它会忽略空白位置,但它确实会注意每个具有分配值的元素。...,重要的是在调用任何方法之前处理 undefined 值:在应用 map() 之前将其过滤掉,或者使用 try-catch 块。...我们准备好总结了吗?在真实应用程序中,稀疏数组是否存在?我现在还没有答案,并承诺在有答案时更新文章。但是,即使答案是明确的“不”,这也无关紧要。
当希望立刻调用函数时,使用 .call() 或 .apply(),同时会修改上下文。 call 函数拯救了我! 让我们看看上面论述代表什么意思。假设你的数学老师要求你创建一个库并提交它。...但 ES6 破坏了块级变量的作用域,使之变成了全局作用域。 现在再来看看作用域的神奇之处。作用域可以通过闭包来实现。JavaScript 闭包就是一个函数返回另一个函数。...闭包是一个返回另一个函数和封装数据的函数。上面的字符生成器就是一个闭包。索引值在多个函数调用间保存。定义的内层函数可以访问外层函数定义的变量。这是不同的作用域。...正如我们之前提到的,this 在不同地方的表现不同。掌握 this 的用法吧。 5....在 JS 中,call 函数和 prototype 对象造就了继承。 7. 理解回调函数和 promises 回调函数是在输入/输出操作完成后执行的。
在之前的文章《掌握JavaScript的迭代器,助你更高效地处理异步编程》中,我已经详细介绍了迭代器的相关知识。如果你还没有阅读,建议先看看那篇文章,会对你理解本文的内容有很大帮助。...在处理所有订单的过程中,我们使用for await...of语法依次获取每个订单的处理结果,并进行相应的操作。 为什么选择 Async Generators?...比如在处理多个异步任务时,你可以使用 Async Generators 按顺序执行每个任务,并在每个任务完成后处理结果,而不需要嵌套大量的回调函数。...函数在每个步骤完成后 yield,让调用者可以跟踪进度或在步骤之间执行额外操作。 handleOrderProcessing 函数使用 for await...of 循环迭代工作流的每个步骤。...每个步骤完成后,它会记录完成情况,从而提供订单处理进度的可见性。 添加了错误处理,通过 try-catch 块捕获错误。
仓库地址:https://github.com/lydiahallie/javascript-questions JavaScript 进阶问题列表 我在我的Instagram上发布了每日JavaScript...在我们声明(初始化)它们之前,它们是不可访问的。 这被称为“暂时死区”。 当我们在声明变量之前尝试访问变量时,JavaScript会抛出一个ReferenceError。...在每次迭代期间,i将被创建为一个新值,并且每个值都会存在于循环内的块级作用域。 ---- 3. 下面代码的输出是什么?...您自己编写的代码并不是实际的函数。 该函数是具有属性的对象,此属性是可调用的。 ---- 11. 下面代码的输出是什么?....bind方法会返回函数的拷贝值,但带有绑定的上下文! 它不会立即执行。 ---- 34. 下面代码的输出是什么?
领取专属 10元无门槛券
手把手带您无忧上云