JSCORE03

本阶段内容分两个部分:

1. 实用性的: 后续用得上
2. 进阶性质: 以后如果进行框架开发需要使用的原理

• 声明提升

  JS引擎的工作原理

  • 1. 先通篇阅读一次代码, 找到所有的声明 – 预编译
    2. 执行除了声明以外的代码

    声明提升不是一个友好的设计, 对程序员来说 必须通篇阅读代码才能知道代码如何运行的

  • 面试题常考:

    • var: 声明的变量提升在 作用域的 顶部

      <script>
          提升在 全局变量 window 中
      	var a = 5
          
          function(){
              b提升在当前函数的顶部, 而非全局作用域
              var b = 6
          }
      </script>
      

    • 函数的声明提升: 提升函数+函数体 , 整个进行提升

      function a (){}
      
      提升a 函数整个
      

    • let/const/var: 只提升声明, 不提升赋值

      let a = 6
      let a 是声明 -- 提升并且默认值是undefined
      a = 6 是赋值
      

  • let/const: 有声明提升, 默认值是undefined, 但是处于暂存死区的状态, 在赋值之前无法使用, 会报错

• 宿主环境

  • JS本身带有简单的语法和API, 当运行在不同的环境下, 会拥有额外的API
    • node.js: 将会拥有操作服务器的相关API
    • 浏览器: 将会拥有操作浏览器的相关API, 具体存储在 window 对象里

• 函数:

  • 函数中隐藏的arguments变量: 其中保存了所有的接收的参数, 是一个伪数组类型, 属性名是 0 1 2 3… 有length属性, 但是原型不是数组, 所以没有数组的相关方法

    • 作用1: 制作参数数量不确定的函数, 求最大值, 求和…
    • 作用2: 函数重载: 根据参数个数/类型不同, 执行不同的逻辑代码
      • 未来的框架封装中,大量采用

  • 闭包:

    • 函数声明之后, 为了能够正常使用, 会保存声明时所在的词法环境

    • 函数保存时, 会检查函数体中使用了哪些变量, 然后根据作用域链找到这些变量所在的作用域, 统统保存到 自身的scopes 变量里

      后续调用时, 函数就会从 scopes中获取 使用到的各种值

      scopes中存储的作用域里, 函数作用域被称为闭包 closure

• 对象:

  • 对象是引用类型 – 面试几乎必考

    • 对象存储在变量中, 变量中存的是个地址
    • a = b 对象类型是地址传递

  • 克隆

    • 浅克隆: 创建一个空对象, 遍历旧对象, 挨个赋值到新对象中
      • 此做法只适合 属性是普通数据类型的场景
    • 深克隆:
      • 实战: 对象->JSON字符串->转回对象 就可以
      • 面试: 考用递归方式实现深克隆 – 考试前背下来即可

  • 构造函数: 用于快速构建指定结构的对象

    • new运算符: 此运算符搭配函数使用时, 会隐式完成固定操作

      function Demo(a, b){
          // let this = {}
          
          // this.__proto__ = Demo.prototype
          
          this.a = a
          this.b = b
          
          this.area = function(){}
          
          // return this
      }
      
      let dd = new Demo(10, 44)
      

    • 构造函数目前的问题:

      • 如果在构造函数中, 声明函数, 每次new都要声明新的函数, 浪费内存

    • 解决方案: 利用对象类型是引用类型, 是地址传递的特点

      • 把函数统一存储在 函数的prototype对象类型里

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SfNkagOd-1641539683512)(JSCORE03.assets/image-20211230093005556.png)]

    • __proto__: JS引擎指定的属性名

      • 在不同的浏览器中, 显示出来的不一样
      • 原型链机制: 对象.属性, 如果对象自身没有,则到原型中查找

• 严格模式

  ES5: ES是一套标准的称呼, 是 2009年制定的

  提供了严格模式特性: 可以让程序员写错代码时, 出现报错!

  在后期的各大框架中, 默认都是开启严格模式的状态-- 为了保障代码安全质量

  • 开启方式: 在头部书写'use strict' 即可开启严格模式
  • 变量必须声明之后才能用:
    • 为了变量名书写错误时, 错误的添加全局变量的场景, 造成全局变量污染
  • 函数的this如果是window, 替换成undefined: 为了防止错误的全局变量污染
    • 构造函数用new触发时, this是个空对象; 一旦忘记写new, 则this指向window, 会出现全局变量污染
  • 阻止静默失败: 以前不报错的 现在报错了
  • callee:
    • arguments的一个属性, 代表当前函数
    • 早期: 匿名函数自调用, 实现递归 – 利用calllee 代表当前函数
      • 缺点: 递归大量循环, 读取callee 浪费资源过大
    • 现在: 使用 命名函数自调用 实现递归效果.

• 属性的精确配置:

  可以让对象中的每个属性, 明确权限: 能否改写, 能否遍历, 能否配置

  • Object.defineProperty(对象, 属性名, {配置项})
  • Object.defineProperties(对象, {属性名:{配置项}})

配置项有:

- writable: 可写	
- enumerable: 可遍历,  不可遍历的属性在后台中是浅色的
- configurable: 可配置
- value: 默认值

如果是 构造方式/字面量方式 添加的属性, 所有的配置项都是 true,可以

let a= {name:"dd"} 
name: 可配置, 可写, 可遍历

如果是 defineProperty 方式新增的元素, 所有配置项默认都是假的

不可写, 不可遍历, 不可配置

• for…in: 可以遍历对象及其原型中 所有可遍历的属性
  • 为了安全: 通常搭配hasOwnProperty 过滤出 对象自身的属性, 排除原型中的属性
• Object.keys: 读取对象所有可遍历属性名组成数组

假的

不可写, 不可遍历, 不可配置

• for…in: 可以遍历对象及其原型中 所有可遍历的属性
  • 为了安全: 通常搭配hasOwnProperty 过滤出 对象自身的属性, 排除原型中的属性
• Object.keys: 读取对象所有可遍历属性名组成数组