有些浏览器对新API的兼容实在是太差啦！

JS复制到剪贴板之意料之外的坑

> 跨域,一个说腻了的话题,今天遇到一个新的情况,单独拎出来说说;

## 情景再现

b.site有一个ajax请求a.site的某一个地址,post请求+自定义header(假设,header头为`X-Application-Token`),ok,妥妥的跨域,那么自然加上以下代码(以express.js为例):

```javascript
app.options('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Application-Token")
    // call the path service
})
app.post('/a-cors-request-path', (req, res) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Application-Token")
    // call the path service
})
```

反复确认了相关配置已经设置好,但浏览器仍报错:

> Access to XMLHttpRequest at 'a.site' from origin 'b.site' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

## 排查

1. 返回说"not have HTTP ok status"

那么说明option请求没有返回200,打开postman发送请求尝试看看,成功返回...

1. 自己启动一个Express Server,尝试复现

已经能够确认,option不通过和状态码有关,那么为什么浏览器内非200,而postman发送option请求正常返回200 ?

打印headers,一口老血...

![cors-with-verify-header](https://cdn.arc-light.fun/BeGtIi/cors-with-verify-header.png)

## 结论

除了常见的跨域问题,也要考虑实现时的业务逻辑,比如本情境下,错误的在option中也调用相关服务验证了`X-Application-Token`,而option请求在浏览器内是不会携带额外的header信息的,这才导致了浏览器内 _not HTTP ok status_,而postman正常的原因.

## 额外

后来利用老的Microsoft Edge浏览器(Edge legacy)调试,发现会清楚的返回400 Bad Request,所以如果option请求能够返回精确的HTTP code,也会更利于开发人员排查问题,后续修改后完美解决.

跨域这个问题还得单独揪出来说一下


## 深克隆是用来做什么的？

JavaScript内，所有的Object都是引用类型，它们对应的变量只保存了一个指向实际内存的指针，如果我们只是将目标对象赋值给新对象，那么我们实际复制的还是指针，如果我们修改了原始内存内保存的对象，就会导致所有相关的变量都会被改变。因此，深克隆的目的就是为了生成一个全新的对象，并存储在独立的内存位置内。

## 先实现一个简单的复制

假设我们有以下一段已有的代码：

```javascript
// 测试循环应用
var _objType = {
  name: "This is another object."
};
// _objType.objectType = _objType;

// 复制的原始对象
var origin = {
  stringType : "This is string.",
  numberType : 123,
  booleanType : false,
  objectType : _objType,
  functionType : function() {
    return document.navigator.userAgent;
  },
  inheritType: inheritObj
}

var clonedObj = cloneDeep(origin);
origin.numberType = 456; // 修改原始对象的属性

console.log(clonedObj);
```

那么我们的基础复制方法baseClone应该如下：

```javascript
function cloneDeep(target) {
  return baseClone(target);
}

function baseClone(target) {
  var newObj = {};
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
    newObj[key] = target[key];
  }
  return newObj;
}
```

我们注释了一个循环引用的情况下，对应的属性得到了复制，并且在修改原始对象时，新对象没有被修改。

## 递归实现简单深复制

通过判断每次读取的key是否是对象，我们可以得到一个递归实现的简单深拷贝：

```javascript
function baseClone(target) {
  var newObj = {};
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
      if(typeof target[key] === 'object' && target[key] !== null) {
        newObj[key] = baseClone(target[key]);
      } else {
        newObj[key] = target[key];
      }
  }
  return newObj;
}
```

但是这里就会出现一个非常致命的bug， **我们的测试用例内有一个循环引用，如果只这样遍历会导致无限递归** ，我们需要进行处理。

## 保证只循环复制自身的属性

修改我们的baseClone，检测对应的key是否是自身属性：

```javascript
function baseClone(target) {
  var newObj = {};
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
    if(Object.prototype.hasOwnProperty.call(target, key)) { // 使用泛型方法，避免target内存在自定义的hasOwnProperty方法导致判断出现错误
      if(typeof target[key] === 'object' && target[key] !== null) {
        newObj[key] = baseClone(target[key]);
      } else {
        newObj[key] = target[key];
      }
  	}
  }
  return newObj;
}
```

## 处理循环引用(Circular Structure)

> 循环引用是指，对象A中有一个指针指向对象B，B内又有一个指针指向对象A，导致两个指针都不能得到正确的释放。

我们使用一个数组去存储拷贝过的对象，避免循环引用导致递归进入死循环无法退出的问题：

```javascript
function baseClone(target, stack) {
  var newObj = {};
  if(!stack) stack = [];
  // 检测target是否已经存在于stack内
  if(target.indexOf(stack) > -1) {
    return target
  } else {
    stack.push(target)
  }
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
      if(typeof target[key] === 'object' && target[key] !== null) {
        newObj[key] = baseClone(target[key], stack);
      } else {
        newObj[key] = target[key];
      }
  }
  return newObj;
}
```

## 如果涉及到继承

我们修改上面的例子，给出一个简单的继承：

```javascript
// 测试继承部分的情况
function OriginParent(name) {
  this._stringType = name;
  this.numberType = 999;
};
var inheritObj = new OriginParent("origin string");
var clonedInherit = cloneDeep(inheritObj);
inheritObj.numberType = 888;

console.log(clonedInherit.constructor);
```

当我们打印复制的对象的构造函数时，我们发现它输出的是Object而非OriginParent，也就是说我们在复制的过程中，遗失了它本身的构造函数。

因此在循环时我们需要使用一个变量临时存储，并在之后修复它，改进的代码如下：

```javascript
// 利用new操作符的特性完成修复
function inheritClone(target) {
  var ctor = target.constructor;
  var newObj = new ctor;
  return newObj;
}
```

> 这里处理的情况其实是函数，但实际上lodash库对于函数直接进行了返回，换而言之，他们使用同一个内存地址是符合我们对于深拷贝的定义的。

## 处理更多的类型

### 数组

首先通过展开运算符(`...`)是可以快速实现的，会对简单的一维数组（且内部均为基本类型的值）的数组进行拷贝，如果涉及到引用类型（包括多维数组），还需要进行递归处理直到目标是一个基础类型为止。

除了展开运算，我们也可以使用几个数组的原生方法返回全新的数组，比如`Array.map`或者`Array.concat(); // 拼接为空时是指返回新的原来数组`

修改上面的代码，使之支持数组：

```javascript
function baseClone(target, stack) {
  var newObj = Array.isArray(target) : [] : {};
  if(!stack) stack = [];
  // 检测target是否已经存在于stack内
  if(target.indexOf(stack) > -1) {
    return target
  } else {
    stack.push(target)
  }
  for (var key in target) {
    // 循环一个指定的变量来循环一个对象所有可枚举的属性
      if(typeof target[key] === 'object' && target[key] !== null) {
        newObj[key] = baseClone(target[key], stack);
      } else {
        newObj[key] = target[key];
      }
  }
  return newObj;
}
```

### 其他引用类型

首先要进行判断，因为是引用类型，建议通过`toString`来进行判断，下面给出一个简单的对应：

```javascript
const mapTag = '[object Map]';
const setTag = '[object Set]';
const arrayTag = '[object Array]';
const objectTag = '[object Object]';

const boolTag = '[object Boolean]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const numberTag = '[object Number]';
const regexpTag = '[object RegExp]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
```

对于以上的类型，除了数组和对象，其他都不能再进行递归拷贝，因此可以对应使用构造器直接构造新的引用值来进行拷贝。

## 延展话题：Map与WeakMap

这个话题之后会另起一篇单独讨论，他们在这一类复制的情况可以有较好的运用。

从零到一实现一个JS版深克隆

目前，JavaScript生态下最常见的模块机制大致分为以下四种：

- AMD
- CMD
- CommonJS
- ES6 Module

下面逐个分析每个机制的特点。

## CommonJS

- 环境：Node.js
- 全局方法：`require(module) & exports || module.exports`

### exports 与 module.exports

在Node.js环境中，`exports, require, module`都是node的全局对象，`exports`是`module.exports`的引用。

## AMD("Asynchronous Module Definition")

- 环境：Browser
- 全局方法：`require([module], callback)`

> 这里需要注意，所有的浏览器环境的模块化机制，都要避免同步引入，因为不同于服务端可以直接进行磁盘读取，很快即可使用对应模块，浏览器端需要异步请求，否则会造成假死的状态。因此， __浏览器端的模块化机制都是异步加载的__ 。

AMD规范通过回调机制实现了异步加载，在加载完成后执行callback。

## CMD("Common Module Definition")

- 环境：Browser(Sea.js)
- 全局方法：`define() & seajs.use()`

## ES6 Modules

- 环境：Browser(目前工具通过工具已经支持Node.js)
- 全局方法：`export & import`

与CommonJS最主要有两点区别

1. ES6模块输出的是值的引用，输出接口动态绑定，而 CommonJS 输出的是值的拷贝；
2. ES6模块编译时执行，而 CommonJS 模块总是在运行时加载。

### export的使用

```javascript
export const firstName = "Michael";
// const firstName = "Michael";
// export { firstName }; // 不能直接export firstName是因为export需要导出一个“接口”而不能是一个值。
```

### export default

为模块指定默认输出，如果import接口时，可以用任意名称指向export default输出的方法

JavaScript的模块机制

> 写在最前面，为什么已经入行一年半才写这样一篇文章呢？其实并不是自己平时开发没有使用，但是很多时候自己的代码会有些“四不像”，各种风格糅杂在一起，因此写这么一篇文章，从编程范式的角度规范自己的代码。

### 面向对象的特性

面向对象就要提到以下的“名词”，那么JavaScript应该如何实现这些呢？

- 类与对象
- 封装性
- 继承
- 多态
- 抽象性

### 类与对象

> 基于原型的编程不是面向对象编程中体现的风格，且行为重用（在基于类的语言中也称为继承）是通过装饰它作为原型的现有对象的过程实现的。这种模式也被称为弱类化，原型化，或基于实例的编程。

而在JavaScript中，实现的方式就是通过函数内置的Prototype属性完成这种 __原型继承__ 。

#### 对象

JavaScript内的对象，其实就是Object，那么Object有两种方法可以用来创建：

```javascript
var Person = {}; // 字面量
var Person = new Object(); // 使用new运算符
```

那么他们有什么区别呢？首先要说的就是new，new做了哪些呢？这里引用MDN的解释：

> 1. 创建一个空的简单JavaScript对象（即{}）；
> 2. 链接该对象（即设置该对象的构造函数）到另一个对象 ；
> 3. 将步骤1新创建的对象作为this的上下文 ；
> 4. 如果该函数没有返回对象，则返回this。

不难发现，new的第一步其实和字面量方式完全一致，所以，new运算符的链接与设定this其实是最核心的不同点。

我们一般不常用`new Object()`，而直接用字面量方式的原因，其实是因为他们的prototype都指向了null。

正是因为这样，我们在日常的使用中，如果希望通过OOP实现逻辑，应该通过new的方式来进行，因为他可以继承我们期望的对象。

##### 代码风格

JavaScript有很多的引用类型数据，因此在面向对象时，要注意分离自有的部分与暴露的方法。

```javascript
function Person (name){
	this.name = name;
}
Person.prototype.sayIntro = function() {
	return 'Hello, my name is ' + name + '.'
}
var person1 = new Person('peter'); // Person是一个构造器。
person1.sayIntro(); // 为什么可以调用prototype上的方法呢？参见“原型链”
```

##### `Object.create()`

> Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

Object.create()是ES2015规范内的新方法，同时在ES5.1进行了加强，它可以polyfill使得我们可以在生产中尽可能使用来让我们的代码更为清晰。

其内部核心的实现其实在JS高程有对应的代码：

```javascript
// 在自己的实现里要注意当前环境是否支持create，以及目标是否可以作为create的对象。
Object.create = function (proto, propertiesObject) {
  function F() {}
  F.prototype = proto;
  return new F();
};
```

那么如果使用`Object.create`应该如何实现继承呢？下面是MDN的一个例子：

```javascript
// Shape - 父类(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype); // create的目标是父类的prototype，注意，JS的继承是原型继承。
Rectangle.prototype.constructor = Rectangle; // 修复constructor指向
```

上面是一个单继承的例子，如果我们希望做多继承，其实只需要修改Rectangle.prototype，让其的赋值为其多继承的对象的prototype的合并(Object.assign)。需要注意需要在子类内部显式绑定this。

#### 类

ES6最大的变化就是对Class的支持，虽然JS只能通过原型继承，但是Class的出现使得JS的OOP“看起来更像那么回事了”。

为什么说看起来呢？目前还没有实现私有与公有特性，它只是原来构造模式的一个语法糖，但是，它也有它的不同之处。

- Class内部只是原型的实现，在实际使用时还是需要通过new运算符执行构造函数；
- 类声明不能被提升；
- 类声明中的代码自动运行在严格模式下；
- __类中的所有方法都是不可枚举的__ ；
- 每个类都有一个`[[construct]]`的方法，constructor方法默认返回实例对象（即this）；

##### 派生类

```javascript
class HelloWorld extends React.Component {}
```

上面这种写法在React的开发中非常常见，extends是一个派生类， __在派生类中，如果使用了构造方法，就必须使用super()__ ，在构造函数中访问this之前要调用super()， __负责初始化this__ 。

```javascript
class Shape {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class Rectangle extends Shape {
  constructor() {
    super();  // 这里的super可以作为函数，也可以作为特殊的对象（无法直接输出，但是可以设置属性）。
  }
}
```

### 继承

见上面对“类与对象”内继承的实现，核心在于prototype __原型继承模式__ 。

### 抽象

> 抽象是允许模拟工作问题中通用部分的一种机制。这可以通过继承（具体化）或组合来实现。
> JavaScript通过继承实现具体化，通过让类的实例是其他对象的属性值来实现组合。

> JavaScript Function 类继承自Object类（这是典型的具体化） 。Function.prototype的属性是一个Object实例（这是典型的组合）。

### 多态

其实多态并没有太多好说的，核心在于“原型链”：如果你在子类声明了同名的属性和方法，那么就不会在原型链上向上查找。

JavaScript面向对象编程(ES6版本)

前端的笔试题，离不开妙用数组解决存储和顺序，本文复习一下数组的方法，加深印象，补充一些妙用。

## 方法概览

1. 转换
	- toLocalString()
    - toString()
    - valueOf()
    
2. 栈方法
	- pop() `array.pop() // 返回pop的元素`
    - push() `array.push(item1, item2, ..., itemX) // 返回数组新长度`
    
3. 队列方法
	- push() `array.push(item1, item2, ..., itemX) // 返回数组新长度`
    - shift() `array.shift() // 返回移除的元素`
    
4. 重排序
	- sort() `array.sort(sortFunction) // 返回数组的引用，不产生新的副本`
    - reverse() `array.reverse() // 返回数组的引用，不产生新的副本`
    
5. 操作方法
	- concat() `array1.concat(array2,array3,...,arrayX) // 返回新数组`
    - slice() `array.slice(start, end) // 返回新的数组`
    
      > array.slice()返回数组的复制。
        
    - splice() `array.splice(index,howmany,item1,.....,itemX) // 如果从 array 中删除了元素，则返回的是含有被删除的元素的数组。`

6. 位置方法
	- indexOf() `array.indexOf(item,start) // 返回第一个出现的位置，如果未找到返回 -1`
    - lastIndexOf() ` // 返回最后一个出现的位置，如果未找到返回 -1`
    
7. 迭代方法
	- every() `array.every(function(currentValue,index,arr), context) // context为this的值，下同。返回布尔值，如果所有元素都通过检测返回 true，否则返回 false。`
    - filter() `array.filter(function(currentValue,index,arr), context) // 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。`
    - some() `array.some(function(currentValue,index,arr) ,context) // 返回布尔值。如果数组中有元素满足条件返回 true，否则返回 false。`
    - forEach() `array.forEach(function(currentValue, index, arr), context) // 返回undefined！`
    - map() `array.map(function(currentValue,index,arr), context) // 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。`
    
8. 归并方法
	- reduce() `array.reduce(function(total, currentValue, currentIndex, arr), initialValue) // 返回计算结果，例如求和。`
    - reduceRight() `array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue) // 返回计算结果。`
    
9. 新方法
	- keys() `array.keys() // [object Array Iterator]`
    - includes() `arr.includes(searchElement, fromIndex?) // 返回布尔值。如果找到指定值返回 true，否则返回 false。`
    - from() `array.from(object, mapFunction, context) // 返回数组对象。用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。`
    - findIndex() `array.findIndex(function(currentValue, index, arr), context) // 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。` 
    - entires() `array.entries() // 返回数组迭代对象。`

做前端笔试题前，需要复习的数组方法

### 已解决

* Q: 用JS实现一个函数，能使输入特定的字符串转化为特定结构化数据。

  字符串仅由小写字母和`[,]`构成，且字符串不包含多余的空格

  示例一：`'abc'` -> `{value:'abc'}`

  示例二：`'[abc[bcd[def]]]'`-> `{value:'abc',children:{value:'bcd',children:{value:'def'}}}`

  A:

  ```javascript
  // 类比AST，将输入转换为一系列操作
  function normalize(str) {
    let parent = {}
    // 所有括回均不需要，直接移除
    parent.children = _normalize(str.replace(/\]/g, ''))
    return parent.children
  }
  
  function _normalize(str) {
    // [abc[bcd[def]]] => {value: "abc", children: {value: "bcd", children: {value: "def"}}}
    // 不具有树形结构直接返回
    let obj = {}
    if(str.charAt(0) !== '[') {
      obj.value = str
      return obj
    }
    // '['开始, 找到之后的连续字符串
    let arr = str.split('[')
    let _val = arr[1]
    // 截取剩下的部分再进行递归
    let rest = ''
    for(let i = 2; i < arr.length; i++) {
      rest = rest + '[' +arr[i]
    }
    if (rest === '') {
      return {value: _val}
    }
    return {value: _val, children: _normalize(rest)}
  }
  
  normalize('[abc[bcd[def]]]')
  // normalize('def')
  ```
  
* Q: 模仿lodash内调用curry函数，实现一个myCurry？

  A:

  > 墙裂推荐这篇[译文](https://www.jianshu.com/p/822c4bfeb8a9)，将柯里化的思考过程逐步展现出来
  
  > 本题解法来自《JavaScript轻量级函数式编程》

  ```javascript
  // lodash: _.curry(func, [arity=func.length])
  // 实现两点：1. 参数复用——可固定参数，2. 延迟计算——返回最终函数触发计算
  // 原型实现：
  function curry(fn, arity = fn.length) {
    return (function nextCurried(prevArgs) {
      return function curried(nextArg) {
        var args = prevArgs.concat([nextArg])
        if(args.length >= arity) {
          return fn(...args)
        } else {
          return nextCurried(args)
        }
      }
    })([])
  }
  // 注意：偏函数partial(add, 3)和柯里化curry(add)(3)的区别
  ```
  
* Q: 在不使用slice，replace等原生函数的情况下，实现一个indexOf方法（本题来自“司徒正美”的[博客](https://www.cnblogs.com/rubylouvre/archive/2011/08/19/2144894.html)）？

  A:
  ```javascript
  function getSubStrArr(str, length) {
    var subStrArr = []
    if(!length || length === 0) return subStrArr;
    for (var i = 0; i < str.length - length + 1; i++) {
      if(length > 1) {
        var tmp = [];
        for(var j = 0; j < length; j++) {
          tmp.push(str.charAt(i + j));
        }
        subStrArr.push(tmp.join(''));
      } else {
        subStrArr.push(str.charAt(i));
      }
    }
    return subStrArr;
  }

  function myIndexOf(str, target) {
    if(target === '' || target === undefined) return flag;
    var flag = -1
    var subStrArr = getSubStrArr(str, target.length);
    for(var i = 0; i < subStrArr.length; i++) {
      if(subStrArr[i] === target) {
        flag = i
      }
    }
    return flag
  }
  console.log(myIndexOf('abcdefgh', 'cde'))
  ```
  
* Q: 简单手写实现bind

  A: 见 [实现bind](https://blog.sparking.app/post?id=fe%252Fspeaking-javascript-%25E9%2598%2585%25E8%25AF%25BB%25E7%25AC%2594%25E8%25AE%25B0-%25E4%25B8%2589)
  
* Q: 如何获取两个时间（格式如: 2001-01-30）中间相差的年月日（提供三个精度）

  A:
  ```javascript
  // 这道题投机的方式是通过字符串与年月日格式的硬匹配完成，但是如果要求多种精度，则需要很繁琐，建议使用Date
  function parseDate(str) {
    let strArr = str.split('-')
    if(strArr.length !== 3 || parseInt(strArr[0]) < 1970 || parseInt(strArr[1]) > 11 || parseInt(strArr[2]) > 31 ) { // 简单处理，兼容如果当月没有此日期
      throw new Error('日期格式非法')
    }
    let date = new Date(strArr[0], strArr[1]-1, strArr[2])
    return date;
  }

  // 深拷贝日期对象
  function dateToString(_date, unit) {
    var _d = new Date(_date.valueOf());
    var _dStr = ''
    if(unit > 0) _dStr += _d.getFullYear();
    if(unit > 1) _dStr += ('-' + (parseInt(_d.getMonth()) + 1 >= 10 ? (parseInt(_d.getMonth()) + 1).toString() : '0' + (parseInt(_d.getMonth()) + 1).toString()));
    if(unit > 2) _dStr += ('-' + (parseInt(_d.getDate()) >= 10 ? parseInt(_d.getDate()).toString() : '0' + parseInt(_d.getDate()).toString()));
    return _dStr;
  }

  // unit指精度, 从1-3分别指年月日，函数返回一个数组，包含中间所有的相差的日子
  function minorDates(start, end, unit) {
    var _u = unit || 3;
    var _start = parseDate(start)
    var _end = parseDate(end)
    var _minors = []
    var _minorDate = _end - _start
    var step = 24 * 60 * 60 * 1000; // default 一天
    if(_minorDate <= 0) {
      return _minors
    } else {
      for(var i = 0; i < _minorDate / step; i++) {
        var _d = dateToString(new Date(_start.getTime() + i * step), unit)
        if(_minors.indexOf(_d) === -1) _minors.push(_d);
      }
    }
    return _minors
  }

  console.log(minorDates('2019-02-25', '2020-02-25', 3))
  ```

### 来自前端面试周报的题

> 本篇主要记录 Github airuikun/[**Weekly-FE-Interview **](https://github.com/airuikun/Weekly-FE-Interview) 仓库内的优秀面试题我自己的解法，会持续更新，但是不会每题都解一遍，建议可以访问源仓库。

* Q: 简单手写实现Promise

  A:

  ```javascript
  // 实现主要三个功能，thenable，resolve，reject，catch，finally
  ```
* Q: 简单手写实现Async/Await

  A:

  ```javascript
  
  ```

### [掘金](https://juejin.im/) 日常浏览的题目

* Q: Promise题

  **限制异步操作的并发个数并尽可能快的完成全部**

  有8个图片资源的url，已经存储在数组urls中。

  urls类似于`['https://image1.png', 'https://image2.png', ....]`

  而且已经有一个函数function loadImg，输入一个url链接，返回一个Promise，该Promise在图片下载完成的时候resolve，下载失败则reject。
  但有一个要求，任何时刻同时下载的链接数量不可以超过3个。请写一段代码实现这个需求，要求尽可能快速地将所有图片下载完成。

  > 作者：LinDaiDai_霖呆呆
  >
  > 链接：https://juejin.im/post/5e58c618e51d4526ed66b5cf
  >
  > 来源：掘金

  A:

  ```javascript
  // 最优解法可以往瀑布流靠拢，有一个三个任务race的池，当一个完成时加入一个未开始的开始。
  ```

### 大厂面试题

_本节内容来自网络_

前端部分面试题解（不定期更新）

_本篇开始将一部分浏览器与Node.js环境相关的知识点补充进来_

### 超时与间歇调用

> JavaScript是单线程语言（后期加入额外线程Worker）

需要注意的是，使用定时器对于队列而言，不是在指定时间立即执行，而是 __在指定时间被加入到队列中__ ，如果队列内没有其他任务，则表现为“立即执行”

如果在浏览器端，需要效果比较好的定时执行，可以通过rAF实现。

### DocumentFragment

使用DocumentFragment优化DOM操作。

### 浏览器的重绘与重排

详见另一篇[文章](https://blog.sparking.app/post?id=fe%252F%25E6%25B5%258F%25E8%25A7%2588%25E5%2599%25A8%25E7%259A%2584%25E9%2587%258D%25E7%25BB%2598-repaint-%25E4%25B8%258E%25E9%2587%258D%25E6%258E%2592-reflow-%25E6%259C%25BA%25E5%2588%25B6 "重绘与重排")

### 事件

现在使用MVVM框架多了，减少了直接操作事件，但是还是有必要列出复习的。

#### 1. 事件流

三个阶段：

* 事件捕获
* 处于目标
* 事件冒泡

#### 2. DOM2级事件处理程序

* `addEventListener(eventName, fn, needCapture?)`
* `removeEventListener`

remove操作需要注意，fn不能是一个匿名函数，这时remove才有效。

#### 3. 事件对象

event对象通常包括以下：

* bubbles
* cancelable
* currentTarget
* defaultPrevented(DOM Level-3)
* detail
* eventPhase(处于流的阶段，1-捕获，2-处于目标，3-冒泡)
* preventDefault() (取消默认行为，注意区分)
* stopImmediatePropagation() (DOM Level-3)
* stopPropagation() (取消事件的进一步捕获或冒泡)
* target
* trusted
* type
* view

#### 4. 事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

面试题：

Q：用原生JS实现jQuery的on和off效果？

A:

#### 5. 事件模拟

可以用 `document.createEvent` 模拟一些鼠标或者键盘事件，但是需要实机测试，例如Chrome对模拟的点击事件就有比较严格的限制。

#### 6. 拖放事件

HTML5 新增的事件，可以用来作为一些特殊的交互，比如拖放上传等。

#### 7. JSON

注意，以下都是 **合法的** JSON：

* **简单值**
* 对象
* 数组

> `JSON.stringify(value[, replacer [, space]])` 可以通过传入第二个参数进行JSON过滤，第二个参数支持数组或者函数。第三个参数不常用，一般用于控制缩进。

### XHR(XMLHttpRequest)

状态值：

* 0，未初始化；
* 1，启动（已经调用open但是未send）；
* 2，发送；
* 3，接收；
* 4，完成。

#### 1. FormData

表单提交，可以上传文件。

#### 2. Progress事件

用于监测进度，可以用HTML5实现上传进度。

#### 3. 跨域CORS

> 跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

> 出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。

1. 不会引发CORS的简单请求：

   ![MDN-CORS](https://cdn.arc-light.fun/TV9IYt/CORS_simple-request.png)
2. 需要进行预检（Preflight）的请求：

   ![MDN-CORS](https://cdn.arc-light.fun/T9Q56f/CORS_preflight-request.png)
3. 携带身份凭证（Cookie）：

   ![MDN-CORS](https://cdn.arc-light.fun/WDX1n8/CORS_with-credit.png)
   
### 高级技巧：节流与防抖

节流：节约流量——无论触发多少次，指定间隔内只能触发一次；
防抖：防止抖动——中间触发N次都以最后一次开始计算时间，待指定间隔后触发。

### 数据存储

#### 1. Cookie

Cookie数量限制不一，在20-50之间，尺寸一般在4096B

#### 2. Storage

localStorage一般会设置每个来源5MB，部分浏览器只有2.5MB；

SessionStorage同样一般为5MB，部分浏览器为2.5MB；

#### 3. IndexedDB & WebSQL

浏览器支持情况不定，需要根据具体需求使用。

"Speaking JavaScript"阅读笔记（附加篇）

_本章开始写函数与对象，内容相对较多单起一章专门记录_

### 10. 函数

JavaScript中的函数一共有三种形式：

* 非方法的函数（“普通函数”）；
* 构造器；
* 方法；

因此我们创建函数一共有三种：

* 通过函数表达式；
* 通过函数声明；
* 通过Function()构造器（不推荐）；

所有的函数都是对象、Function构造器的实例。

具名函数表达式只能在函数表达式的内部被访问。

在函数的内部，有两个特殊的对象，arguments和this。

> this引用的值是函数数据以执行的环境对象——或者也可以说是this值。由于在调用函数之前，this的值并不确定，因此this可能会在代码执行过程中引用不同的对象。

> ECMAScript中的所有参数传递的都是值，不可能通过引用传递参数。

#### 10.1. 控制函数调用，`call()`, `apply()`和`bind()`

_bind()方法非原生，本节末尾会给出使用apply实现bind。_

使用：

```javascript
func.apply(thisValue, argArray)
func.call(thisValue, arg1, ..., argN)
func.bind(thisValue, arg1, ..., argN) // 创建一个新函数，会调用func，再绑定this到新的thisValue
```

一个非常有趣的陷阱：

```javascript
['1', '2', '3'].map(parseInt) // [1, NaN, NaN]
```

这是因为parseInt只接受一个参数，map的期望函数签名`function(element, index, array)`，而parseInt的签名则是`parseInt(string, radix?)`, 这会导致radix也被传入。

#### 10.1.1 实现bind

_本节的实现来自JS高程_

1. apply

```javascript
function bind(fn, context) {
  return function () {
    return fn.apply(context, arguments);
  }
}
```

1. apply的柯里化版本

```javascript
function bind(fn, context) {
  var args = Array.prototype.slice.call(arguments, 2);
  return function () {
    var innerArgs = Array.prototype.slice.call(arguments);
    var finalArgs = args.concat(innerArgs);
    return fn.apply(context, finalArgs);
  }
}
```

### 11. 变量：作用域、环境和闭包

> 全局执行环境是最外围的一个执行环境，每个函数都有自己的执行环境，eval也会创建一个独立的执行环境。

#### 11.1. 作用域

JavaScript的变量是函数级作用域的，**只有函数可以产生新的作用域**。

JavaScript会提前所有的变量声明，它会把所有的声明移到直接作用域的最前面。

#### 11.2. IIFE

* 它是立即执行的；
* 它必须是一个表达式；
* 连续的两个IIFE之间需要分号，不然会导致解析错误。

IIFE也可以前缀运算符，比如!, void都是可以的，避免了分号的问题。

```javascript
var File = function () { // open IIFE
	// do something...
}(); // close IIFE
```

#### 11.3. 全局对象

全局对象是有原型的。

#### 11.4. 环境

无论一个函数被调用多少次，它总要访问它自己（最新）的本地变量和外部作用域的变量。当多次调用自己的时候，每次调用都会创建一个新的环境。

通过闭包可以使得函数可以维持其创建时所在的作用域。但如果创建时受到了当前作用域变量的影响，会存在环境公用的影响。

#### 11.5. 垃圾收集

两种垃圾收集机制，__标记清除__，__引用计数__，两种都有使用，标记清除更为常用，引用计数一般用于COM对象。

#### 11.6. 闭包

> __闭包__ 是指有权访问另一个函数作用域中的变量的函数。

创建闭包的常见方式，就是在一个函数内部创建另一个函数。

闭包只能取得包含函数中任何变量的最后一个值。

#### 11.7. 闭包中的this

在闭包中使用this对象会导致一些问题，因为this对象是在运行时基于函数的执行环境绑定的。

> 如果闭包的作用域链中保存着一个HTML元素，那么就意味着该元素将无法被销毁。

### 12. 对象与继承

JavaScript中的面向对象编程（OOP）分为以下几层：

* 第一层，单一对象的面向对象；
* 第二层，对象间的原型链；
* 第三层，作为实例工厂的构造函数，类似于其他语言的类；
* 第四层，子类，通过继承已有的构造函数，创建新的构造函数。

#### 12.1. 第一层，单一对象的面向对象

##### 12.1.1 属性

属性分为三种：

1. 属性
2. 访问器
3. 内置属性（规范将内置属性的键置于方括号中，例如`[[Prototype]]`）

delete只影响一个对象的直接“自有”的，非继承的属性，delete成功则返回true，如果是自有属性但不能删除则返回false。

##### 12.1.2 对象字面量

```javascript
var jane = {
  name: 'jane',
  describe: function () {
    return 'Person named ' + this.name;
  }
}
```

#### 12.2. 第二层，对象间的关系——原型链

```javascript
var proto = {
  describe: function () {
    return 'name: ' + this.name;
  }
};
var obj = {
  [[Prototype]]: proto, // 实际不可访问
  name: 'obj'
}
```

对象obj从proto继承了describe属性。

当通过obj访问属性时，JS首先从本对象中查找，接着是它的原型，以及它原型的原型。

在ES5后，我们可以通过`Object.create(proto, propDescObj?)`完成使用给定prototype创建新对象。

检测时，可以使用：

```javascript
Object.prototype.isPrototypeOf(obj); // 会检索整个链上
```

#### 12.2.1 特殊属性__proto__

某些JavaScript引擎有特殊属性可以获取和设置对象的原型：`__proto__`。这样可以直接访问`[[Prototype]]`。其在ES6内将会作为标准。

方法区分：

* `Object.getOwnPropertyNames(obj)` 返回obj的所有 **自有** 的属性键。
* `Object.keys(obj)` 返回obj的所有 **可枚举** 的属性键。

#### 12.3 访问器

```javascript
var obj = {
  get foo() { // 取值调用，getter
    return 'getter';
  },
  set foo(value) { // 赋值调用，setter
    console.log('setter: '+value);
  }
}
```

#### 12.4 属性特性和属性描述符

* Value
* Writable
* Get
* Set
* Enumerable
* Configurable

#### 12.5 复制对象

复制要保证：

1. 拷贝必须具有与原对象相同的原型；
2. 拷贝必须具有与原对象相同的属性和特性；

```javascript
function copyObject(orig) {
  // copy prototype
  var copy = Object.create(Object.getPrototypeOf(orig));
  // copy all properties
  copyOwnPropertiesFrom(copy, orig);
  return copy;
}

function copyOwnPropertiesFrom(target, source) {
  Object.getOwnPropertyNames(source).forEach(function (propKey) {
    var desc = Object.getOwnProperyDescriptor(source, propKey);
    Object.defineProperty(target, propKey, desc);  // 使用获取的属性描述符创建target的自有属性
  });
  return target;
}
```

#### 12.6 第三层，作为实例工厂的构造函数，类似于其他语言的类

Speaking JavaScript内推荐的构造函数写法：

> ```javascript
> function Person(name) {
>   this.name = name;
> }
> Person.prototype.describe = function () {
>   return 'Person named ' + this.name;
> };
> ```

经典面试内容：
Q：new操作符都做了什么？
A：

1. 创建一个新对象；
2. 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
3. 执行构造函数中的代码（为这个新对象添加属性）；
4. 返回新对象。

> 引用类型与基本包装类型（“装箱”）的主要区别就是对象的生存期，使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。

Speaking JavaScript内对这个过程的描述：

> 首先设置行为：创建一个新对象，其原型为Person.prototype;
> 然后设置数据：Person接受对象作为隐式参数this，并添加实例属性。

代码模拟如下:

```javascript
function newOperator(Constr,args) {
  var thisValue = Object.create(Constr.prototype);
  var result = Constr.apply(thisValue, args);
  if(typeof result === 'object' && result !== null) {
  	return result;
  }
  return thisValue;
}
```

每个函数包含一个实例原型对象，它的constructor属性指回函数。

### 12.7 泛型方法：借用原型方法

```javascript
Wine.prototyte.incAge.call(john, 3) // 类似于这样的模式
```

对于泛型方法，最常用的是处理一些“Array like”的元素，借用数组方法进行处理。

通过 `Array.isArray` 也可以作为数组的判断，能够区分Array-like。

"Speaking JavaScript"阅读笔记（三）

### 2. JavaScript相关的一些事

#### 2.1. JavaScript的性质

- 它是动态的；
- 它是动态类型； _（即便引入TypeScript协助开发也只能协助推导类型。）_
- 它是函数式和面向对象的；

### 3. JavaScript语言深入

#### 3.1 语句

凡是在JavaScript期望语句的地方都可以写表达式，不能在需要表达式的地方使用语句。

如果使用二义表达式（语法类型是二义的），为了避免二义性，在解析过程中，JavaScript不能使用对象字面和函数表达式作为语句，即不能以下面的内容开头：
- '{}'；
- function关键词； _(所以IIFE模式需要将匿名函数放在一个括号内，如果不使用这个括号， JS会认为这是一个函数声明，而函数声明是不可以匿名的，而函数定义又不能立即执行。)_

#### 3.2 数字

刷题曾经遇到过一个这样的问题：

```javascript
// 以下那种写法能够正确输出？
1.toString()  // 唯一一种不能正常输出的。
1..toString()
1 .toString()
(1).toString()
1.0.toString()
```

之所以存在这种问题，是因为JS内所有数字都是以浮点数存储的，这里紧跟的'.'会被认为是小数点。

### 4. 值

> 在编程语言的语义和类型体系环境中，静态一般是指“编译时”或者“非运行时”，动态是指“运行时”。

#### 4.1 强制转换

JavaScript内置的转换机制只支持布尔值、数字、字符串和对象。

怪异的两个转换：

- `Number(null) === 0`
- `Number(undefined); // NaN`

两个约定的转换方式：

- 乘法运算符会强制转换为数字；
- 加法运算中如果一个是字符串，运算符会将另一个运算数转换为字符串。

引擎内自带一个转换算法，ToPrimitive()，根据情景的不同偏好，先后完成：

- 如果输入的是原始值，返回；
- 如果输入是对象，偏好为数值，调用valueOf（偏好为字符串时优先调用toString)；
- 否则，调用toString（valueOf）；
- 否则，抛出一个TypeError。

#### 4.2 null

null表示 __没有对象__ 。

null是原型链最顶端的元素。

```javascript
Object.getPrototypeOf(Object.prototype) // null
```

#### 4.3 原始值的包装对象（装箱）

布尔值，数字和字符串这三种原始值都有响应的构造函数。它们的实例包含原始值。原始值可以从包装器借调方法。

### 5. 运算符

JavaScript中无法重载或自定义运算符，包括等号。

NaN与本身不相等（宽松 & 严格）。

#### 5.1 比较

在比较包装实例和原始值的时候，原始值和包装的原始值是宽松相等的，（但两个相同的原始值它们的包装实例不相等）

### 6. 数字

Number()在转换时一般优于parseFloat(), 原因：

- 对非字符串使用parseFloat效率较低，因为在解析之前它会将参数强制转换为字符串；
- parseFloat()会将空字符串解析成NaN；
- parseFloat()会一直解析到最后一个合法的字符，这意味着最后可能得到的不是想要的结果，比如`parseFloat(123.45#)`

### 7. 字符

字符串是由JavaScript字符组成的不可变序列，其中每个字符是一个16位的UTF-16编码单元。（一个Unicode字符相当于一个或两个JavaScript字符）

优化：新版本JavaScript引擎通过加号+优化字符串拼接并在内部使用相似的方法（array.push()）。

### 8. 数组

不要用for-in来遍历数组，因为for-in只会遍历索引，而不是数组元素，其次还会遍历所有的（非索引）属性值。

注意，for-in遍历对象所有的可枚举属性，其中包括了继承来的属性，因此需要判断是否为自身的：

```javascript
for(var key in person) {
	if(Object.prototype.hasOwnProperty.call(person, key) { // 为了避免person自身有hasOwnProperty方法
    	console.log(key)   
    }
}
```

### 9. 错误处理

对于异常捕获有两个原则：如果一处出错的含义不能被描述，那么就抛错；找到一个可以捕获错误的位置，捕获异常。

Error是通用的异常构造器，所有其他的异常构造器都是它的子构造器，因此我们可以自定义错误构造器。

"Speaking JavaScript"阅读笔记（二）

### 写在前面

由于疫情的原因，这次离职比以往多了许多准备和复习的时间，也能沉下心好好复习一下基础知识点，本篇是我自己在阅读“Speaking JavaScript”时做出的摘录与笔记，在整理的过程中会加入一些自己想到的代码示例，并综合《JavaScript高级程序设计（第3版）》整理，如果有一些错误欢迎在下方的Disqus评论区指正，感谢！

~~为什么没有用最新的第四版高程呢？因为2019.10.16才正式有英文版，而且作者和第三版不是同一位……等到出了正式中文版再做一次补充吧~~

![Speaking JavaScript](https://cdn.arc-light.fun/N4DgB-/orm_front_cover.jpg "中文名：深入理解JavaScript")

## 0. JavaScript背景知识

### 0.1. JavaScript与ECMAScript的关系

ECMAScript是JavaScript的官方命名，因为Java已经是一个商标。JavaScript指编程语言，ECMAScript是语言规范的名字。

### 0.2. ECMAScript历程

* 1th Edition (1997-01)
* 2th Edition (1998-08)
* 3th Edition (1999-12, 4th Edition has been abandoned at 2008-07)
* 5th Edition (2009-12)
* 6th Edition - ECMAScript 2015
* 7th Edition - ECMAScript 2016
* 8th Edition - ECMAScript 2017
* 9th Edition - ECMAScript 2018
* 10th Edition - ECMAScript 2019
* ES.Next

## 1. JavaScript的一些特性

### 1.1 语法类别：语句和表达式

```javascript
var foo; // 语句, do something
3 * 7 // 表达式, 产生“值”
```

常见的一种情形是：三目表达式 与 `if-else`块。

### 1.2 分号：建议使用

分号用于结束语句，缺少的分号会通过分号自动插入机制(ASI)完成，什么是ASI呢？

> ASI的目标是使分号对于行结束来说是可选的，也有说法是帮助解析器来确定语句的结束。

__但是，在以下的情况下也会认定为语句结束: __

* 行结束符后（如换行符）跟着一个非法token；
* 遇到一个结束的花括号；
* 文件已达结尾；

```javascript
if(a<0) a = 0
console.log(a) // 0后跟console属于非法token
```

```javascript
function foo(a, b) {
	return // return意味着会自动插入一个分号，下文不再执行
  	{
    	a + b
    }
}
```

### 1.3 变量名

一个合法的变量名规则：第一个字符可以是任意的Unicode字符、美元符号($)、或者下划线( _ )，后面还可以是任意的Unicode数字。

> ECMAScript中的一切都区分大小写。

但是保留字不能作为变量名，除保留字外以下变量也不建议：

* `Infinity`
* `NaN`
* `undefined`

### 1.4 值

原始值：

* true、false
* 数字（均为浮点）
* 字符串
* “空值”: undefined, null

除以上外，其他的值都是对象，特殊的，通过“装箱”我们可以得到非原始值的“字符串”、“布尔”、“数字”。

> 当复制引用类型的值的时候，会复制一份值的副本到新变量分配的空间中，然而，**这个值的副本实际上是一个指针，指向存储在堆中的一个对象**。

#### 1.4.1 如何对值分类

1. typeof

typeof主要用于原始值，除`typeof null === 'object'`外，其他都有正确的输出。

> typeof null是一个不能修正的bug，因为这会破坏现有的代码。~~直到目前的标准也不能修改~~

1. instanceof

instanceof主要用于对象，用来判断 **value是否是一个通过Constr构造器创建的对象。**

### 1.5 布尔值

#### 1.5.1 假值

以下值会被解释为假值：

* undefined, null
* false
* ~~-0~~ , NaN (经过测试，目前浏览器对+0，-0均判断为false)
* ''

#### 1.5.2 二元操作符

JavaScript的二元逻辑运算符是 **短路** 的，也就是说我们可以利用这个特点优化代码，尽量将大概率发生的优先判断。

'&&'，'||'符号返回的是第一个运算数的 **假（真）值** 或者第二个运算数，也就是说其实际返回的是执行后的值。

### 1.6 数字

JavaScript中的所有的数字都是浮点数。

### 1.7 字符串

### 1.8 语句

* 多条件情况下，switch的运行效率要高于if-else；
* break可以跳离循环，continue会开始一个新的循环迭代，可以用来优化循环内的执行过程；

### 1.9 函数

#### 1.9.1 函数声明的提升特性

注意与变量声明之间的区别，函数声明 **的实体会被移动到所在作用域的开始处** 。

> 而变量声明会变成如下的代码：
>
> ```javascript
>     var a; // undefined
>     console.log(a); // undefined
>     a = 3; // 3
> ```

但是要注意函数声明与函数表达式不同，后者只符合变量声明的提升规则。

```javascript
console.log(a); // undefined
console.log(b); // Uncaught ReferenceError: b is not defined. stopped.
var a = function b() {
    return 3;
} 
console.log(a);
console.log(b);
```

#### 1.9.2 特殊变量arguments

所有参数变量——`arguments`看起来像一个数组，但是却不具备数组的方法。(Array-like)

如果想将arguments转换为数组，代码如下：

```javascript
Array.prototype.slice.call(arrayLikeObject);
```

### 1.10 变量作用域

一个变量的作用域总是完整的函数。

#### 1.10.1 提升

所有变量声明都会被提升，**声明** 会被移动到函数的开始处，而赋值仍然会在原来的位置。通常来说，优先提升`var a;`，然后再提升`function a`，然后再赋值。

#### 1.10.2 闭包

> 闭包是指有权访问另一个函数作用域中的变量的函数。 —— JS高程(第3版),后文简称高程

一般外层函数内部存在一些变量，然后以返回一个函数的形式完成闭包，最常见的模式即“IIFE”

#### 1.10.3 IIFE

```javascript
// 关于为什么这种写法可以完成IIFE，后续会补充在此。
(function () {
	var foo = 'test'
}());
```

这里要注意闭包有时会存在并 **保持** 与外界变量的联系，如下：

```javascript
for(var i=0;i<5;i++) {
	result.push(function () { return i; }) // result[1]()执行后仍然是i = 5赋值的时候
}
```

_与对象等有关的点单独总结一章详细说明_

"Speaking JavaScript"阅读笔记（一）

```javascript
let EatMan = function () {
  this.task = [] // 声明一个task数组，模拟事件循环队列；
  this.taskNum = []
  let fn = () => {
    this.next();
  }
  this.task.push(fn);
  setTimeout(() => {
    this.next();
  }, 0)
  return this;
}

EatMan.prototype.eat = function (str) { // 为了task任务队列一致性，将eat也转换为setTimeout异步
  const _this = this
  var fn = () => {
    setTimeout(() => {
      console.log(str)
      _this.next()
    }, 0)
  }
  this.task.push(fn)
  this.taskNum.push(str)
  return this // 返回this使得可以链式操作
}
EatMan.prototype.sleep = function (ms) { // setTimeout的任务，需要在完成时再调用next继续执行
  const _this = this
  var fn = () => {
    setTimeout(() => {
      console.log('this is normal sleep.')
      _this.next()
    }, ms * 1000)
  }
  this.task.push(fn)
  this.taskNum.push('sleep')
  return this
}
EatMan.prototype.firstSleep = function (ms) { // 与sleep类似，注意需要在队首加入
  const _this = this
  var fn = () => {
    setTimeout(() => {
      console.log('this is first sleep.')
      _this.next()
    }, ms * 1000)
  }
  this.task.unshift(fn)
  this.taskNum.unshift('firstSleep')
  return this
}
EatMan.prototype.next = function () { // 通过next指针完成出队列操作，使之拥有顺序
  let fn = this.task.shift()
  fn && fn()
}

let eatMan = new EatMan()
eatMan.eat('apple').eat('orange').sleep(3).eat('banana').firstSleep(3)
console.log(eatMan.taskNum)
```

JS中的异步链式调用

> 感谢[JS原型链与继承别再被问倒了 - 路易斯@juejin](https://juejin.im/post/58f94c9bb123db411953691b)

#### JavaScript的继承

继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实现继承则继承实际的方法.由于js中方法没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且其 实现继承 主要是依靠原型链来实现的.

#### 构造函数、原型和实例

> 每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针.

> 如果试图引用对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性.

所以我们有`constructor1.prototype = instance2`

如果试图引用constructor1构造的实例instance1的某个属性p1:
1).首先会在instance1内部属性中找一遍;
2).接着会在instance1.**proto**(constructor1.prototype)中找一遍,而constructor1.prototype 实际上是instance2, 也就是说在instance2中寻找该属性p1;
3).如果instance2中还是没有,此时程序不会灰心,它会继续在instance2.**proto**(constructor2.prototype)中寻找...直至Object的原型对象

![原型链与原型对象](https://cdn.arc-light.fun/6gnP2V/prototype-chain.jpg)

JavaScript的原型链与继承

#### 在解释事件循环前……

```javascript
function foo(b) {
  var a = 10;
  return a + b + 11;
}

function bar(x) {
  var y = 3;
  return foo(x * y);
}

console.log(bar(7)); // 返回 42
```

这段代码存在这样的过程：

1. console.log调用bar -> 创建了第一个帧

2. bar调用foo -> 创建了第二个帧，并被压倒第一个帧上

3. foo完成并返回 -> 最上层帧弹出栈

4. bar完成并返回 -> 出栈，栈空

#### javascript在什么时候会用到队列呢？

一个 JavaScript 运行时包含了一个 **待处理的消息队列** 。每一个消息都关联着一个用以处理这个消息的函数。

在事件循环期间的某个时刻，运行时从 **最先进入队列的消息开始处理队列中的消息** 。为此，这个消息会被移出队列，并作为输入参数调用与之关联的函数。正如前面所提到的，调用一个函数总是会为其创造一个新的栈帧。

函数的处理会一直进行到执行栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。

#### 回到正题

根据 [HTML Standard](https://html.spec.whatwg.org/multipage/webappapis.html#event-loops). 这里的宏任务（旧称macrotask）现统称为task，其定义为：

> a task is a struct which has:
> \- **Steps**
> A series of steps specifying the work to be done by the task.
> \- **A source**
> One of the task sources, used to group and serialize related tasks.
> \- **A document**
> A Document associated with the task, or null for tasks that are not in a window event loop.
> \- **A script evaluation environment settings object set**
> A set of environment settings objects used for tracking script evaluation during the task.
> A task is runnable if its document is either null or fully active.

翻译过来就是一个具有指定步骤、具有一个源、上下文或者null（此时使用window event loop）、一系列追踪脚本运行的对象的结构。

而微任务依然是microtask，其定义为：

> A microtask is a colloquial way of referring to a task that was created via the queue a microtask algorithm. 译：微任务是指通过队列微任务算法创建的任务的口语方式。

#### 举个例子

这里感谢Jiasm的例子[微任务、宏任务与Event-Loop](https://juejin.im/post/5b73d7a6518825610072b42b),
对于一段JS代码而言，在JS的执行阶段是要逐步执行的，那么执行到一些需要等时的方法时，我就不可能去等待这些方法到来，等到你到来的时候我们再排队；
那么对于一个方法（macrotask）而言，其内部可能存在多个额外的“业务”：

```javascript
setTimeout(_ => console.log(4))

new Promise(resolve => {
  resolve()
  console.log(1)
}).then(_ => {
  console.log(3)
})

console.log(2)
// finally log 1,2,3,4
```

这里需要注意，setTimeout是宏任务，而Promise.then是一个标准的微任务，**在同步代码执行完成后才回去检查是否有异步任务完成，并执行对应的回调，而微任务又会在宏任务之前执行。**

> [Promise A+规范](https://promisesaplus.com/#notes)里特别标注，这里Promise要取决于平台和引擎自身：This can be implemented with either a “macro-task” mechanism such as setTimeout or setImmediate, or with a “micro-task” mechanism such as MutationObserver or process.nextTick. Since the promise implementation is considered platform code, it may itself contain a task-scheduling queue or “trampoline” in which the handlers are called.

目前比较流行的实现标准里，宏任务有：

|  | Browser | Node.js |
| --- | --- | --- |
| I/O | Yes | Yes |
| setTimeout/setInterval | Yes | Yes |
| setImmediate | No | Yes |
| requestAnimationFrame | Yes | No |

常见的微任务有：`process.nextTick`,`MutationObserver`,`Promise.then/catch/finally`

#### 回到EventLoop-事件循环

有一个非常好的动画来解释为什么是这样的执行顺序 [Who's right?](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/#level-1-bossfight)

Task, Job 与 EventLoop

#### 先说说Promise

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。

一个 Promise有以下几种状态:
* pending: 初始状态，既不是成功，也不是失败状态。
* fulfilled: 意味着操作成功完成。（与rejected统称为settled状态）
* rejected: 意味着操作失败。

>  Javascript中的promise代表一种 __已经发生__ 的状态， 而且可以通过回调方法链在一起。 如果你想要的是表达式的延时计算，考虑无参数的"箭头方法":  `f = () =>表达式` 创建惰性求值的表达式，使用 `f()` 求值。

Promise常用的方法有：
- __all__: 这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。
- __race__: 当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。
- __reject__: 返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法.
- __resolve__: 返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。

__注意：Promise直接执行的是宏任务，只有.then和.catch是微任务!__

#### 再说Async/await
`async function` 用来定义一个 __返回 AsyncFunction 对象__ 的异步函数。异步函数是指通过事件循环异步执行的函数，它会 __通过一个隐式的 Promise 返回其结果__ (如果不是通过await返回，那么返回的是一个Promise，返回值为resolve的值）。如果你在代码中使用了异步函数，就会发现它的语法和结构会更像是标准的同步函数。

异步函数可以包含await指令，该指令会暂停异步函数的执行，并等待Promise执行，然后继续执行异步函数，并返回结果。

记住，await 关键字只在异步函数内有效。如果你在异步函数外使用它，会抛出语法错误。

注意，当异步函数暂停时，它调用的函数会继续执行(收到异步函数返回的隐式Promise)

async/await的目的是简化使用多个 promise 时的同步行为，并对一组 Promises执行某些操作。正如Promises类似于结构化回调，async/await更像结合了generators和 promises。

使用async时要注意，如果同时操作多个异步方法，要注意调用的写法：
```javascript
var sequentialStart = async function() {
  console.log('==SEQUENTIAL START==');

  // 1. Execution gets here almost instantly
  const slow = await resolveAfter2Seconds();
  console.log(slow); // 2. this runs 2 seconds after 1.

  const fast = await resolveAfter1Second();
  console.log(fast); // 3. this runs 3 seconds after 1.
}

var concurrentStart = async function() {
  console.log('==CONCURRENT START with await==');
  const slow = resolveAfter2Seconds(); // starts timer immediately
  const fast = resolveAfter1Second(); // starts timer immediately

  // 1. Execution gets here almost instantly
  console.log(await slow); // 2. this runs 2 seconds after 1.
  console.log(await fast); // 3. this runs 2 seconds after 1., immediately after 2., since fast is already resolved
}

var parallel = async function() {
  console.log('==PARALLEL with await Promise.all==');
  
  // Start 2 "jobs" in parallel and wait for both of them to complete
  await Promise.all([
      (async()=>console.log(await resolveAfter2Seconds()))(),
      (async()=>console.log(await resolveAfter1Second()))()
  ]);
}
```
#### 那么async/await相比于Promise的区别（优势）？
- 代码读起来更加同步，Promise虽然摆脱了回调地狱，但是then的链式调用也会带来额外的阅读负担
- Promise传递中间值非常麻烦，而async/await几乎是同步的写法，非常优雅
- 错误处理友好，async/await可以用成熟的try/catch，Promise的错误捕获非常冗余
- 调试友好，Promise的调试很差，由于没有代码块，你不能在一个返回表达式的箭头函数中设置断点，如果你在一个.then代码块中使用调试器的步进(step-over)功能，调试器并不会进入后续的.then代码块，因为调试器只能跟踪同步代码的『每一步』。

Async/await和Promise的一些区别

## 较大的数组
对于较大的数组处理首先考虑两个问题，第一个要使用原生的for循环，即：
```javascript
for(j = 0,len=arr.length; j < len; j++) {
   
}
```
缓存了数组长度后能够有效提高运行效率，同时原生的性能最好
附：
对于较大数组的遍历运行效率比较
![10000长度数组的运行效率](https://cdn.arc-light.fun/F_f4Jx/demo_js_performanceAnalysis_jsarrayGoThrough_1.png)

第二个要注意的就是如果可以使用二分法，那么二分后会提高效率，举例说明
一个Vue的表单中存在带筛选的Boolean值A，那么在数据加载好之后我们可以在`mounted()`周期中添加一个方法，将所有`A===true`的放入数组中，其他的放入另外一个实现二分

## 快速筛选对象
可以使用ES6的filter方法，过滤掉不符合条件的元素，举例说明：
```javascript
const origin = [
  {
    A: "joasdjfoijas",
    B: "oasdjfojoadsjf",
  },
  {
    A: "joasdjfoijaafdafasfs",
    B: "oasdjfojoadsjfdasfasdf",
  },
  {
    A: "111",
    B: "Joe",
  },
]

let result = origin.filter(function(value){
  return value.A === "111"&&value.B === "Joe"
})

console.log(result)
```
通过Array的filter方法用回调的方式一次比较多个值是否匹配，避免多次遍历

利用`filter`和`map`组合可以大量过滤需要的元素并输出所需要的值，例如：
```javascript
var arr = [{
  gender: 'man',
  name: 'john'
}, {
  gender: 'woman',
  name: 'mark'
}, {
  gender: 'man',
  name: 'jerry'
}]
// filter : 有条件的筛选，返回条件为true的数组
// 筛选出性别为男性的名字集合
var newArr = arr.filter(n => n.gender === 'man').map(item => {
  return {
    name: item.name
  }
})
console.log('男性名字集合', newArr)   // => [{name: 'john'}, {name: 'jerry'}]

// 作者：付出
// 链接：https://juejin.im/post/5a5f3eaf518825733201a6a7
```
避免了老式的for+continue，也提高了代码的可读性

Spark1e

Tag: Javascript