1. 手写 Object.create（原型式继承）

传入现有的对象来创键新对象的 __proto__

  1. function create(obj) {
  2.   function F() {}
  3.   F.prototype = obj
  4.   return new F()
  5. }

2. 手写 instanceof

instanceof：判断 a 是否由 B 实现的。

  1. 获取对象的原型 proto
  2. 获取类的原型 prototype
  3. 如果两者想等返回 true；如果对象的原型为 null 返回 false；否则一直获取对象的原型
  1. function instanceOf(left, right) {
  2.   let proto = Object.getPrototypeOf(left)
  3.   const prototype = right.prototype
  4.   while (true) {
  5.     if (!proto) return false
  6.     if (proto === prototype) return true
  7.     proto = Object.getPrototypeOf(proto)
  8.   }
  9. }

3. 手写 new 操作符

要实现 new 关键字，首先要搞懂 new Constructor() 时都发生了什么。 从结果来看，new 关键字的作用是创建了一个新对象，并且这个新对象和构造函数在一条原型链上。此外，对象的属性值是构造函数的参数。 根据上述描述，得到如下代码：

  1. // 1. 创建新对象
  2. const obj = {}
  4. // 2. 将新对象和构造函数绑到一条原型链上
  5. obj.__proto = fn.prototype
  7. // 当然，步骤 1 和 2 也可以合并为一步操作：
  8. const obj = Object.create(fn.prototype)
  10. // 3. 对象的属性值是构造函数的参数
  11. // 假设 fn 是构造函数， 那么构造函数 fn 一定有绑定 this 的操作, 即 this.a = a 
  12. // 因此我们通过 bind 或 apply 来绑定属性, 并将 this 指向 obj
  13. const ret = fn.apply(obj, arguments)
  15. // 4. 考虑到构造函数可能会有返回值，可能为this，也可能返回其他值，所以这里一定不能用 ret 作为返回值！！网上的答案这里都是错的。
  17. return obj
  1. function myNew() {
  2.     // 利用 shift 得到 fn
  3.     const fn = [].shift.call(arguments)
  4.     const obj = {}
  5.     obj.__proto__ == fn.prototype
  6.     fn.apply(obj, arguments)
  7.     return obj
  8. }

4. 手写 typeof

typeof 的实现原理比较简单，主要是利用 Object.prototype.toString.call() 。 该方法会任意类型的数据转换成对象，并利用 toString 方法打印字符串。

  1. function typeOf(obj) {
  2.     return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
  3. }
  1. function getType(value) {
  2.   // 判断数据是 null 的情况
  3.   if (value === null) {
  4.     return value + "";
  5.   }
  6.   // 判断数据是引用类型的情况
  7.   if (typeof value === "object") {
  8.     let valueClass = Object.prototype.toString.call(value),
  9.       type = valueClass.split(" ")[1].split("");
  10.     type.pop();
  11.     return type.join("").toLowerCase();
  12.   } else {
  13.     // 判断数据是基本数据类型的情况和函数的情况
  14.     return typeof value;
  15.   }
  16. }

6. 手写 call

call 函数的实现步骤：

  1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  2. 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
  3. 处理传入的参数，截取第一个参数后的所有参数。
  4. 将函数作为上下文对象的一个属性。
  5. 使用上下文对象来调用这个方法，并保存返回结果。
  6. 删除刚才新增的属性。
  7. 返回结果。
  1. // call函数实现
  2. Function.prototype.myCall = function(context) {
  3.   // 判断调用对象
  4.   if (typeof this !== "function") {
  5.     console.error("type error");
  6.   }
  7.   // 获取参数
  8.   let args = [...arguments].slice(1),
  9.       result = null;
  10.   // 判断 context 是否传入，如果未传入则设置为 window
  11.   context = context || window;
  12.   // 将调用函数设为对象的方法
  13.   context.fn = this;
  14.   // 调用函数
  15.   result = context.fn(...args);
  16.   // 将属性删除
  17.   delete context.fn;
  18.   return result;
  19. };

7. 手写 apply

apply 函数的实现步骤：

  1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  2. 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
  3. 将函数作为上下文对象的一个属性。
  4. 判断参数值是否传入
  5. 使用上下文对象来调用这个方法，并保存返回结果。
  6. 删除刚才新增的属性
  7. 返回结果
  1. // apply 函数实现
  2. Function.prototype.myApply = function(context) {
  3.   // 判断调用对象是否为函数
  4.   if (typeof this !== "function") {
  5.     throw new TypeError("Error");
  6.   }
  7.   let result = null;
  8.   // 判断 context 是否存在，如果未传入则为 window
  9.   context = context || window;
  10.   // 将函数设为对象的方法
  11.   context.fn = this;
  12.   // 调用方法
  13.   if (arguments[1]) {
  14.     result = context.fn(...arguments[1]);
  15.   } else {
  16.     result = context.fn();
  17.   }
  18.   // 将属性删除
  19.   delete context.fn;
  20.   return result;
  21. };

8. 手写 bind

bind 函数的实现步骤：

  1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  2. 保存当前函数的引用，获取其余传入参数值。
  3. 创建一个函数返回
  4. 函数内部使用 apply 来绑定函数调用，需要判断函数作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象。
  1. // bind 函数实现
  2. Function.prototype.myBind = function(context) {
  3.   // 判断调用对象是否为函数
  4.   if (typeof this !== "function") {
  5.     throw new TypeError("Error");
  6.   }
  7.   // 获取参数
  8.   var args = [...arguments].slice(1),
  9.       fn = this;
  10.   return function Fn() {
  11.     // 根据调用方式，传入不同绑定值
  12.     return fn.apply(
  13.       this instanceof Fn ? this : context,
  14.       args.concat(...arguments)
  15.     );
  16.   };
  17. };

9. 手写 Object.assign

  1. Object.myAssign = function(target, ...source) {
  2.     if (target == null) {
  3.         throw new TypeError('Cannot convert undefined or null to object')
  4.     }
  5.     let ret = Object(target) 
  6.     source.forEach(function(obj) {
  7.         if (obj != null) {
  8.             for (let key in obj) {
  9.                 if (obj.hasOwnProperty(key)) {
  10.                     ret[key] = obj[key]
  11.                 }
  12.             }
  13.         }
  14.     })
  15.     return ret
  16. }

10. 手写柯里化

  1. function curry(fn, args) {
  2.   // 获取函数需要的参数长度
  3.   let length = fn.length;
  5.   args = args || [];
  7.   return function() {
  8.     let subArgs = args.slice(0);
  10.     // 拼接得到现有的所有参数
  11.     for (let i = 0; i < arguments.length; i++) {
  12.       subArgs.push(arguments[i]);
  13.     }
  15.     // 判断参数的长度是否已经满足函数所需参数的长度
  16.     if (subArgs.length >= length) {
  17.       // 如果满足，执行函数
  18.       return fn.apply(this, subArgs);
  19.     } else {
  20.       // 如果不满足，递归返回科里化的函数，等待参数的传入
  21.       return curry.call(this, fn, subArgs);
  22.     }
  23.   };
  24. }
  26. // es6 实现
  27. function curry(fn, ...args) {
  28.   return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);
  29. }