乐趣区

关于javascript:手撕JS可能持续更新

jiezi

  对于实现 js 中一些常见的办法属于面试中的常问问题，可能刚开始接触的时候会束手无策。晓得和了解其中的原理可能在日常开发中更蛟龙得水，面对面试也不成问题。另外，学会以目标（实现的性能）为导向一层一层反推，总结出实现的思路就能依照步骤间接实现或者曲线实现（整顿不易记得 点赞 哈）。

一、call 的实现

  call() 办法：让 call()中的对象调用以后对象所领有的 function。例如：test.call(obj,arg1,arg2,···) 等价于 obj.test(arg1,arg2,···)；在手写实现 call() 办法前咱们先进行剖析，test调用 call 办法能够看作将 test 办法作为 obj 的一个属性 (办法) 调用，等 obj.test() 执行结束后，再从 obj 属性上删除 test 办法：

  • 1、将函数设置为对象的属性；
  • 2、解决传入的参数；
  • 3、执行对象上设置的函数；
  • 4、删除对象上第一步设置的函数；

myCall:

function test(a, b) {console.log(a);
  console.log(b);
  console.log(this.c);
}

let obj = {c: "hello",};

//myCall
Function.prototype.myCall = function () {
  // 申明传入上下文为传入的第一个参数，如果没有传参默认为 global（node 环境），如果是浏览器环境则为 window；let context = arguments[0] || global; 
  // 将调用 myCall 办法函数（this）设置为 申明的传入上下文中的 fn 函数；context.fn = this;
  // 对函数参数进行解决
  var args = [];
  for (let index = 0; index < arguments.length; index++) {index > 0 && args.push(arguments[index]);
  }
  // 执行 fn，也就是调用 myCall 办法的函数
  context.fn(...args);
    // 执行结束后删除传入上下文的 fn，不扭转原来的对象
  delete context.fn;
};

test.myCall(obj, "a", 123);
console.log(obj)

打印的后果：

a
123
hello
{c: 'hello'}

从后果能够看出：test中 this.c 输入为 hello，阐明this 为obj；最初输入的 obj 也没有扭转。

二、apply 的实现

  apply() 办法作用和 call() 齐全一样，只是 apply 的参数第一个为须要指向的对象，第二个参数以数组模式传入。例如：test.apply(obj,[arg1,arg2,···]) 等价于 obj.test(arg1,arg2,···)；

myApply：

//myApply
Function.prototype.myApply = function(){let context = arguments[0] || global;
  context.fn = this;
  var args = arguments.length > 1 ? arguments[1] : [];
  context.fn(...args);
  delete context.fn;
}

test.myApply(obj, ["world", 123]);
console.log(obj)

打印的后果：

world
123
hello
{c: 'hello'}

三、bind 的实现

  bind办法：创立一个新的函数, 当被调用时，将其 this 关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。例如：let fn = test.bind(obj,arg1,arg2,···); fn() 等价于 let fn = obj.test; fn(arg1,arg2,···)；实现思路为：

  • 1、将函数设置为对象的属性；
  • 2、解决传入的参数；
  • 3、返回函数的定义 / 援用；
  • 4、外层执行接管的函数；
  • 5、删除对象上第一步设置的函数；

myBind:

Function.prototype.myBind = function(){
  //1.1、申明传入上下文为传入的第一个参数，如果没有传参默认为 global（node 环境），如果是浏览器环境则为 window；let context = arguments[0] || global;
  //1.2、将调用 myBind 办法函数（this）设置为 申明的传入上下文中的 fn 函数；context.fn = this;
  //2.1、对调用 myBind 的函数参数进行解决
  var args = [];
  for (let index = 0; index < arguments.length; index++) {index > 0 && args.push(arguments[index]);
  }
    //3、申明和定义函数变量 F，用于返回给外层
  let F = function  (){
    //2.2、对再次传入的参数进行解决，追加到
    for (let index = 0; index < arguments.length; index++) {args.push(arguments[index]);
    }
    //4.2、执行理论的调用 myBind 办法函数
    context.fn(...args);
    //5、执行结束后删除传入上下文的 fn，不扭转原来的对象
    delete context.fn;
  }
  return F;
}

var f = test.myBind(obj, "a")
//4.1、执行返回的函数
f(9527);

打印的后果：

a
9527
hello
{c: 'hello'}

四、Promise 的实现

1、剖析 Promise 应用

  MDN 中关 Promise 的定义如下：

“Promise 对象用于示意一个异步操作的最终实现 (或失败)及其后果值。
一个 Promise 对象代表一个在这个 promise 被创立进去时不肯定已知的值。它让您可能把异步操作最终的胜利返回值或者失败起因和相应的处理程序关联起来。这样使得异步办法能够像同步办法那样返回值：异步办法并不会立刻返回最终的值，而是会返回一个 promise，以便在将来某个时候把值交给使用者。
“
  “
一个 Promise 必然处于以下几种状态之一：
“
    “
待定（pending）: 初始状态，既没有被兑现，也没有被回绝。
“
    “
已兑现（fulfilled）: 意味着操作胜利实现。
“
    “
已回绝（rejected）: 意味着操作失败。
“
  “
待定状态的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个起因（谬误）被回绝（rejected）。当这些状况之一产生时，咱们用 promise 的 then 办法排列起来的相干处理程序就会被调用。如果 promise 在一个相应的处理程序被绑定时就曾经被兑现或被回绝了，那么这个处理程序就会被调用，因而在实现异步操作和绑定解决办法之间不会存在竞争状态
“

new Promise((resolve, reject) => {
  // 异步操作
  //···
  // 执行完后调用 resolve 和 reject 输入两种不同后果
  if (true) {resolve("res");
  } else {reject("err");
  }
})
  .then((res) => { //then 承受 resolve 中的后果
    console.log(res);
  })
  .catch((err) => { //catch 承受 reject 中的后果
    console.log(err);
  });

Promise 的应用分为三步：

  • 1、新建 Promise 实例，即通过 new 实现，同时承受一个函数参数，函数参数中承受 resolve 和 reject 两个形参(本质上也是函数)；
  • 2、新建的 Promise 实例承受的函数参数中就是要执行的异步代码，并且用 resolve 和 reject 对异步后果进行调用输入；
  • 3、新建的 Promise 实例能够调用 then 和 catch 办法对异步后果进行承受和解决；

上述新建实例代码能够转化为：

function fn(resolve, reject) {
  // 异步操作
  //···
  // 执行完后调用 resolve 和 reject 输入两种不同后果
  if (true) {resolve("res");
  } else {reject("err");
  }
}

let p = new Promise(fn);

p.then((res) => { //then 承受 resolve 中的后果
    console.log(res);
  })
  
p.catch((err) => { //catch 承受 reject 中的后果
    console.log(err);
  });

  上述中的使用者就是 then 和 catch，联合代码中的应用形式， 简略来说就是 Promise 中执行异步操作，then 和 catch 只会在异步执行完后才会接到返回后果继续执行！

2、手撕 Promise

  理解了 Promise 的定义和应用步骤后，接下来间接手撕 Promise 的实现，间接上实现 Promise 的代码（外延大量正文，根本一句一解释，然而逻辑还是得第三局部来讲）：

// 定义 promise 中的三种状态
const STATUS_PENDING = "pending";
const STATUS_FULFILLED = "fulfilled";
const STATUS_REJECTED = "rejected";

// 定义 promise 的类
class myPromise {
  //class 的构造函数，承受新建实例时的参数:executor 在 promise 中是一个函数
  constructor(executor) {
    // 初始化该 class 中的初始状态
    this.status = STATUS_PENDING;
    // 定义 class 中胜利（res）和失败（err）时的变量值
    this.res = "";
    this.err = "";

    //promis 异步中最重要的异步，定义胜利和谬误函数存储的数组，寄存异步时还没有执行的操作
    this.onResCallbacks = [];
    this.onErrCallbacks = [];

    // 定义该构造函数 constructor 定义域中的变量 resolve
    let resolve = (res) => {
      // 首先判断该 class 中的状态，只有状态为 pending 时能力转化 class 转态为 fulfilled 或者 rejected
      if (this.status === STATUS_PENDING) {
        // 批改 class 的转态为 fulfilled，也就示意不会转进行其余转态的转化了
        this.status = STATUS_FULFILLED;
        // 将胜利（resolve）状态下的值赋给 class 的胜利返回 res
        this.res = res;
        // 此时状态由 pending 转为 fulfilled，执行之前在 then 中寄存的须要执行的异步操作，promise 的 then 中参数 res 承受后果
        this.onResCallbacks.forEach((fn) => {fn();
        });
      }
    };

    // 定义该构造函数 constructor 定义域中的变量 reject
    let reject = (err) => {
      // 首先判断该 class 中的状态，只有状态为 pending 时能力转化 class 转态为 fulfilled 或者 rejected
      if (this.status === STATUS_PENDING) {
        // 批改 class 的转态为 rejected，也就示意不会转进行其余转态的转化了
        this.status = STATUS_REJECTED;
        // 将失败（reject）状态下的值赋给 class 的失败返回 err
        this.err = err;
        // 此时状态由 pending 转为 rejected，执行之前在 catch 中寄存的须要执行的异步操作，promise 的 catch 中参数 err 承受后果
        this.onErrCallbacks.forEach((fn) => {fn();
        });
      }
    };

    // 依照 promise 中的逻辑，在调用时就立刻执行了，所以在手写的 myPromise 创立构造函数 constructor 时就执行 executor
    try {
      // 执行参入的函数，并将上述定义的 resolve 和 reject 作为参数传入
      executor(resolve, reject);
    } catch (err) {
      // 报错时调用失败的状态函数
      reject(err);
    }
  }
  
  // 在 class 中定义 promise 的胜利状态接管函数 then, 依照 promise 逻辑，then 中传入的个别都是一个函数
  then(onRes = () => {}) {
    // 如果是异步的，此时在 constructor 中 status 的状态还没变成 fulfilled，所以会跳过 onRes 调用，没有返回
    if (this.status === STATUS_FULFILLED) {onRes(this.res);
    }
    // 然而咱们将此时的异步放入数组寄存
    if (this.status === STATUS_PENDING) {this.onResCallbacks.push(() => onRes(this.res));
    }
    // 这步操作保障了 then 和 catch 可能在同级一起 "." 调起，当 then 上述操作完后，返回 class 实例，便能够接在前面持续调用 catch
    return this;
  }

  // 在 class 中定义 promise 的失败状态接管函数 catch, 依照 promise 逻辑，catch 中传入的个别都是一个函数
  catch(onErr = () => {}) {
    // 如果是异步的，此时在 constructor 中 status 的状态还没变成 rejected，所以会跳过 onErr 调用，没有返回
    if (this.status === STATUS_REJECTED) {onErr(this.err);
    }
    // 然而咱们将此时的异步放入数组寄存
    if (this.status === STATUS_PENDING) {this.onErrCallbacks.push(() => onErr(this.err));
    }
     // 这步操作保障了 then 和 catch 可能在同级一起 "." 调起，当 catch 上述操作完后，返回 class 实例，便能够接在前面持续调用 then
    return this;
  }
}

// 调用本人手写的 promise
new myPromise((resolve, reject) => {console.log("进入了手写的 promise");
  // 用 setTimeOut 模仿异步操作
  setTimeout(() => {if (false) {resolve("输入胜利后果 resolve");
    } else {reject("输入失败后果 reject");
    }
  }, 2000); // 依照 js 的个性，此时不会期待异步实现，间接调用 then 或者 catch
})
  .then((res) => {console.log("then:", res);
  })
  .catch((err) => { //return this 具体作用体现在这里
    console.log("catch:", err);
  });

退出移动版