项目初始化

Author: KaiOrange

README.md

@@ -0,0 +1,23 @@
+## handwritten-js-code ##
+
+手写JS代码实现 - JS代码实现的最易记忆写法。
+
+1. [防抖](./src/debounce.md)
+2. [节流](./src/throttle.md)
+3. [数组去重](./src/unique.md)
+4. [数组扁平化](./src/flatten.md)
+5. [深拷贝](./src/deepClone.md)
+6. [函数柯里化](./src/curry.md)
+7. [偏函数](./src/partial.md)
+8. [函数组合](./src/compose.md)
+9. [函数记忆化](./src/memoize.md)
+10. [函数bind实现](./src/bind.md)
+11. [函数call与apply实现](./src/call.md)
+12. [Object.create实现](./src/Object.crteate.md)
+13. [new实现](./src/new.md)
+14. [instanceOf实现](./src/instanceOf.md)
+15. [forOf循环实现](./src/forOf.md)
+16. [trim实现](./src/trim.md)
+17. [Promise实现](./src/promise.md)
+18. [Symbol实现](./src/Symbol.md)
+19. [Set实现](./src/Set.md)

src/Object.crteate.md

@@ -0,0 +1,53 @@
+# Object.crteate实现 #
+
+## 描述 ##
+
+实现一个`create`函数，功能与`Object.crteate`相同。如:
+
+```JavaScript
+let obj = {
+  name: 'Orange',
+  sayName () {
+    console.log(`我是${this.name}`);
+  }
+}
+let man = create(obj);
+man.name = 'AAA';
+obj.sayName(); // 打印 我是Orange
+man.sayName(); // 打印 我是AAA
+```
+
+## 实现 ##
+
+步骤：
+
+1. 判断类型不是object或者function抛出异常；
+2. 定义构造器函数，其原型指向第一个参数，并创建对象；
+3. 如果有第二个参数则使用`Object.defineProperties`定义属性操作符；
+4. 如果第一个参数是null，则修复`obj.__proto__`指向null；
+5. 返回创建的对象。
+
+```JavaScript
+const create = (proto, properties) => {
+  // 不是函数或者对象抛出错误
+  if (![ 'object', 'function' ].includes(typeof proto)) {
+    throw new TypeError(`Object prototype may only be an Object or null: ${proto}`)
+  }
+  // 创建构造函数
+  const Constructor = function () {};
+  // 构造函数的原型指向对象
+  Constructor.prototype = proto;
+  // 创建实例对象
+  const obj = new Constructor();
+  // 支持第二个参数
+  if (properties) {
+    Object.defineProperties(obj, properties);
+  }
+  // 支持空原型
+  if (proto === null) {
+    obj.__proto__ = null;
+  }
+
+  return obj
+}
+```

src/Set.md

@@ -0,0 +1,126 @@
+# Set实现 #
+
+## 描述 ##
+
+定义一个`MySet`类，功能类似于Set。如:
+
+```JavaScript
+let set = new MySet([1, 1, 2, 3, 3]);
+
+set.add(NaN);
+console.log(set.size); // 4
+set.delete(NaN); // 3
+console.log(set.size); // 3
+console.log([...set.keys()]); // [1, 2, 3]
+console.log([...set.values()]); // [1, 2, 3]
+console.log([...set.entries()]); // [[1, 1], [2, 2], [3, 3]]
+set.clear();
+console.log(set.size); // 0
+```
+
+## 实现 ##
+
+思路：
+
+1. 内部使用数组作为容器来存放数据，在调用add的时候，如果数据已经存在于数组中则不添加，否则添加。
+2. 考虑到`NaN`也可以存放在`Set`中需要对`NaN`做特殊处理，可以使用存放的时候Symbol来代替，取值的时候如果是该Symbol返回NaN。
+3. values和keys使用相同的方法，返回迭代器对象。
+
+```JavaScript
+(function(global) {
+  // encodeVal 和 decodeVal是为了处理NaN的问题
+  let NaNSymbol = Symbol('NaN');
+  let encodeVal = function(value) {
+    return value !== value ? NaNSymbol : value;
+  }
+
+  let decodeVal = function(value) {
+    return (value === NaNSymbol) ? NaN : value;
+  }
+
+  let makeIterator = function(array, iterator) {
+    let nextIndex = 0;
+    let obj = {
+      next: function() {
+        return nextIndex < array.length ? { 
+          value: iterator(array[nextIndex++]), 
+          done: false 
+        } : { 
+          value: undefined, 
+          done: true
+        };
+      }
+    };
+
+    obj[Symbol.iterator] = function() {
+      return obj;
+    }
+
+    return obj;
+  }
+
+  class MySet {
+    static length = 0;
+
+    constructor(data) {
+      this._values = [];
+      this.size = 0;
+
+      for(let item of data || []) {
+        this.add(item);
+      }
+
+      this.keys = this.values;
+    }
+
+    add(value) {
+      value = encodeVal(value);
+      if (this._values.indexOf(value) == -1) {
+        this._values.push(value);
+        ++this.size;
+      }
+      return this;
+    }
+
+    has(value) {
+      return (this._values.indexOf(encodeVal(value)) !== -1);
+    }
+
+    delete(value) {
+      var idx = this._values.indexOf(encodeVal(value));
+      if (idx == -1) return false;
+      this._values.splice(idx, 1);
+      --this.size;
+      return true;
+    }
+
+    clear() {
+      this._values = [];
+      this.size = 0;
+    }
+
+    forEach(callbackFn, thisArg) {
+      thisArg = thisArg || global;
+      for(let item of this._values) {
+         callbackFn.call(thisArg, item, item, this);
+      }
+    }
+
+    values() {
+      return makeIterator(this._values, function(value) { return decodeVal(value); });
+    }
+
+    entries() {
+      return makeIterator(this._values, function(value) { return [decodeVal(value), decodeVal(value)]; });
+    }
+
+    [Symbol.iterator]() {
+      return this.values();
+    }
+
+  }
+
+  global.MySet = MySet;
+
+})(this);
+```

src/Symbol.md

@@ -0,0 +1,106 @@
+# Symbol实现 #
+
+## 描述 ##
+
+定义一个`MySymbol`函数，功能类似于Symbol。如:
+
+```JavaScript
+let s1 = MySymbol('foo');
+let s2 = MySymbol('bar');
+console.log(s1 === s2); // 打印 false
+// MySymbol.for与MySymbol.keyFor不可枚举
+let s3 = MySymbol.for('xxx');
+let s4 = MySymbol.for('xxx');
+console.log(s3 === s4); // 打印 true
+let key1 = MySymbol.keyFor(s3);
+console.log(key1); // 打印 xxx
+let obj = {
+  [s1]: 'symbol',
+}
+console.log(obj[s1]); // 打印 symbol
+```
+
+## 实现 ##
+
+步骤：
+
+1. 定义一个MySymbol函数，如果是new的该函数，直接报错；该函数接受一个参数作为Symbol的描述，如果有值则转化为字符串；
+2. MySymbol函数需要创建一个对象并返回，该函数拥有不可修改的属性`__Description__`和`__Name__`分别用来记录描述和名称，对象的toString返回唯一的`__Name__`。
+3. MySymbol函数需要加两个不可枚举的静态方法`for`和`keyFor`用来查找symbol和对应的key。
+
+```JavaScript
+(function() {
+  let root = this;
+
+  // 生成唯一的名称
+  let generateName = (function(){
+    let postfix = 0;
+    return function(descString){
+      postfix++;
+      return '@@' + descString + '_' + postfix;
+    }
+  })()
+
+  let MySymbol = function Symbol(description) {
+    if (this instanceof MySymbol) throw new TypeError('Symbol is not a constructor');
+    let descString = description === undefined ? undefined : String(description);
+    let symbol = Object.create({
+      toString: function() {
+        return this.__Name__;
+      },
+      valueOf: function() {
+        return this;
+      }
+    });
+
+    Object.defineProperties(symbol, {
+      '__Description__': {
+        value: descString,
+        writable: false,
+        enumerable: false,
+        configurable: false
+      },
+      '__Name__': {
+        value: generateName(descString),
+        writable: false,
+        enumerable: false,
+        configurable: false
+      }
+    });
+
+    return symbol;
+  }
+
+  let forMap = {};
+  
+  Object.defineProperties(MySymbol, {
+    'for': {
+      value: function(description) {
+        let descString = description === undefined ? undefined : String(description);
+        return forMap[descString] ? forMap[descString] : forMap[descString] = MySymbol(descString);
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true
+    },
+    'keyFor': {
+      value: function(symbol) {
+        for (var key in forMap) {
+          if (forMap[key] === symbol) return key;
+        }
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true
+    }
+  });
+
+  root.MySymbol = MySymbol;
+})();
+```
+
+> 注意:
+>  
+> 1. `typeof Symbol()`返回的是`symbol`，由于我们无法修改`typeof`操作符，所以这个无法实现；
+> 2. `Symbol('foo').toString()`返回的是字符串的`Symbol(foo)`，为了保证在对象上生成唯一的key我们使用了`generateName`来生成唯一的名称，而不是`Symbol(foo)`。
+> 3. 通过`Symbol('xxx')`创建的Symbol对象，无法通过`Symbol.for('xxx')`找到，我们这里与之相符。

src/bind.md

@@ -0,0 +1,53 @@
+# 函数bind实现 #
+
+## 描述 ##
+
+在函数原型上添加bind2方法，功能与bind相同。如:
+
+```JavaScript
+const sayName = function () {
+  console.log(this.name);
+}
+
+const sayNameBind = sayName.bind2({
+  name: 'Orange',
+});
+sayNameBind();// 打印 Orange
+```
+
+## 实现 ##
+
+### 简单实现 ###
+
+思路：返回一个函数，当这个函数执行的时候，使用bind2第一个参数作为上下文来执行，同时合并bind2剩余参数和返回函数中剩余参数。
+
+```JavaScript
+Function.prototype.bind2 = function (context, ...args) {
+  const self = this;
+
+  return function () {
+    return self.apply(context, [...args, ...arguments]);
+  }
+}
+```
+
+> 上述代码存在问题，如果使用new创建的对象，仍然会绑定context实际上new的优先级比bind高。更完善的代码如下：
+
+```JavaScript
+Function.prototype.bind2 = function (context, ...args) {
+  // bind对非函数会抛出异常
+  if (typeof this !== "function") {
+    throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
+  }
+
+  const self = this;
+  const Parent = function () {};
+  const Son = function () {
+    return self.apply(this instanceof Parent ? this : context, [...args, ...arguments]);
+  }
+
+  Parent.prototype = this.prototype;
+  Son.prototype = new Parent();
+  return Son;
+}
+```