《你不知道的javascript·上》笔记

作用域是什么

编译原理

  • 分词/词法分析

    • 这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码块,这些代码块被称为词法单元
  • 解析/语法分析

    • 词法单元流(数组)转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树(抽象语法树AST)
  • 代码生成

    • 将AST转换为可执行代码的过程称被称为代码生成

理解作用域

  • 处理成员

    • 引擎——负责代码编译和执行

    • 编译器——词法-语法-代码生成

    • 作用域——根据名称查找变量的一套规则

  • 引擎查询(代码执行前)

    • 一个赋值操作的LHS(左侧)和RHS(右侧)查询

      var a = 0       LHS-a,RHS-0
      console.log(a)  LHS-无,RHS-log和a
    • 如果查找的目的是对变量进行赋值,就会使用LHS查询

    • 如果查找的目的是获取变量的值,就会使用RHS查询

词法作用域

词法阶段

  • 定义在词法阶段的作用域,由你在写代码时将变量和块作用域写在哪里来决定的,执行时不变,因此该词法作用域属于静态作用域(相对于动态作用域)

  • 无论函数在哪里被调用,也无论它如何被调用,它的词法作用域都只由函数被创建时所处的位置决定

  • 词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的(javascript的this也是)

  • 词法作用域关注函数在何处声明,而动态作用域关注函数从何处调用

欺骗词法

  • eval——修改词法

  • with——创建词法

  • 性能

    • 处于运行时才确定的eval和with的使用会导致代码运行变慢

    • 引擎无法在编译时对其作用域查找进行优化,因此只能谨慎地认为这样的优化是无效的

函数作用域和块作用域

块作用域

  • with:用with从对象中创建出的作用域仅在with声明中而非外部作用域中有效

  • try/catch:try/catch的catch分句会创建一个块作用域,其中声明的变量仅在catch内部有效(性能糟糕)

  • ps:任何声明在某个作用域内的变量,都将附属于这个作用域

提升

  • js引擎会将"var a = 2"当作两个单独的声明

    • 第一个是编译阶段的任务(var a=undefined)

    • 第二个则是执行阶段的任务(a=2)

作用域闭包

  • 在自身的作用域外被调用并使得作用域和活动对象被保存的现象

  • 无论通过何种手段将内部函数传递到所在的词法作用域以外,它都会持有对原始定义作用域的引用

  • es6中模块文件中的内容会被当作好像包含在作用域闭包中一样来处理

关于this

  • this是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件

this全面解析

绑定规则

  • 默认绑定,隐式绑定,显式绑定和new绑定

优先级

  • new绑定 => 显示绑定 => 隐式绑定 => 默认绑定

bind函数

  • 用于改变作用域和传入预定参数(柯里化的一种)

对象

浅拷贝

Object.assign(目标对象,源对象..)

属性描述符

    writable                            // 是否可写
    enumerable                          // 是否可枚举
    configurable                        // 是否可配置
        Object.preventExtensions()      // 不能增加&&不能修改       
        Object.seal()                   // 不能增加&&不能修改&&不能配置&&不能删除
        Object.freeze()                 // 不能增加&&不能修改&&不能配置&&不能删除&&不能访问&&不能遍历

    ps:特性值操作只会影响对象的直接属性,不会影响其引用对象的属性

访问描述符

  • 当使用getter和setter时,会忽略对象的value和writable特性

存在性

  • 判断对象中是否存在对应的属性
    ````
    'key' in obj // 方法一

    Object.prototype.hasOwnProperty.call(对象,属性名) // 方法二
    ````

遍历

  • 对象

    • for..in——进行对象遍历的时候,因游览器差异,顺序是不可靠的
  • 数组

    • for..of——通过调用迭代器对象,然后调用迭代器对象的next()方法进行遍历
      // 数组有内置的@@iterator ,因此for..of可以直接应用在数组上
      // 数组的迭代器对象通过"arr[Symbol.iterator]()"进行获取 
      // 对象进行for..of操作的变通方法
    
      for (var key of Object.keys(someObject)) {
          console.log(someObject[key]);
      }   

混合对象"类"

  • 类意味着复制

  • 传统的类被实例化时,它的行为会被复制到实例中;类被继承时,行为也会被复制到子类中

  • 多态——在继承链的不同层次名称相同但是功能不同的函数
    • 看起来似乎是从子类引用父类,但是本质上引用的其实是复制的结果
  • JavaScript也有类似的语法,但是和其他语言中的类完全不同;JavaScript 并不会(像类那样)自动创建对象的副本

  • 混入模式(显式/隐式)可以用来模拟类的复制行为,但是通常会产生丑陋并且脆弱的语法,比如显式伪多态(OtherObj.methodName.call(this,...)),这会让代码更加难懂并且难以维护

原型

Prototype

  • 如果原型链父级的属性被设置为只读,则实例对象无法创建屏蔽属性 (通过Object.defineProperty()可以)

  • 如果原型链父级的属性被设为setter属性,则实例对象的赋值和更改操作都会自动延用原型链上的setter属性,体现为
    实例属性本身的赋值或更改无效,除非setter属性方法下存在赋值操作 (通过Object.defineProperty()可以)

原型继承

  • 真正的类继承是会进行对象复制的,但是javascript的继承本质是原型委托,通过原型来进行对象的关联

  • Object.setPrototypeOf(对象,被继承的原型)

行为委托

对象关联·行为委托

  • 行为委托认为对象之间是兄弟关系,互相委托,而不是父类和子类的关系

  • 通过在两个对象之间使用Object.create(对象)来实现行为委托,这种模式只需要两个实体,而且可以互为关联

  • 只需要集中在对象之间的关联关系,可以更好地支持关注分离原则,创建和初始化并不需要合并为一个步骤(相比new 函数)

  • 除了能让代码看起来更简洁,更具扩展性外,还可以简化代码结构

    var Foo = { /* .. */ };         // 父类
    var Bar = Object.create( Foo ); // 继承父类
    Bar.fn=fnA;                     // 书写子类
    var b1 = Object.create( Bar );  // 获取子类实例

内省检测·检查“类”关系

  • 方法1 => A.isPrototypeOf(b)
  • 方法2 => Object.getPrototypeOf(a)===A.prototype
  • 方法3 => a.__proto__=== A.prototype
  • 方法4 => a instansof A

猜你喜欢

转载自www.cnblogs.com/kanyu/p/12222770.html
今日推荐