草庐IT

JS执行机制及ES6

不见水星记 2023-03-28 原文

一、JS执行机制

  • JS语言有个特点是单线程，即同一时间只能做一件事。单线程就意味着，所有的任务需要排队，前一个任务结束，才会执行后一个任务，可能造成页面渲染不连贯。

  • 为了解决这个问题，利用多核CPU的计算能力，允许JS脚本创建多个线程，即同步和异步。

  • 同步任务：

    • 同步任务都在主线程上执行，形成一个执行栈。
    • 前一个任务结束后再去执行下一个任务，程序的执行顺序与任务的排列顺序是一致的同步的。
    • 比如做饭的同步做法，我们要烧水煮饭，等水开了，再去切菜，炒菜。

  • 异步任务：

    • 通过回调函数实现的，异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。

    • 在做一件事的同时，还可以去处理其他的事情。

    • 比如做饭的异步做法，在烧水的同时，利用这段时间，去切菜，炒菜。

      • 异步任务分类：
        • 1.普通事件，如click、resize等。
        • 2.资源加载，如load、error等。
        • 3.定时器，包括setTimeout、setInterval等。

  • 同步和异步本质的区别：在这条"流水线"上各个流程的执行顺序不同。

  • JS执行机制步骤：

    • 由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环，即event loop。

二、ES6概述

  • 新增了变量的声明方式、解构赋值、模板字符串、简化对象写法、箭头函数、函数形参默认值、rest参数、拓展运算符、新增数据类型（Set、Map、Symbol、BigInt）、promise、async/await等。

三、var、let、const的区别

区别 var let const
是否有块级作用域 ❌ ✔ ✔
是否存在变量提升 ✔ ❌ ❌
是否添加全局属性 ✔ ❌ ❌
能否重复声明变量 ✔ ❌ ❌
是否存在暂时性死区 ❌ ✔ ✔
是否必须设置初始值 ❌ ❌ ✔
能否改变指针指向 ✔ ✔ ❌

四、箭头函数与普通函数的区别

  • 箭头函数比普通函数更加简洁
    • 如果只有一个参数，可以省去参数的括号。
    • 如果函数体的返回值只有一句，可以省略大括号，且必须省略return。
  • 箭头函数没有自己的this
    • 箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。
  • call()、apply()、bind()等方法不能改变箭头函数中this的指向
    • 箭头函数的this指向要么是window，要么是它的外层。
  • 箭头函数不能作为构造函数使用
    • 箭头函数是ES6中的提出来的，它没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以不能New一个箭头函数；new操作符的实现步骤如下：
      • 1.创建一个对象
      • 2.将构造函数的作用域赋给新对象（也就是将对象的proto属性指向构造函数的prototype属性）
      • 3.指向构造函数中的代码，构造函数中的this指向该对象（也就是为这个对象添加属性和方法）
      • 4.返回新的对象，所以，上面的第二、三步，箭头函数都是没有办法执行的
  • 箭头函数没有自己的arguments
    • 箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是它外层函数的arguments值。
  • 箭头函数没有prototype
  • 箭头函数不能用作Generator函数，不能使用yield关键字

五、箭头函数的this指向

  • 箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this，所以是不会被new调⽤的，这个所谓的this也不会被改变。箭头函数的this指向外层函数的this。

六、扩展运算符的作用及使用场景

  • 对象扩展运算符
    • 对象的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。扩展运算符对对象实例的拷贝属于浅拷贝。
  • 数组扩展运算符
    • 数组的扩展运算符可以将一个数组转为用逗号分隔的参数序列，且每次只能展开一层数组。

七、对象与数组的解构

  • 解构是 ES6 提供的一种新的提取数据的模式，这种模式能够从对象或数组里有针对性地拿到想要的数值。
  • 对象的解构
    • 在解构对象时，是以属性的名称为匹配条件，来提取想要的数据的。
  • 数组的解构
    • 在解构数组时，以元素的位置为匹配条件来提取想要的数据的。

八、模板语法

  • 允许用${}的方式嵌入变量，优势有两个：
    • 在模板字符串中，空格、缩进、换行都会被保留，可以识别html代码。
    • 模板字符串完全支持“运算”式的表达式，可以在${}里完成一些计算。
ES6EStext-alignlistrongJavaScript

有关JS执行机制及ES6的更多相关文章

  1. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  2. ruby - Chef 执行非顺序配方 - 2

    我遵循了教程http://gettingstartedwithchef.com/,第1章。我的运行list是"run_list":["recipe[apt]","recipe[phpap]"]我的phpapRecipe默认Recipeinclude_recipe"apache2"include_recipe"build-essential"include_recipe"openssl"include_recipe"mysql::client"include_recipe"mysql::server"include_recipe"php"include_recipe"php::modul

  3. ruby - 为什么 Ruby 的 each 迭代器先执行？ - 2

    我在用Ruby执行简单任务时遇到了一件奇怪的事情。我只想用每个方法迭代字母表，但迭代在执行中先进行:alfawit=("a".."z")puts"That'sanalphabet:\n\n#{alfawit.each{|litera|putslitera}}"这段代码的结果是:(缩写)abc⋮xyzThat'sanalphabet:a..z知道为什么它会这样工作或者我做错了什么吗？提前致谢。 最佳答案 因为您的each调用被插入到在固定字符串之前执行的字符串文字中。此外，each返回一个Enumerable，实际上您甚至打印它。试试

  4. ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2

    如何检查Ruby文件是否是通过“require”或“load”导入的，而不是简单地从命令行执行的？例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上，我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby​​文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否

  5. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co

  6. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  7. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  8. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  9. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  10. ruby-on-rails - Rake 任务仅调用一次时执行两次 - 2

    我写了一个非常简单的rake任务来尝试找到这个问题的根源。namespace:foodotaskbar::environmentdoputs'RUNNING'endend当在控制台中执行rakefoo:bar时，输出为:RUNNINGRUNNING当我执行任何rake任务时会发生这种情况。有没有人遇到过这样的事情？编辑上面的rake任务就是写在那个.rake文件中的所有内容。这是当前正在使用的Rakefile。requireFile.expand_path('../config/application',__FILE__)OurApp::Application.load_tasks这里

随机推荐