feat: 🎸 add js base

src/20190105-react/README.md

@@ -1,4 +1,4 @@
-# React生态
+# React 生态
 
 ## 目录
 
@@ -9,7 +9,7 @@
 - [Hooks](#Hooks)
 - [Saga](#Saga)
 - [dva](#dva)
-- [umi]{#umi}
+- [umi](#umi)
 
 ## Basic
 
@@ -37,28 +37,31 @@
 
 ## Hooks
 
-为什么需要hooks
-- 想在函数式组件中使用state等
+为什么需要 hooks
+
+- 想在函数式组件中使用 state 等
 
 类组件存在几个缺点
+
 - 性能差。因为是是类，有实例，需要保存在内存中，但函数式组件用完直接销毁。
 - 高阶组件复用性差。
 - 生命周期就像是黑盒子，管理起来麻烦。
 
-hooks顺序非常重要，不能在if/for中使用。因为hooks内部实现为了能多个使用，使用链表实现，如果用了if顺序可能会混乱。
-> 使用链表的好处：更适合插入操作(时间复杂度为O(1))，但数组插入的平均复杂度为O(n)。
+hooks 顺序非常重要，不能在 if/for 中使用。因为 hooks 内部实现为了能多个使用，使用链表实现，如果用了 if 顺序可能会混乱。
+
+> 使用链表的好处：更适合插入操作(时间复杂度为 O(1))，但数组插入的平均复杂度为 O(n)。
 
 ### useState
 
 内部其实也是根据`useReducer`实现的。
 
 ### useReducer
 
-感觉可取代redux
+感觉可取代 redux
 
 ### useEffect
 
-替代类组件中**didMount/willUpdate/willUnMount**这些生命周期里写一些副作用的功能（定时器、操作dom、订阅）
+替代类组件中**didMount/willUpdate/willUnMount**这些生命周期里写一些副作用的功能（定时器、操作 dom、订阅）
 
 ## Saga
 
@@ -72,4 +75,4 @@ hooks顺序非常重要，不能在if/for中使用。因为hooks内部实现为
 
 `umi-request`和`fetch/axios`的对比
 
-umi封装的很nice啊。`缓存/错误处理/前缀/后缀/中间件`。一定要看源码实现。
+umi 封装的很 nice 啊。`缓存/错误处理/前缀/后缀/中间件`。一定要看源码实现。

tree/JS/base.js

@@ -0,0 +1,169 @@
+/**
+ * @desc call apply bind
+ */
+// 将function 的 this 指向 context，并将 args 传给 context
+Function.prototype.myCall = function(context, ...args) {
+  const fn = Symbol();
+  context[fn] = this;
+  const ret = context[fn](...args);
+  delete context[fn];
+  return ret;
+};
+
+function A(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+function B(name, age, city) {
+  // A.call(this, name, age);
+  A.myCall(this, name, age);
+  this.city = city;
+}
+
+console.log(new B("careteen", 28, "Zunyi").name);
+
+/**
+ * @desc bind 实现
+ * @knowledge 柯里化 create this
+ */
+// Function.prototype.bind = function(context = global, ...outerArgs) {
+//   const _this = this;
+//   return function(...innerArgs) {
+//     return _this.apply(context, [...outerArgs, ...innerArgs]);
+//   };
+// };
+
+// function sum(...args) {
+//   return this.prefix + args.reduce((memo, cur) => memo + cur, 0);
+// }
+// const bindSum = sum.bind({ prefix: "$" }, 1, 2, 3);
+// console.log(bindSum(4, 5));
+
+Function.prototype.bind = function(context = global, ...outerArgs) {
+  const thatFunc = this;
+  Object.create = function(proto) {
+    function F() {}
+    F.prototype = proto;
+    return new F();
+  };
+  function fBound(...innerArgs) {
+    return thatFunc.apply(this instanceof thatFunc ? this : context, [
+      ...outerArgs,
+      ...innerArgs,
+    ]);
+  }
+  // fBound.prototype = thatFunc.prototype; // 不直接复制的原因是不能污染 thatFunc 的原型
+  fBound.prototype = Object.create(thatFunc.prototype);
+  return fBound;
+};
+function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+Point.prototype.toString = function() {
+  return `${this.x},${this.y}`;
+};
+const YAxis = Point.bind(null, 1);
+const axis = new YAxis(2);
+console.log(axis.toString());
+console.log(axis instanceof Point);
+console.log(axis instanceof YAxis);
+
+/**
+ * @desc 实现访问对象里属性的值
+ */
+let obj = { a: 1, b: { c: 2 }, d: [1, 2, 3], e: [{ f: [4, 5, 6] }] };
+let r1 = parse(obj, "a"); // = 1;
+let r2 = parse(obj, "b.c"); // = 2;
+let r3 = parse(obj, "d[2]"); // = 3;
+let r4 = parse(obj, "e.0.f[1]"); // = 4;
+console.log(r1, r2, r3, r4);
+
+function parse(obj, str) {
+  const attr = str.replace(/\[(\d+)\]/g, ".$1").split(".");
+  let ret = obj;
+  attr.forEach((item) => {
+    ret = ret[item];
+  });
+  return ret;
+}
+
+function parse(obj, str) {
+  return new Function("obj", "return obj." + str.replace(/\.(\d+)/g, "[$1]"))(
+    obj
+  );
+}
+
+/**
+ * @desc 数组扁平化
+ */
+let arr = [[1], [2, 3], [4, 5, 6, [7, 8, [9, 10, [11]]]], 12];
+Array.prototype.myFlat = function(depth = 1) {
+  const result = [];
+  function _flat(array, _depth = 0) {
+    for (let i = 0; i < array.length; i++) {
+      const element = array[i];
+      if (Array.isArray(element)) {
+        if (_depth <= depth) {
+          _depth = _depth + 1;
+          _flat(element, _depth);
+        } else {
+          result.push(element);
+        }
+      } else {
+        result.push(element);
+      }
+    }
+  }
+  _flat(this);
+  return result;
+};
+console.log(arr.myFlat(3));
+console.log(arr.flat(Infinity));
+function myFlat(list) {
+  while (list.some((item) => Array.isArray(item))) {
+    list = [].concat(...list);
+  }
+  return list;
+}
+console.log(myFlat(arr));
+
+/**
+ * @desc 不可变对象，本质是修改属性的 descriptor
+ * 不可扩展：不可增
+ * 密封: 不可增删
+ * 冻结: 不可增删改
+ */
+Object.preventExtensions({});
+Object.seal({});
+Object.freeze({});
+Object.defineProperty({}, "a", {
+  writable: true,
+  configurable: true,
+  enumerable: true,
+});
+
+/**
+ * @desc 柯里化
+ * @knowledge 函数柯里化就是把接受多个传参的函数变换成接受一个单一参数的函数，并且返回接受剩余参数返回结果的技术
+ */
+function add(...args) {
+  var _add = add.bind(null, ...args);
+  _add.toString = function() {
+    return args.reduce((memo, cur) => memo + cur, 0);
+  };
+  return _add;
+}
+function curry(fn, ...args) {
+  return args.length < fn.length
+    ? (...extraArgs) => curry(fn, ...args, ...extraArgs)
+    : fn(...args);
+}
+function addFn(a, b, c, d, e) {
+  return a + b + c + d + e;
+}
+let add = curry(addFn);
+console.log(add(1, 2, 3, 4, 5)); //15
+console.log(add(1)(2, 3)(4, 5)); //15
+console.log(add(1)(2)(3)(4)(5)); //15