中级前端工程师

在JS中定义枚举的首选语法是什么

我们平常都是用const来定义对象枚举，但是const对应的对象的值还是可以改动的，所以Object.freeze更适合枚举。

const obj = {
  prop: 42
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// expected output: 42

Object.freeze并没有递归冻结对象。

let obj1 = {
  internal: {
    a:123
  }
};

Object.freeze(obj1);
obj1.internal.a = 'aValue';

obj1.internal.a // 'aValue'

JS按位取反操作符~

预备知识

原码

以带符号位的四位二进制值数为例：

下图给出部份正负数数的二进制原码表示法 既然都有正负数了，那么我们开始运算:

于是我们可以看到其实正数之间的加法通常是不会出错的，因为它就是一个很简单的二进制加法。

而正数与负数相加，或负数与负数相加，就要引起莫名其妙的结果，这都是该死的符号位引起的。0分为+0和-0也是因他而起。

所以原码，虽然直观易懂，易于正值转换。但用来实现加减法的话，运算规则总归是太复杂。于是反码来了。

反码

例如：0001+1001=1010 (1+(-1)=-2) 0010+1010=1100 (2+(-2)=-4)

那我们再试下，用反码的方式解决一下原码的问题：

好，我们再试着做一下两个负数相加

-1 + (-2) = -4 ? 为了解决以上问题，补码就登场了。

补码

在《计算机组成原理中》，补码的另外一种算法 是

补码实例 现在来看几个例子:

~运算符

经常被用到indexOf，如果是没有找到返回-1时，可以用!~-1表示true

模拟实现一个完美的Promise

Promise/A+规范

要求

1. 一个promise必须有3个状态，pending，fulfilled(resolved)，rejected当处于pending状态的时候，可以转移到fulfilled(resolved)或者rejected状态。当处于fulfilled(resolved)状态或者rejected状态的时候，就不可变。
2. 一个promise必须有一个then方法，then方法接受两个参数：
   其中onFulfilled方法表示状态从pending——>fulfilled(resolved)时所执行的方法，而onRejected表示状态从pending——>rejected所执行的方法。
   promise.then(onFulfilled,onRejected)
3. 为了实现链式调用，then方法必须返回一个新的Promise，并且将上一个promise的状态传入到新的promise上，以便后面的链式调用，可以在then返回一个一个promise，return new Promise()，所以我们新建了一个resolvePromise函数来处理这块逻辑。 下面使用ES6的class完整的模拟的Promise

class MyPromise {
  constructor(callback) {
    this.status = 'pending'
    this.value = undefined // status为resolved时返回的值
    this.reason = undefined // status为rejected时返回的值
    // 用来保存then传进来的函数，当状态改变时调用，声明成数组的原因是一个promise可能多处定义then或catch
    this.onFullfilledArray = []
    this.onRejectedArray = []
    try {
      // 由于resolve、reject都是在类外面执行的，所以需要绑定this
      callback(this.resolve.bind(this), this.reject.bind(this))
    } catch (error) {
      this.reject(error)
    }
  }

  /** 传入两个promise，将第二个的promise的value或者reason转移到currentPromise
 * @callback resolve
 * @callback reject
 * @param {Promise} currentPromise 当前promise对象
 * @param {*} x 当前resolve或者reject之后的结果
 * @param {resolve} resolve 当前promise对象的resolve
 * @param {reject} reject 当前promise对象的reject
 */
  static resolvePromise(currentPromise, x, resolve, reject) {
    if (currentPromise === x) {
      reject(new TypeError('Chaining cycle'));
    }
    // 如果结果x存在且是对象或者是一个函数
    if (x && typeof x === 'object' || typeof x === 'function') {
      let used; // then(cb1,cb2)cb1,cb2两者只能调用其中一个
      try {
        let then = x.then;
        // 如果返回值x有then函数，则
        if (typeof then === 'function') {
          then.call(x, (y) => {
            if (used) return;
            used = true;
            MyPromise.resolvePromise(currentPromise, y, resolve, reject);
          }, (r) => {
            if (used) return;
            used = true;
            reject(r);
          });
        } else {
          if (used) return;
          used = true;
          resolve(x);
        }
      } catch (e) {
        if (used) return;
        used = true;
        reject(e);
      }
    } else {
      resolve(x);
    }
  }

  reject(error) {
    if (this.status === 'pending') {
      this.status = 'rejected'
      this.reason = error
      this.onRejectedArray.forEach(f => {
        // 执行then传的函数
        f(error)
      })
    }
    // console.log('reject', error)
  }

  resolve(value) {
    if (this.status === 'pending') {
      this.status = 'resolved'
      this.value = value
      this.onFullfilledArray.forEach(f => {
        // 执行then传的函数
        f(value)
      })
    }
    // console.log('resolved', value)
  }

  // then函数可以传一个或两个函数
  then(onFullfilled, onRejected) {
    onFullfilled = typeof onFullfilled === 'function' ? onFullfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
    let tempPromise,
      self = this
    switch (this.status) {
      case 'pending':
        tempPromise = new MyPromise((resolve, reject) => {
          // 保存.then传的第一个函数
          self.onFullfilledArray.push(function (value) {
            setTimeout(() => {
              try {
                let x = onFullfilled(value)
                MyPromise.resolvePromise(tempPromise, x, resolve, reject)
              } catch (error) {
                reject(error)
              }
            })
          })
          // 保存.then传的第二个函数
            self.onRejectedArray.push(function (reason) {
              setTimeout(() => {
                try {
                    let x = onRejected(reason)
                    MyPromise.resolvePromise(tempPromise, x, resolve, reject)
                } catch (error) {
                  reject(error)
                }
              })
            })
        })
        break;
      case 'resolved':
        tempPromise = new MyPromise((resolve, reject) => {
          setTimeout(() => {
            try {
                let x = onFullfilled(self.value)
                MyPromise.resolvePromise(tempPromise, x, resolve, reject)
            } catch (error) {
              reject(error)
            }
          })
        })
        break;
      case 'rejected':
        tempPromise = new MyPromise((resolve, reject) => {
          setTimeout(() => {
            try {
              if (onRejected) {
                let x = onRejected(self.reason)
                MyPromise.resolvePromise(tempPromise, x, resolve, reject)
              }
            } catch (error) {
              reject(error)
            }
          });
        })
        break;
    }
    return tempPromise
  }
  catch(onRejected) {
    return this.then(null, onRejected);
  }
}

为了更好的理解这段代码，画出了一个流程图:

继承的几种方式

function Father(name) {
  // 属性
  this.name = name || 'father',
    // 实例方法
    this.sleep = function () {
      console.log(this.name + "正在睡觉");
    }
}
// 原型方法
Father.prototype.look = function (book) {
  console.log(this.name + "正在看:" + book);
}

原型继承

父类中私有的和公有的都继承到了子类原型上

function Son(){}
Son.prototype = new Father() // 重写了Son的原型
Son.prototype.constructor = Son

构造继承

只是将Father的私有属性拷贝一份给Son，并没有将原型链指向Father

function Son() {
  Father.call(this)
}

混合模式

有点弊端，会实例化两次Father，而且Father的私有属性也会在Son的原型上

function Son() {
  Father.call(this)
}
Son.prototype = new Father()
Son.prototype.constructor = Son

寄生组合模式

解决了混合模式的弊端

function Son() {
  Father.call(this)
}
// Object.create的Polyfill
function myCreate(proto) {
  function fn() {}
  fn.prototype = proto
  return fn
}
Son.prototype = myCreate(Father.prototype)
Son.constructor = Son

ES6中extends的实现

function Son() {
  Father.call(this)
}
Son.prototype = Object.create(Father.prototype,
  { constructor: { value: Son, writable: true, configurable: true } });
// Son.__proto__ = Father

js中new一个对象的过程

let a = {}
// a的构造器
a.constructor // ƒ Object() { [native code] }
let b = new a() // Uncaught TypeError: a is not a constructor

a的构造器是指向Object()函数，不是它自己的，所以不能实例化，所以我们只能这样let c = Object()。

class也有自己的构造器（class其实就是function），所以也可以实例化，其他的都没办法实例化

实现new

function myNew(target, ...args) {
  const protoObj = Object.create(target.prototype)
  const result = target.apply(protoObj, args)
  return typeof result === 'object' ? result : protoObj
}

function A(name, age) {
  this.name = name || 'aa'
  this.age = age || 18
}

const a = myNew(A, 'cjh', 16)
console.log(a) // A { name: 'cjh', age: 16 }

箭头函数是否可以实例化

const fun1 = () => {}
function fun2() {}
console.log(fun1.prototype) // undefined
console.log(fun2.prototype) // {constructor: ƒ}

箭头函数没有prototype、没有自己的this指向、不可以使用arguments，而new的过程中有个操作是将__proto__指向prototype，所以不能用new实例化箭头函数

for与forEach的区别

let arr = [1,2,3]

arr.forEach(item => {
  if(item === 2) {
    arr.push(4)
  }
  console.log(item)
})
// 输出： 1 2 3

for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 2){
    arr.push(4)
  }
  console.log(arr[i])
}
// 输出：1 2 3 4

装饰器的原理

• 作用于类的装饰器，写法举例

function log (target) {  // 默认传参为 被修饰的类
    target.prototype.logger = () => {console.log('装饰器--被调用')};
}

@log       // log 必须是函数
class Myclass {};

const test = new Myclass();
test.logger();          // 装饰器--被调用

• 作用于方法的装饰器，写法举例

Object.defineProperty(obj, prop, descriptor);
class C {
   @readonly (true);
   method () {
      console.log('cat');
   }
}

function readonly (value) {
   // target: 类原型
   // key:    被修饰的属性或者方法
   // descriptor: 被修饰的属性或方法的描述符对象
   return function (target, key, descriptor) {
      descriptor.writable = !value;
      return descriptor;
   }
}

const c = new C();
c.method = () => {console.log('dog');} // 重写了method这个类方法
c.method() // cat  => 设置属性只读成功

eval&&Function

function test() {
  var x = 2, y = 4;
  console.log(eval('x + y'));  // 直接调用，使用本地作用域，结果是 6
  var geval = eval; // 等价于在全局作用域调用
  console.log(geval('x + y')); // 间接调用，使用全局作用域，throws ReferenceError 因为`x`未定义
  (0, eval)('x + y'); // 另一个间接调用的例子
​}

MDN原文：

Functions created with the Function constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the Function constructor was created. This is different from using eval with code for a function expression.

翻译：

使用函数构造函数创建的函数不会对其创建上下文创建闭包;它们总是在全局范围内创建的。在运行它们时，它们只能访问自己的局部变量和全局变量，而不能访问创建函数构造函数的作用域中的变量。这不同于对函数表达式的代码使用eval。

var x = 10;

function createFunction1() {
    var x = 20;
    return new Function('return x;'); // 这里的 x 指向最上面全局作用域内的 x
}

function createFunction2() {
    var x = 20;
    function f() {
        return x; // 这里的 x 指向上方本地作用域内的 x
    }
    return f;
}

var f1 = createFunction1();
console.log(f1());          // 10
var f2 = createFunction2();
console.log(f2());          // 20

Map && WeakMap

Map

让我们先理解Map的基本用法：

let obj = { test: 2 } // obj对象引用的计数是1
let map = new Map()
map.set(obj, '66') // obj对象引用的计数是2
console.log(obj) // { test: 2 }
console.log(map.get(obj))  // '66'
obj.one = 1
// 由于对应的是引用地址，所以还是可以取的到
console.log(obj) // { test: 2, one: 1 }
console.log(map.get(obj))  // '66'
obj = { test: 2, one: 1 }
console.log(map.get(obj))  // 'null'
obj = null // obj对象引用的计数是1
console.log(map) // Map { { test: 2, one: 1 } => '66' }

从上面的例子可以看出，不管obj里面的值怎么变，都可以拿到对应的值，除非是赋值然后引用地址变了，才取不到map的值。最后将obj置为null，obj对象引用的计数变为1，还是不会被垃圾回收机制回收。

WeakMap

let obj = { test: 2 } // obj对象引用的计数是1
let map = new WeakMap() // obj对象引用的计数是1
map.set(obj, '66')
console.log(map.get(obj))  // 'null'
obj = null // obj对象引用的计数是0 随时会被垃圾回收，其实map里面也没有了这个键值对
console.log(map) // WeakMap { [items unknown] }

WeakMap经常在保存节点时有用，请看下面例子：

const wm = new WeakMap();
const element = document.getElementById('example');
wm.set(element, 'some information');
wm.get(element) // "some information"

上面代码中，先新建一个 Weakmap 实例。然后，将一个 DOM 节点作为键名存入该实例，并将一些附加信息作为键值，一起存放在 WeakMap 里面。这时，WeakMap 里面对element的引用就是弱引用，不会被计入垃圾回收机制。

也就是说，上面的 DOM 节点对象的引用计数是1，而不是2。这时，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。

Page: DOMContentLoaded, load, beforeunload, unload

• DOMContentLoaded：浏览器已经加载完HTML、dom tree已经构建完成，但是外部资源像<img>标签和样式表还没有被加载
• load 不仅html已经被加载了，而且外部资源、图片、样式也被加载完
• beforeunload/unload：用户离开页面时会发生的事件，beforeunload用于用户要离开：我们可以检查用户是否保存了更改并询问他们是否真的要离开，unload用于用户几乎离开了，但我们仍然可以启动一些操作，例如发送统计信息

V8执行一段JS代码的过程

1. 生成AST 生成AST分为两步—词法分析和语法分析

栅格化布局

利用flex可以实现

import && require

// dep.js
export let a = 1
setTimeout(() => a += 1, 500)

// app.js
import { a } from 'dep'
setTimeout(function () {
  console.log(a)
}, 1000)

在import {a} from f的时候，他其实在你引用的地方和倒出的地方的a之间建立了连接，即它们是指向同一内存的，即便是原始数据类型，你修改模块中的指也会导致引用处的变化

// lib.js
var counter = 3
const obj = {
  test: 1,
}
function incCounter() {
  counter++
  obj.test++
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
  obj,
}

// main.js
// main.js
var mod = require('./demo')

console.log(mod.counter) // 1
console.log(mod.obj.test) // 1
mod.incCounter()
console.log(mod.counter) // 1
console.log(mod.obj.test) // 2

多使用位运算提高代码效率

所以我们使用判断奇偶数的时候用8 & 1或8 % 2就有区别了，机器码其实就是二进制，所以8 & 1只需要运算1000 & 0001，而8 % 2中%需要转成机器码能识别的运算符，所以位运算就会快一点。

console.log是异步还是同步

我们先看下面得例子：

let a = {
  b : {
    c: 1
  }
}
console.log(a)
a.b.c = 2

咋一看好像是异步的，但是为什么数字就是同步的呢？其实里面有个坑，我们都知道对象是引用类型，所以console.log打印引用类型的时候是打印指针指向的引用地址的内容，我们手动展开的时候其实是调用了当前对象的get方法，这是才去读取改引用地址里面的内容，导致一些人说console.log是异步。

node环境下的console.log

在请求帧动画中会经常操作dom节点，操作dom需要时间，怎么优化

如何在 Array.forEach 中正确使用 Async

const arr = [1, 2, 3]

const sleep = (delay, v) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1)
    }, delay)
  })
}

arr.forEach(async (v, i) => {
  await sleep(1000 - (i * 100), i)
  console.log(v)
})
// 输出：
// 3
// 2
// 1

上面输出3、2、1，说明await是没有生效的，看了forEach的Polyfill就知道，是在一个while循环里面执行的，相当于上面是三个函数一起执行，我们想要的效果是第一个函数执行完再执行第二个函数，我们可以用reduce

const arr = [1, 2, 3]

const sleep = (delay, v) => {
 return new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve(1)
   }, delay)
 })
}
arr.reduce(async (initial, v, i) => {
 // 因为此时的initial是上一个函数的返回值，如果没有promise没有执行完，会在await的关键字下停顿
 await initial
 await sleep(1000 - (i * 100), i)
 console.log(v)
}, 0)
// 输出：
// 1
// 2
// 3

我们可以看到reduce的Polyfill:

if (!Array.prototype.reduce) {
 Object.defineProperty(Array.prototype, 'reduce', {
   value: function (callback /*, initialValue */) {
     // ...more
     while (k < len) {
       if (k in o) {
         value = callback(value, o[k], k, o)
       }
       k++
     }
     return value
   }
 })
}

可以看到value就是initial，从value = callback(value, o[k], k, o)可以看出来initial保存这上一个函数的返回值，由于我们用了aysnc所以会返回一个promise对象，然后用await initial后可以在当前函数停顿。