可为空的对象必须具有一个值_前端:这里有8个常见的JavaScript经典问题,总有一个你不会的...

参考前端小智:https://juejin.im/post/5d2d146bf265da1b9163c5c9

b7badd4a7ef92bbebeb7ab859f1a4d03.png

1.了解函数提升

22fd2f95a861f54f739cb7f17658dbe9.png

使用var关键字声明的变量在JavaScript中会被提升,并在内存中分配值undefined。 但初始化恰发生在你给变量赋值的地方。 另外,var声明的变量是函数作用域的,而let和const是块作用域的。

2.什么是暂时死区TDZ

be3317227eb642f346314b9404161462.png

let和const声明可以让变量在其作用域上受限于它所使用的块、语句或表达式。与var不同的是,这些变量没有被提升,并且有一个所谓的暂时死区(TDZ)。试图访问TDZ中的这些变量将引发ReferenceError,因为只有在执行到达声明时才能访问它们。

下表概述了与JavaScript中使用的不同关键字声明的变量对应的提升行为和使用域:

四个选项:关键字,提升,作用域,创建全局属性。

264391f922b2883e4b1814883875220b.png

3.如何保存 i 的指向?

在for循环的头部声明带有var关键字的变量会为该变量创建单个绑定(存储空间)。

0c8a6f589d3ae8313869dc056af4c148.png

如果使用 let 声明一个具有块级作用域的变量,则为每个循环迭代创建一个新的绑定。

ad1e19cd90d00afee3f6447e29d92b1b.png

解决这个问题的另一种方法是使用闭包

223eb8531167ee150efcebecfeb4d0dc.png

4.是否存在堆栈溢出?

eebe0d51f85268e6687ac94b09a15227.png

JavaScript并发模型基于“事件循环”。 浏览器是执行JS代码提供运行时环境之一。

浏览器的主要组件包括调用堆栈事件循环**,任务队列Web API**。 像setTimeout,setInterval和Promise这样的全局函数不是JavaScript的一部分,而是 Web API 的一部分。 JavaScript 环境的可视化形式如下所示:

e5cbdb432b81abb6266c62d3d65570a6.png

JS调用栈是后进先出(LIFO)的。引擎每次从堆栈stack中取出一个函数,然后从上到下依次运行代码。每当它遇到一些异步代码,如setTimeout,就把它交给Web API(箭头1)。因此,每当 事件 被触发时,callback 都会被发送到任务队列(箭头2)。

事件循环(Event loop)不断地监视任务队列(Task Queue),并按它们排队的顺序一次处理一个回调。每当调用 堆栈(call stack) 为空时,Event loop获取回调并将其放入堆栈(stack )(箭头3)中进行处理。请记住,如果调用堆栈不是空的,则事件循环不会将任何回调推入堆栈

现在,有了这些知识,让我们来回答前面提到的问题:

步骤:

  1. 调用 foo()会将foo函数放入调用堆栈(call stack)
  2. 在处理内部代码时,JS引擎遇到 setTimeout
  3. 然后将foo回调函数传递给WebAPIs(箭头1)并从函数返回,调用堆栈再次为
  4. 计时器被设置为0,因此foo将被发送到任务队列(箭头2)。
  5. 由于调用堆栈是空的,事件循环将选择foo回调并将其推入调用堆栈进行处理。
  6. 进程再次重复,堆栈不会溢出。

5.执行foo函数,页面是否卡死(卡顿)?

必须会卡死!

bd2ec99cdbfb2088f90be783289666d9.png

大多数时候,开发人员假设在事件循环图中只有一个任务队列。但事实并非如此,我们可以有多个任务队列。由浏览器选择其中的一个队列并在该队列中处理回调

在底层来看,JavaScript中有宏任务微任务。setTimeout回调是宏任务,而Promise回调是微任务

主要的区别在于他们的执行方式。宏任务在单个循环周期中一次一个地推入堆栈,但是微任务队列总是在执行后返回到事件循环之前清空。因此,如果你以处理条目的速度向这个队列添加条目,那么你就永远在处理微任务。只有当微任务队列为空时,事件循环才会重新渲染页面。每次调用'foo'都会继续在微任务队列上添加另一个'foo'回调,因此事件循环无法继续处理其他事件(滚动,单击等),直到该队列完全清空为止。 因此,它会阻止渲染。

6.如何使 obj 展开运算而不导致类型错误?

var obj = { x: 1, y: 2, z: 3 };[...obj]; // TypeError 

展开语法 和 for-of 语句遍历 iterable对象 定义要遍历的数据。Array 或 Map 是具有默认迭代行为的内置迭代器。对象不是可迭代的,但是可以通过使用iterable和iterator协议使它们可迭代。

Mozilla文档中,如果一个对象实现了@@iterator方法,那么它就是可迭代的,这意味着这个对象(或者它原型链上的一个对象)必须有一个带有@@iterator键的属性,这个键可以通过常量Symbol.iterator获得。

上述语句可能看起来有点冗长,但是下面的示例将更有意义:

56368b46a4235a24ed120a17670ecd5b.png

还可以使用 generator 函数来定制对象的迭代行为:

368e73e45765185e1e56e611e2afdfb0.png

7.打印的结果是什么

知识点:

981173d400878800b00f1c71997e07cf.png

for-in循环遍历对象本身的可枚举属性以及对象从其原型继承的属性。 可枚举属性是可以在for-in循环期间包含和访问的属性。

现在你已经掌握了这些知识,应该很容易理解为什么我们的代码要打印这些特定的属性:

e52e3ab0ed7b0eabf0bbef57277e9412.png

8.this 始终指向调用方法的对象

在全局范围内初始化x时,它成为window对象的属性(不是严格的模式)。看看下面的代码:

0a717854de51dc01ce49d00305804df7.png

可以断言:

window.x === 10; // true

this 始终指向调用方法的对象。因此,在foo.getx()的例子中,它指向foo对象,返回90的值。而在xGetter()的情况下,this指向 window对象, 返回 window 中的x的值,即10。

要获取 foo.x的值,可以通过使用 Function.prototype.bind 将this的值绑定到foo对象来创建新函数。

let getFooX = foo.getX.bind(foo);getFooX(); // 90

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/332395.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Struts2的配置文件struts.xml详解

<?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN""http://struts.apache.org/dtds/struts-2.3.dtd"> <struts><!-- 所有匹…

hibernate教程_Hibernate多对多教程

hibernate教程介绍&#xff1a; 在本教程中&#xff0c;我们将学习使用Hibernate ManyToMany注释定义和使用多对多实体关联。 上下文构建&#xff1a; 为了继续学习本教程&#xff0c;我们假设我们有两个实体– 雇员和资格&#xff1a; 众所周知&#xff0c;一名员工可以拥有…

python常用命令格式_python常用命令有哪些

原标题&#xff1a;python常用命令有哪些 Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言。它包含了许多命令来帮助我们实现各种各有的功能&#xff0c;接下来在文章中为大家分享【推荐课程&#xff1a;Python教程】 &#xff08;1&#xff09;打开csv文件…

java.lang.ClassNotFoundException: javax.servlet.jsp.jstl.core.LoopTag

开发工具&#xff1a;IntelliJ IDEA for Mac 开发项目&#xff1a;struts2-demo 构建工件&#xff1a;Maven 问题描述&#xff1a;在 jsp 中使用了 jstl 标签 <c:forEach>&#xff0c;浏览器访问 Action 组件提示错误&#xff1a; java.lang.ClassNotFoundException: ja…

latex 多行公式_Markdown中输入多行并列的公式

本篇旨在以两个Markdown文件编辑器-Typora与Visual Code Studio为例&#xff0c; 说明对于多行并列公式不同的处理方式。Latex中输入多行并列公式在latex文件编辑器中使用align环境输入多行并列的公式&#xff0c; 如下例&#xff1a;begin{align} x & v_0costheta t y &am…

java 常规类的可见性_Java 12常规可用性

java 常规类的可见性马克雷因霍尔德&#xff08;Mark Reinhold&#xff09; 今天宣布 &#xff0c;“ Java 12的参考实现JDK 12现在已全面上市。” Reinhold在该公告中指出&#xff0c;“可以从https://jdk.java.net/12获得来自Oracle的GPL许可的OpenJDK构建&#xff0c;并且“…

python支持复数以及相关的运算吗_Python: 复数的数学运算

写的最新的网络认证方案代码遇到了一个难题&#xff0c;唯一的解决办法就是使用复数空间&#xff0c;需要使用复数来执行一些计算操作。 复数可以用使用函数complex(real, imag) 或者是带有后缀j 的浮点数来指定。 比如&#xff1a; >>> a complex(2, 4) >>>…

分页查询的实现(struts2+jsp+jstl+el)

文章目录MySQL的分页查询语句如何设置《上一页》和《下一页》的有效性呢&#xff1f;示例代码MySQL的分页查询语句 使用 MySQL 的分页查询语句 select * from project limit 5,5&#xff0c;打开表 project&#xff0c;获取全部记录&#xff0c;只要第 5 条记录后的 5 条记录&…

junit 测试执行顺序_JUnit 5中的测试执行顺序

junit 测试执行顺序一般实践认为&#xff0c;自动化测试应能够独立运行且无特定顺序&#xff0c;并且测试结果不应依赖于先前测试的结果。 但是在某些情况下&#xff0c;可以证明特定的测试执行顺序是正确的&#xff0c;尤其是在集成或端到端测试中。 默认情况下&#xff0c;在…

python的起源和发展_Python入门第一课——Python的起源、发展与前景!

我们在做任何一件事情之前&#xff0c;我们都会通过各种渠道去搜集事情的信息&#xff0c;了解事情的来龙去脉&#xff0c;学习一门编程语言也是如此&#xff0c;只有知根知底&#xff0c;我们才能有明确的方向和目标&#xff0c;以及底气去完成这件事情&#xff0c;今天我带大…

MySQL分页查询语句

单表分页查询语句&#xff1a; select * from tbl_name limit start_index, rows_per_page&#xff1b;start_index&#xff1a;每页数据的起始行的索引值&#xff0c;行的索引值从 0 开始 rows_per_page&#xff1a;每页显示的行数 page_num&#xff1a;查询的页码 关系式&a…

spring依赖注入_Spring依赖注入

spring依赖注入介绍&#xff1a; 在设计良好的Java应用程序中&#xff0c;这些类应尽可能独立。 这样的设计提高了组件的可重用性。 它还使对各个组件进行单元测试变得更加容易。 依赖注入的概念促进了Java对象之间的松散耦合。 在本教程中&#xff0c;我们将讨论Spring框架中…

excel 时间戳_我没有Excel基础,可以学Power BI吗

当然可以&#xff01;没有Excel基础一样可以熟练掌握Power BI !Excel基础可以略微影响Power BI的上手速度&#xff0c;却不能决定最终对Power BI的运用能力。如果有Excel基础学习Power BI在最初阶段会更快&#xff0c;但经过实践证明&#xff0c;Excel基础对于PBI的学习进度影响…

Windows下查看wifi密码的命令

netsh wlan show profiles namewifi名称 keyclear

lemon geci_创建一个Java :: Geci生成器

lemon geci几天前&#xff0c;我写了有关Java :: Geci架构&#xff0c;代码生成原理以及生成Java源代码的可能不同方式的文章。 在本文中&#xff0c;我将讨论在Java :: Geci中创建生成器有多么简单。 您好&#xff0c;Wold生成器 HelloWorld1 最简单的生成器是Hello, World…

安卓 图像清晰度识别_OCR文字识别的功能及注意事项

首先OCR文字识别是指电子设备检查纸上打印的字符&#xff0c;然后用OCR文字识别技术翻译成计算机文字的过程&#xff1b;就是对文本资料进行扫描&#xff0c;然后对图像文件进行分析处理&#xff0c;获取文字及版面信息的过程。那么在日常生活中有很多公司有文字识别这方面需求…

薪资/薪水/金额的数据类型

MySQL 数据库中&#xff0c;金额字段使用的数据类型和长度建议为&#xff1a;decimal(11,2) 而对应的实体类的成员变量的数据类型建议为&#xff1a;BigDecimal

java中list去除空值_Java –从列表中删除所有空值

java中list去除空值介绍&#xff1a; 在本文中&#xff0c;我们将学习如何使用普通的Java&#xff0c;Java 8 lambda表达式和某些第三方库从Java 列表中删除空值 。 所以&#xff0c;让我们开始吧&#xff01; 从Java中的 让我们探索从Java 列表中删除null的不同方法&#xf…

URI is not registered (Settings | Languages Frameworks | Schemas and DTDs)

参考&#xff1a; https://www.cnblogs.com/ttflove/p/6341469.html https://blog.csdn.net/c_learner_/article/details/107228678