我来回答饿了么大前端的问题（1）

因为最近一直在准备面试和笔试，所以开始看一些基础的知识，并试着回答一下 饿了么大前端 的nodejs问题。文中主要展示我在学习过程中查看的文章地址，并做了一些归纳，添加上了一些我自己的看法。有一些问题也还没有得到解决，如果大家有好的答案可以直接留言。

Javascript基础问题

类型判断

• undefined & null ： undefined与null的区别
  • 在 if 中，undefined 和 null 都自动转译为 false。
  • 在转换为数字的过程中，undefined 转译为 NaN， null 转译为0。
  • null 表示"没有对象"，即该处不应该有值。
  • undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义。
  • 至于为什么 undefined == null 为true，参见 引用传递 部分

作用域

• 你不懂JS：作用域与闭包 第一章：什么是作用域？
  • 作用域是一组规则，它决定了在哪里和如何查找一个变量（标识符）。这种查询也许是为了向这个变量赋值，这时变量是一个LHS引用，或者是为取得它的值，这时变量是一个RHS引用。
  • LHS引用得自赋值操作。作用域 相关的赋值可以通过 = 操作符发生，也可以通过向函数参数传递（赋予）参数值发生
  • JavaScript引擎在执行代码之前首先会编译它，这样做，它将 var a = 2; 这样的语句分割为两个分离的步骤：
    • 首先，var a 在当前 作用域 中声明。这是在最开始，代码执行之前实施的。
    • 稍后，a = 2 查找这个变量（LHS引用），并且如果找到就向它赋值。
  • 如果RHS查询在嵌套的作用域的任何地方都找不到一个值，这会导致引擎抛出一个 ReferenceError；如果LHS查询在嵌套的作用域的任何地方都找不到一个值，而且如果程序没有运行在 Strict 模式下，那么全局作用域中会创建一个变量并将它交给引擎。如果是在 Strict 模式下，则也会抛出 ReferenceEroor。
  • 如果RHS查询的值被找到了，但是你试着去做一些它做不到的事情，比如引用 null 或者 undefined 的属性，那么引擎会抛出错误 TypeError。
• 你不懂JS：作用域与闭包 第二章：词法作用域
  • 词法作用域意味着作用域是由编写时函数被声明的位置的决策定义的。编译器的词法分析阶段实质上可以知道所有的标识符是在哪里和如何声明的，并如此在执行期间预测它们将如何被查询。
  • 在JavaScript中有两种机制可以“欺骗”词法作用域：eval(..) 和 with 。前者可以通过对一个拥有一个或多个声明的“代码”字符串进行求值，来（在运行时）修改现存的词法作用域。后者实质上是通过将一个对象引用看作一个“作用域”，并将这个对象的属性看作作用域中的标识符，（同样，也是在运行时）创建一个全新的词法作用域。
  • 这些机制的缺点是，它压制了引擎在作用域查询上进行编译期优化的能力，因为引擎不得不悲观地假定这样的优化是不合法的。这两种特性的结果就是代码将会运行的更慢。不要使用它们。
• 你不懂JS：作用域与闭包 第三章：函数与块儿作用域
  • 在JavaScript中函数是最常见的作用域单位。在另一个函数内部声明的变量和函数，实质上对任何外围“作用域”都是“隐藏的”，这是优秀软件的一个有意的设计原则。
  • 但是函数绝不是唯一的作用域单位。块儿作用域指的是这样一种想法：变量和函数可以属于任意代码块儿（一般来说，就是任意的 { .. } ），而不是仅属于外围的函数。
  • 从ES3开始，try/catch 结构在 catch 子句上拥有块儿作用域。
  • 在ES6中，引入了 let 关键字（ var 关键字的表兄弟）允许在任意代码块中声明变量。if (..) { let a = 2; }将会声明变量a，而它实质上劫持了 if 的 { .. } 块儿的作用域，并将自己附着在这里。
  • 虽然有些人对此深信不疑，但是块儿作用域不应当被认为是 var 函数作用域的一个彻头彻尾的替代品。两种机能是共存的，而且开发者们可以并且应当同时使用函数作用域和块儿作用域技术 —— 在它们各自可以产生更好，更易读/易维护代码的地方。
• 你不懂JS：作用域与闭包 第四章：提升
  • 我们可能被诱导而将 var a = 2 看作是一个语句，但是JavaScript 引擎 可不这么看。它将 var a 和 a = 2看作两个分离的语句，第一个是编译期的任务，而第二个是执行时的任务。这将导致在一个作用域内的所有声明，不论它们出现在何处，都会在代码本身被执行前 首先 被处理。你可以将它可视化为声明（变量与函数）被“移动”到它们各自的作用域顶部，这就是我们所说的“提升”。
  • 声明本身会被提升，但不是赋值，即便是函数表达式的赋值，也不会被提升。
  • 函数的提升是优先于变量的提升的，所以在进行重名赋值的时候需要注意。
• 你不懂JS：作用域与闭包 第五章：作用域闭包
  • 闭包就是当一个函数即使是在它的词法作用域之外被调用时，也可以记住并访问它的词法作用域。
  • 模块要求两个关键性质：
    • 1）一个被调用的外部包装函数，来创建外围作用域。
    • 2）这个包装函数的返回值必须包含至少一个内部函数的引用，这个函数才拥有包装函数内部作用域的闭包。

引用传递

• JavaScript中基本数据类型和引用数据类型的区别

  • 基本数据类型因为值的大小固定，所以直接保存在栈内存中。而引用数据类型因为值的大小不固定，所以保存在堆内存中，而堆内存是无法直接进行访问的，进而在栈内存当中又保存了指向堆内存中位置的指针。
  • 复制时，基本数据类型是将原始值的副本赋值给新值，从而两个值之间并不会有任何影响，而引用数据类型则是将栈内存中保存的指向堆内存的指针赋值给新值，从而会互相影响。

• 如何编写一个 json 对象的拷贝函数

  • 深入剖析 JavaScript 的深复制

  • 最简单暴力的方法是：

    let a = { x: 10, y: [20, 5]}
    
    let b = JSON.parse(JSON.stringify(a))
    

    但是这样不能拷贝函数，并且会丢失原型链。

  • 较为完善的方法就是实现一个 extend 方法，递归调用 extend 方法。

• Javascript 中 == 和 === 区别是什么？

  • === 比较不同数据类型时，直接返回false。比较基本数据类型时比较的是数据类型以及值，在比较引用数据类型时是比较的是否指向同一块内存区域。
  • == 在比较相同数据类型的值的时候与 === 相同，在比较不同数据类型时，会先对两边的数据类型进行转换再比较。

• JS 中没有按地址（引用）传递，只有按值传递

  • 这里严格的说，在和JAVA类似的语言中，已经没有了指针。在C里面，指针就是一个具有固定长度的类型(在大多数的C编译器里是2个字节)，但在JAVA类似的语言里，引用也有自己的属性和方法，只是你不能直接去访问和控制它，所以它从某种意义上也是一种对象，这种机制也很大程度的避免了内存泄露，术语称之为内存结构化访问机制。

内存释放

• 浅谈V8引擎中的垃圾回收机制

  • 新生代

    • 内存区域小，垃圾回收频繁，大多数变量刚被声明的时候都先进入新生代区域。当新生代区域内存满的时候会进行一次清理。
    • 采用Scavenge算法进行回收，主要思想是将内存区分为 From 空间和 To 空间。变量一来时都先进入 From 空间，当开始清理的时候对 From 空间进行宽搜，将那些能够从ROOT节点搜索到的，并且还在新生代区域的变量放入 To 空间中，然后交换 From 和 To 空间。

  • 晋升

    • 在新生代区域进行回收的时候，查看这个变量是否已经经历过一次垃圾回收，如果已经经历过一次了就将它放入老生代区域。
    • 对象从 From 空间复制到 To 空间时，如果To 空间已经被使用了超过25%，那么这个对象直接被复制到老生代。（这里我存在疑问）

  • 老生代

    • 内存区域大，垃圾回收频率较低，保存的对象大多数是生存周期很长的甚至是常驻内存的对象。
    • 采用Mark-Sweep（标记清除）与 Mark-Compact（标记整理）结合的算法进行回收，主要思想是进行宽搜，搜索过程当中对对象进行染色，最后如果一个对象没有被染色那么就是垃圾（这里其实和Scavenge寻找垃圾的思路是一致的，就是看一个对象能不能从ROOT节点搜索到）。然后进行对象的清除，当空间不足以分配从新生代晋升过来的对象时，才使用标记整理（其实就是内存页面的整理）。
• 对于文中提到的三种情况： 我还没得到确定的答案，得到后会第一时间更新。

ES6 新特性

ECMAScript 6 入门

let 与 var 的区别

• let 不会有作用域提升现象，所以使用 let 会有TDZ错误。
• let 一般与 {} 块联合使用，即在块中使用 let 声明的变量只在块中有效，在外面不能进行访问。
• let 与 for 联合使用的时候，因为 let 声明的变量只在块中有效，所以每一次循环当中都会声明一个新的循环变量。（这里还需要注意，for 循环当中，循环语句部分是一个父作用域，而循环体内部是一个单独的子作用域）
• let 不允许重复声明。

function 与 => 的区别

• 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

  function foo() {
    setTimeout(() => {
      console.log('id:', this.id);
    }, 100);
  }
  
  var id = 21;
  
  foo.call({ id: 42 });
  

setTimeout 的参数是一个箭头函数，这个箭头函数的定义生效是在 foo 函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时 this 应该指向全局对象 window，这时应该输出 21 。但是，箭头函数导致 this 总是指向函数定义生效时所在的对象，所以输出的是 42 。

• 不可以当做构造函数，也就是说，不可以使用 new 命令，否则会抛出错误。
• 不可以使用 arguments 对象，该对象在函数体内不存在。
• 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

const 定义的 Array 中间元素能否被修改? 如果可以, 那 const 修饰对象有什么意义?

• const 定义的 Array 中间元素能被修改，const 定义的变量只是持有 Array 的地址，这个变量只是本身不能修改，而对于存在于堆内存中的 Array 本身是可以修改的。
• 对于 const 声明，只是它的赋值操作被冻结了，而值不会因为 const 而不变。主要是预防在coding过程中的coder因为疏忽对变量的意外修改。

结合 {} 来谈 set 与 map

• Set： 感觉这个应该结合 [] 来谈，这个与数组的区别就是里面不存在重复的元素。结合 ... 可以直接转为数组，并且可以很方便的实现 并集、交集、差集。（这里的问题是 NaN 被判为同一种元素，但是 === 判NaN是不同的元素）
• WeakSet： 对象成员版的 Set，里面的成员只能是对象。并且这里是对成员是弱引用，所以不具有 size 属性，也不具有循环操作。
• Map： 这个与 {} 的区别是键值可以不只是字符串了，但是这里判断两个键一不一样的时候，对于引用数据来说是看他们是否指向同一块内存。
• WeakMap： 对象键值版的 Map，里面的成员的键只能是对象，这边同样是弱引用。特征与 WeakSet 相似。
• 以上配合 ... 使用非常的优雅。

私有化的问题与 symbol 、 class

• symbol 是用来处理属性名的冲突。但是一个 symbol 属性作为键名时是不能被 Object.keys() 、 Object.getOwnPropertyNames() 获取，所以就造成了一种非私有的内部方法效果。symbol 是不能达到闭包那么好的效果的，因为通过 Symbol.for() 是可以获取同一个 Symbol 值的，获得以后一样是能够访问值。

• 在 class 中实现私有方法的办法是将方法声明在类外，然后在类中使用 .call() 进行引用。虽然通过这个类对象是不能访问这个方法，但是这个方法其实还是暴露在其他更大的作用域当中的，或者就是使用 symbol 作为方法名，这里的优缺点在 Symbol 中已经分析了。

• 常规的私有化方法是使用闭包，只对外开发非私有化的部分。下面这个例子挺好的，原网址： js 使用闭包封装数据

  var Student=(function(){  
      var m_staticMaxAge = 120;//定义一个私有的静态属性  
      
      function ageIsValid(age){ //定义一个私有的静态方法  
          if(age > m_staticMaxAge){  
              throw Error("the property age must be less than "+m_staticMaxAge);  
          }  
      }  
    
      //返回构造函数，设置一些属性  
      return function (name,age) {  
    
          var m_name, m_age;//把私有属性都放到这里定义  
    
          //私有属性的 setter 和 getter 都放到这里  
          this.setName = function (name) {  
    
              Student.nameIsValid(name);  
              m_name = name;  
          };  
    
          this.setAge = function (age) {  
              ageIsValid(age);  
              m_age = age;  
          };  
    
          this.getName = function () {  
              return m_name;  
          };  
    
          this.getAge = function () {  
              return m_age;  
          };  
    
          this.setName(name);  
          this.setAge(age);  
      };  
  })();