经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS执行机制及ES6
来源:cnblogs  作者:不见水星记  时间:2022/12/12 9:41:07  对本文有异议

一、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代码。
    • 模板字符串完全支持“运算”式的表达式,可以在${}里完成一些计算。

原文链接:https://www.cnblogs.com/P1Kaj1uu/p/16975251.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号