《你不知道的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