js进阶知识梳理

Object.prototype.toString.call(Symbol('a')) // '[object Symbol]'  
Object.prototype.toString.call(null) // [object Null]  
Object.prototype.toString.call(NaN) // [object Number]  
typeof NaN // number  
null instanceof null // 报错  
null instanceof object // false  
1.__proto__.constructor // 报错 数字后接'.'会被优先解析为小数点  
(1).__proto__.constructor === Number // true  

let temp = new String('abc')  
temp.substring(1,2)  
temp = null  

// call
Function.prototype.myCall = function (ctx = globalThis) {
  const args = Array.from(arguments).slice(1); // 从arguments收集参数更具兼容性
  const key = Symbol("key");
  ctx[key] = this; // 将调用myCall的函数fun绑定到ctx[key]属性上
  const res = ctx[key](...args); // 使用ctx调用fun方法，此次调用fun中this变为ctx
  delete ctx[key]; // 删除fun属性
  return res; // 返回运行结果
};
// apply 实现机制与call类似，不再详细注释
Function.prototype.myApply = function (ctx = globalThis) {
  const args = arguments[1];
  const key = Symbol("key");
  ctx[key] = this;
  const res = ctx[key](...args);
  delete ctx[key];
  return res;
};
// bind
Function.prototype.myBind = function (ctx = globalThis) {
  const fn = this; // 将调用myBind的函数暂存为fn
  const args = Array.from(arguments).slice(1);
  function bound() {
    if (this instanceof bound) {
      fn.apply(this, args); // 当bound的调用方是fn的实例时，则使用该实例调用，对应new操作符，改变绑定this的情况,同时该判断条件使后续的多次绑定无效
    } else {
      fn.apply(ctx, args);
    }
  }
  bound.prototype = fn.prototype;
  return bound;
};
// es6的极简实现bind
Function.prototype.fakeBind = function(obj) {
  return (...args) => this.apply(obj, args)
}
// softBind
Function.prototype.mySoftBind = function (ctx = globalThis) {
  const fn = this;
  const args = Array.from(arguments).slice(1);
  function bound() {
    if (!this || this === globalThis) {
      fn.apply(ctx, args); // 仅调用方为undefined/null或全局对象时，使用绑定的值
    } else {
      fn.apply(this, args);
    }
  }
  bound.prototype = fn.prototype;
  return bound;
};

console.log(typeof a) // function 无论变量和函数的顺序，变量提升先处理，函数提升后处理，因此函数覆盖同名变量  
console.log(typeof b) // function  
var a = 1;  
function a() {}  
function b() {}  
var b;  
console.log(a, b) // 提升后a被初始化，因此覆盖了a函数  
console.log(c) // undefined 变量提升但不会先赋值  
var c = 1;  
console.log(d) // [Function: d] 函数提升则可立即调用  
function d() {}  

/**
 * @description: 防抖wrap函数
 * @param {Function} func 传入要包装的函数
 * @param {number} wait 防抖间隔
 * @param {boolean} immediate 可选项是否立即执行
 * @return {undefined}
 */
function debounce(func, wait, immediate=false){
  let timer = null;
  return function(){
    let _self = this;
    let args = arguments;
    if(timer) clearTimeout(timer);
    if(immediate){ // 用于首次/立即执行
      let callNow = !timer;
      timer = setTimeout(()=>timer = null, wait);
      if(callNow) func.apply(_self, args);
    } else { // 延时执行
      timer = setTimeout(()=>func.apply(_self, args), wait);
    }
  }
}
/**
 * @description: 防抖wrap异步支持版本，也支持同步任务
 * @param {} 参数与同步版本类似
 * @return {() => Promise} 返回的执行函数将返回包装好的promise对象，调用then将传入异步函数执行结果
 */
function debounceAsync(fn, delay) {
  let timer = null;
  return function() {
    let _self = this;
    let args = arguments;
    if(timer){
      clearTimeout(timer);
    }
    // 为添加对异步请求接口的支持返回promise对象，此处也可直接设置定时器，下同
    return new Promise((res, rej) => {
      timer = setTimeout(function() {
      // res接收promise对象会等待promise对象状态翻转，再返回promise对象的结果
      res(fn.apply(_self, args));
    }, delay)
    })
  }
}

function throttle(fn, delay, isImmediate = false){
  let flag = true;
  return function(){
    if(flag){
      let _self = this;
      let args = arguments;
      flag = false; // 执行代码，并加锁
      isImmediate && fn.apply(_self, args); // 立即执行时机
      setTimeout(()=>{
        !isImmediate && fn.apply(_self, args); // 延迟执行时机
        flag = true; // 在延迟执行后释放执行锁
      }, delay)
    }
  }
}

/**
 * @description: 节流wrap函数异步版本，返回值与防抖类似,节流也可使用时间戳与间隔时间对比实现
 * 节流也有立即执行和非立即执行的版本，实现思路与防抖类似
 */
function throttleAsync(fn, interval) {
  let timer = null;
  let result;
  return function() {
    let _self = this;
    let args = arguments;
    if(!timer){
      result = new Promise((res, rej) => {
        // 单独拎出executor即为同步执行的版本
        timer = setTimeout(() => {
          res(fn.apply(_self, args));
          timer = null;
        }, interval);
      })
    }else result = undefined;
    return result;
  }
}

console.log(1);  
setTimeout(function () {   
  console.log(2);   
}, 0);  
new Promise(resolve => {  
  console.log(3);  
  resolve();  
  console.log(4);  
}).then(() => {  
  console.log(5);  
})  
console.log(6);  
// 输出为:1 3 4 6 5 2  
// new Promise时传入的匿名函数是同步代码,then中的为回调微任务  
/**
 * 另外后面的手写promise实现章节中可以看出，
 * 使用Promise.resolve方法若参数为Promise对象
 * 则会在内部调用一次then方法，额外产生一次微任务,
 * 同理在then中传入的函数若返回为Promise对象，也会额外调用一次Promise方法产生额外的微任务；
 * 在async/await的手写实现中，对于Promise对象使用await/yield也相当与一次then方法
 */
async function p1() {
  return 3;
}
async function p2() {
  return Promise.resolve(3);
}
async function p3() {
  return await Promise.resolve(3);
}
p3().then((o) => console.log(o, "p3"));
p2().then((o) => console.log(o, "p2"));
p1().then((o) => console.log(o, "p1"));
// Output: p1、p3、p2
// 在同步代码运行完成后，p3,p2都额外提交了一个空的微任务，因此p1优先被打印

Promise.resolve()
  .then(() => {
    console.log(0);
    return Promise.resolve(4);
    // 额外产生了1个空的微任务，但具体底层实现时实际产生了两个微任务，因此延后到了3之后打印
  })
  .then((res) => { console.log(res); });

Promise.resolve()
  .then(() => { console.log(1); })
  .then(() => { console.log(2); })
  .then(() => { console.log(3); });
// 输出为 0,1,2,3,4

function myNew(construct, ...args) {
    const obj = {}; // 1. 创建一个空对象
    obj.__proto__ = construct.prototype; // 2. 将obj的[[prototype]]属性指向构造函数的原型对象
    obj.constructor = construct; // 绑定构造函数属性
    construct.apply(obj, args); // 3.将construct执行的上下文this绑定到obj上，并执行
    return obj;  //4. 返回新创建的对象
}

// 使用的例子：
function Person(name, age){
    this.name = name;
    this.age = age;
}
const person1 = myNew(Person, 'Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}

class MyPromise {
  status = "pending"; // promise状态
  result = null; // 返回结果
  callback = []; // 用于异步任务中缓存回调函数
  constructor(executor){ // 构造函数传入executor执行器
    const _self = this; // 保存对象的this便于在回调函数中使用

    function resolve(data){ // 成功时的状态翻转函数
      if(_self.status !== "pending") return; // 保证状态只能从pending翻转
      _self.status = "fulfilled"; // 翻转状态
      _self.result = data; // 保存回调执行结果
      setTimeout(()=>{ // 用于支持异步回调
        _self.callback.forEach(item => {
          item.onResolved(data); // 取出异步任务中缓存的回调函数并执行
        });
      })
    }

    function reject(err){ // 失败时的状态翻转函数
      if(_self.status !== "pending") return;
      _self.status = "rejected";
      _self.result = err;
      setTimeout(()=>{
        _self.callback.forEach(item => {
          item.onRejected(err);
        })
      })
    }
    try { // 执行器执行，由此看出在new promise时，executor中的同步代码是同步执行的
      executor(resolve, reject);
    } catch (error) {
      reject();
    }
  }
  then(onResolved, onRejected) { // 接受成功和失败时的回调函数
    const _self = this // 同样保存一下this方便使用
    return new MyPromise((res, rej)=>{ // then 返回一个新的promise
      function callback(fn){ // 判断回调函数的返回值是否为promise，若为promise则根据其结果返回，否则直接返回回调函数的调用结果
        try {
          let result = fn(_self.result);
          if(result instanceof MyPromise){
            result.then(r=>{res(r)}, e=>{rej(e)})
          }else {res(result);}
        } catch (err) {
          rej(err)
        }
      }

      if(this.status === "fulfilled"){ // executor中执行同步任务后翻转了状态则直接运行回调
        setTimeout(()=> { // 立即加入宏任务队列中，支持回调异步任务
          callback(onResolved);
        })
      }
      if(this.status === "rejected"){
        setTimeout(()=>{
          callback(onRejected);
        })
      }
      if(this.status === "pending"){ // 当executor中的执行的是异步任务，此时状态为pending，需要将回调函数推入缓存，待到状态翻转时再调用
        this.callback.push({
          onResolved:function() {callback(onResolved);}, 
          onRejected:function() {callback(onRejected);}
        })
      }
    })
  }
  catch(onRejected){ // catch是then的语法糖，仅接收onRejected
    return this.then(undefined, onRejected);
  }
  static resolve(data){ // 绑定在类上的resolve方法，传入promise时，根据其结果返回状态，否则返回成功的且结果为data的新promise对象
    return new MyPromise((res, rej) => {
      if(data instanceof MyPromise){
        data.then(r => {res(r)}, e => {rej(e)})
      }else{
        res(data);
      }
    })
  }
  static reject(err){ // 返回新的promise对象，状态为rejected，结果为err
    return new MyPromise((res, rej)=> {rej(err)})
  }
  
  static all(promises){ // 传入promise数组，当所有promise都成功时返回成功的promise，结果是所有promise成功结果组成的数组，当有一个promise失败时直接返回失败的结果
    return new MyPromise((res,rej) => {
      let count = 0;
      let arr = [];
      for(let i = 0;i < promises.length;i++){
        promises[i].then(
          r=>{
            count++;
            arr[i] = r;
            if(count === promises.length){ // 翻转数量和promise长度相同时，翻转返回新promise对象的状态
              res(arr);
            }
          },
          e=>{rej(e)}
        )
      }
    })
  }
  static race(promises){ // 当第一个promise翻转状态时直接返回相同状态的新promise对象
    return new MyPromise((res, rej) => {
      for(let i = 0; i < promises.length; i++){
        promises[i].then(r=>{res(r)}, e=>{rej(e)})
      }
    })
  }
  static map(promises, concurrency){ // map实现多个promise数组并发控制，最多同时运行concurrency个promise任务
    let curIndex = 0;
    let resolvedCount = 0;
    let result = new Array(promises.length);
    return MyPromise((res, rej) => {
      function next() {
        const index = curIndex;
        curIndex++;
        if(index < promises.length){
          promises[index].then(r =>{result[index] = r},e => {result[index] = e})
          .finally(r => {
            resolvedCount++;
            if(resolvedCount === promises.length){
              res(result);
            }
            next(); //上一个promise任务执行完成后执行下一个next任务
          })
        }
      }
      for(let i = 0; i < concurrency; i++){
        next(); // 控制最多同时运行concurrency个next任务
      }
    })
  }
}

class Demo {
  static asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
    try{
      var info = gen[key](arg); // gen.next(arg) 或 gen.throw(arg)
      var val = info.value;
    }catch(e){
      reject(e);
      return;
    }
    if(info.done){
      resolve(val);
    }else { // 使用promise.resolve的方式能同时支持同步和异步任务val
      Promise.resolve(val).then(_next, _throw);
    }
  }
  static _asyncToGeneratorWrapper(fn) {
    return function() { // 返回包装后的函数
      const self = this;
      const args = arguments;
      return new Promise((resolve, reject) => {
        const gen = fn.apply(self, args);
        function _next(val) { // 执行器中传入_next未完成时自动循环执行
          Demo.asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', val);
        }
        function _throw(e){
          Demo.asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', e);
        }
        _next(undefined); // 启动首次运行
      });
    };
  }
  static test() { // 测试用例
    function testFn(i){
      return new Promise((resolve, reject) => {
        setTimeout(()=> {
          resolve('promise resolve: '+ i);
        }, 1000)
      })
    }
    function* testGen(){
      console.log('start run gen');
      let res1 = yield testFn(1);
      console.log(res1);
      let res2 = yield testFn(2);
      console.log(res2);      
      let res3 = yield testFn(3);
      return res3;
    }
    let runner = Demo._asyncToGeneratorWrapper(testGen);
    runner().then(res => console.log(`end with: ${res}`))
  }
}
Demo.test();

fun1(){
  try {
    setTimeout(() => {
      throw new Error("error");
    })
  } catch (e){
    console.log(e); // 无法捕获错误
  }
}

var a = new Promise((resolve, reject) => {
  setTimeout(() => {
    throw new Error('error') // 同样无法捕获
    // 仍然要在异步任务中进行捕获，并且通过将 promise 状态翻转的将错误传递给返回的promise对象
    // try {
    //   throw new Error('error')
    // } catch (e){
    //   reject(e)
    // }
  })
}) // a is rejected promise
var b = a.then(res => console.log(res), err => {
  console.log(err);
  throw new Error('b throw a new error');
  // throw a error in callback will be wrapped and return rejected promise
  // after throw error blow code will not being run
}) 
// a's error catch by onrejected callback function, but throw new error so b is rejected promise
// promise b must being catch, otherwise the error will throw in global scope
var c = b.catch(e=> console.log(e)); // c is fulfilled promise

async function() {
  console.log('1');
  try {
    let a = await fun1(); // return value of success or undefined
    console.log(a); // code on here like in then onResolved
    // when fun1 return/is rejected promise code on here will not execute
  } catch (e) {
    console.log(e); // code on here like in catch onRejected
  }
}
// recommend catch error code style like go syntax
async function(){
  let [err, res] await fun1().then(v=>[null, v], e=>[e, null])
  if(err){
    // handle error
  }
}