# 面试题记录

// 解释一下什么意思
function sum(a, b) {
  return a + b;
}
function len(str) {
  return str.length;
}
function addCurrency(val) {
  return "￥" + val;
}

// 想要得到最终结果需要 如下调用， 面向切片编程 保证函数功能的单一性，但是由于数量不定，写起来很麻烦了，也不方便阅读
let result = addCurrency(len(sum("asdf", "hjkl")));
console.log(result);

function compose(...args) {
  return function(...values) {
    let lastFn = args.pop()(...values);
    return args.reduceRight((prev, current) => {
      return current(prev);
    }, lastFn);
  };
}
// 上面函数改为箭头函数的极简写法
const compose = (...args) => (...values) =>
  args.reduceRight((prev, current) => current(prev), args.pop()(...values));

let resultCompose = compose(addCurrency, len, sum)("asdf", "hjkl");
console.log(resultCompose);

// 上面方法还可以再换一种方法实现 跟redux源码一样的实现方式 https://github.com/reduxjs/redux/blob/master/src/compose.ts
function compose(...args) {
  return args.reduce((prev, current) => {
    return function(...values) {
      // return len(sum(...values)) 替换一下就是下面的了 当然了 如果是三层的话 就想第一次循环返回的是一个函数 函数里面返回的是prev(current(...values))
      return prev(current(...values));
    };
  });
}
// 换成箭头函数的极简写法
const compose = (...args) =>
  args.reduce((prev, current) => (...values) => prev(current(...values)));

let resultCompose = compose(addCurrency, len, sum)("asdf", "hjkl");
console.log(resultCompose);

let fs = require("fs");

let templateStr = fs.readFileSync("./template1.html", "utf8");

// console.log(templateStr);

const render = (template, obj) => {
  return template.replace(/\{\{(.+?)\}\}/g, function() {
    return obj[arguments[1]];
  });
};
let obj = { name: "Feely", age: "forever 18" };
let r = render(templateStr, obj);
console.log(r);

// 模板引擎的实现原理 1）with 语法 2）new Function
let templateStr2 = fs.readFileSync("./template2.html", "utf8");
function render2(template, obj) {
  let head = 'let str = "";\r\n';
  head += "with(xxx){\r\n";
  let content = "str += `";
  template = template.replace(/\{\{(.+?)\}\}/g, function() {
    return "${" + arguments[1] + "}";
  });
  content += template.replace(/\<\%(.+?)\%\>/g, function() {
    return "`\r\n" + arguments[1] + "\r\nstr+=`";
  });
  let tail = "`\r\n}\r\nreturn str";
  let fn = new Function("xxx", head + content + tail);
  console.log(fn.toString());
  return fn(obj);
}
let r2 = render2(templateStr2, { arr: [1, 2, 3] });
console.log(r2);

setTimeout(() => {
  console.log("timeout 1");
  Promise.resolve().then(() => {
    console.log("then 1");
  });
});
setTimeout(() => {
  console.log("timeout 2");
});
Promise.resolve().then(() => {
  console.log("then 2");
});
Promise.resolve().then(() => {
  console.log("then 3");
});

/*
 *  分析：
 *    1.先执行主栈 setTimeout => 回调放入宏任务队列、Promise.then()放入微任务队列 主栈执行完毕
 *    2.清空微任务队列 => 按顺序执行两个Promise.then() => 打印then 2 , 打印then 3
 *    3.将宏任务队列第一个放入主栈执行 => 打印timeout 1, 将promise.then放入微任务队列
 *    4.清空微任务队列 => 执行Promise.then() => 打印then 1
 *    5.将宏任务队列第二个放入主栈执行 => 打印timeout 2
 */

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(function() {
  console.log("setTimeout");
}, 0);
async1();
new Promise(function(resolve) {
  console.log("promise1");
  resolve();
}).then(function() {
  console.log("promise2");
});
console.log("script end");

/*
 *  分析：
 *    1.先执行主栈 前两个都是函数 未调用 所以先打印 script start
 *    2.setTimeout 执行将回调放入宏任务队列
 *    3.调用async1 会直接打印asynv1 start
 *    4.await async2 在浏览器中相当于 Promise.resolve(async2()).then(()={...后续代码}) 所以先打印async2 然后then 放入微任务队列
 *    5.new Promise 回调立即执行 打印 promise1 then方法放入微任务队列
 *    6.打印 script end 主栈执行完毕 清空微任务 按照队列特点先进先出 所以 先打印async1 end 然后打印 promise2 （如果是node环境执行的话 先打印prmise2 再打印async1 end 因为await相当于两层then方法）
 *    7.清空宏任务队列 打印 setTimeout
 */

// 实现Storage，使得该对象为单例，基于 localStorage 进行封装。实现方法 setItem(key,value) 和 getItem(key)。
// “基本思路”部分——getInstance方法和instance这个变量。
// 实现：静态方法版
class Storage {
  static getInstance() {
    if (!Storage.instance) {
      Storage.instance = new Storage();
    }
    return Storage.instance;
  }
  getItem(key) {
    return localStorage.getItem(key);
  }
  setItem(key, value) {
    return localStorage.setItem(key, value);
  }
}

const storage1 = Storage.getInstance();
const storage2 = Storage.getInstance();

storage1.setItem("name", "九儿");
// 李雷
storage1.getItem("name");
// 也是李雷
storage2.getItem("name");
// 返回true
storage1 === storage2;

// 实现闭包版本
function StoragecClosure() {}
Storage.prototype.getItem = function(key) {
  return localStorage.getItem(key);
};
Storage.prototype.setItem = function(key, value) {
  return localStorage.setItem(key, value);
};

const Storage = (function() {
  let instance = null;
  return function() {
    if (!instance) {
      instance = new StoragecClosure();
    }
    return instance;
  };
})();

// 这里其实不用 new Storage 的形式调用，直接 Storage() 也会有一样的效果
const storage1 = new Storage();
const storage2 = new Storage();

storage1.setItem("name", "李雷");
// 李雷
storage1.getItem("name");
// 也是李雷
storage2.getItem("name");

// 返回true
storage1 === storage2;

// 靠谱的深拷贝，递归拷贝
// 想要实现递归拷贝首先得判断数据类型 那么如何判断类型
// 1） typeof  无法区分 Array 和 Object
// 2)  Object.prototype.toString().call()  无法判断是谁的实例
// 3)  instanceof 可以判断类型，可以判断是谁的实例
// 4) constructor 构造函数

// 下面有注解为什么要用map / WeakMap
const deepClone = (value, hash = new WeakMap()) => {
  // 排除 null 和 undefined
  if (value == null) return value;
  if (typeof value !== "object") return value; // 包含了函数类型
  if (value instanceof RegExp) return new RegExp(value); // 如果是正则 返回一个新的正则
  if (value instanceof Date) return new Date(value); // 如果是日期 返回一个新的日期
  // .....特殊的要求继续判断
  // 拷贝的可能是一个对象 或者是一个数组 既能循环数组 又能 循环对象 => for in 循环
  let instance = new value.constructor(); // 根据当前属性构建一个新的实例
  if (hash.has(value)) {
    return hash.get(value);
  }
  hash.set(value, instance);
  // console.log(instance);
  for (let key in value) {
    // 过滤掉原型链上的属性，如果是实例上的属性 再拷贝
    if (value.hasOwnProperty(key)) {
      // 将hash 继续向下传递 保证这次拷贝能拿到以前的拷贝结果
      instance[key] = deepClone(value[key], hash);
    }
  }
  return instance;
};
let cloneInfo = deepClone(info2);
cloneInfo.detail.face = "无敌炸天帅";
console.log(cloneInfo);
console.log(info2);

// 注解示例 为什么要用 map / WeakMap
// 用WeakMap代替Map是为了防止内存泄漏
// 如果不使用map/WeakMap 则下面的这个示例会陷入死循环不能自拔 用map做相对简单点不然要每次存一下对象 然后传到下一次里面 然后在判断是否有重复 跟现在的逻辑是一样的 但是实现起来相对麻烦很多
let objExample = { a: 1 };
objExample.b = objExample;
console.log(deepClone(objExample));

function EventEmitter() {
  // 用Object.create(null)创建空对象的方式与直接字面量方式{}的区别是：{}这种方式会有__proto__上面有很多属性
  this._events = Object.create(null);
}

EventEmitter.prototype.on = function(eventName, callback) {
  // (this._events[eventName] || []).push(callback)
  // 如果实例上没有_events属性就添加上一个，指例子中的Myevents的情况 => 此时的this是Myevents的实例 而非 EventEmitter的实例 所以this上没有 _events
  if (!this._events) this._events = Object.create(null);
  // 如果当前的订阅不是newListener就执行 newListener的回调 并传递当前的事件名 用这种方式实现 监控on事件的触发
  if (eventName !== "newListener") {
    this.emit("newListener", eventName);
  }
  // 向对应事件的数组中添加callback
  if (this._events[eventName]) {
    this._events[eventName].push(callback);
  } else {
    this._events[eventName] = [callback];
  }
};

EventEmitter.prototype.emit = function(eventName, ...args) {
  if (this._events[eventName]) {
    this._events[eventName].forEach((fn) => {
      fn(...args);
    });
  }
};

EventEmitter.prototype.once = function(eventName, callback) {
  // 用one代替callback 在执行了callback之后 删除callback 由此实现了只执行一次
  let one = () => {
    callback();
    this.off(eventName, one); // 下面on的是one所以这里off的应该也是one
  };
  // 如果手动off了 那么传入off的callback跟one肯定是不相等的 所以将callback赋值给one的自定义属性，用于在off中判断
  one.l = callback;
  this.on(eventName, one);
};
EventEmitter.prototype.off = function(eventName, callback) {
  if (this._events[eventName]) {
    this._events[eventName] = this._events[eventName].filter((fn) => {
      // 返回false的会被过滤掉
      return fn !== callback && fn.l !== callback;
    });
  }
};
module.exports = EventEmitter;