携手创造，共同生长！这是我参与「日新方案 8 月更文应战」的第1天，点击查看活动详情

手写call，apply，bind，new

引言

  • 时隔一年，再次手写这些单调而又无聊的api。让我有了新领悟。为什么要将这些api放在一同呢? 因为他们都和this有着密不可分的关系。众所周知，this实际上是在函数被调用时产生的绑定，他的指向彻底取决于函数在哪里被调用(被调用的时履行上下文)。关于this的具体介绍，请看这篇文章
  • 那这就出现一个问题，假如不想遵循this的绑定规则，要怎样做呢? 能够使用call，apply，bind。来强行绑定this。
  • this也和new 有很大的关联。可是我想从结构函数和工厂函数做对比，来引出new中的this。

call的特色

  • 能够改动咱们当时函数this指向

  • 还会让当时函数履行

  • 承受的是一个参数列表

手写call

Function.prototype._call = function (ctx, ...args) {
    let fn = Symbol();
    let context = ctx ? Object(ctx) : window;
    context.fn = this;
    let res = args.length ? context.fn(...args) : context.fn(); // 判别是否传参
    delete context.fn;
    return res;
  };
  let obj2 = {
    a: 2,
  };
  let obj1 = {
    a: 1,
    getName: function (b, c) {
      console.log(this.a);
      console.log(b);
      console.log(c);
      return this.a + b + c;
    },
  };
  console.log(obj1.getName._call(obj2, 3, 4)); // 9

思路讲解

  • 依据call的特色，便是改动this指向，而且让当时函数履行。
  • 依据传入的上下文(假如传入的是根本数据类型,而且是真值,就用目标包装一下，不然，传入的便是默许履行window)，让其拥有特色，让这个特色去履行。 ctx ? Object(ctx) : window
  • 改动this指向： 将当时的this赋值给传入的上下文 context.fn = this;
  • 让当时函数履行(需要判别是否传参) args.length ? context.fn(...args) : context.fn()
  • 将当时函数履行的成果回来 return res
  • 删除咱们结构的假履行的函数： delete context.fn

apply的特色

  • 能够改动咱们当时函数this指向
  • 还会让当时函数履行
  • 承受的是一个数组（或一个类数组目标）

那手写apply，只需判别传入参数，是否是数组即可。其余跟call完成一样

手写apply

  Function.prototype._apply = function (ctx, args = []) {
    if (!Array.isArray(args)) {
      throw new Error('apply need Array');
    }  
    let fn = Symbol();
    let context = ctx ? Object(ctx) : window;
    context.fn = this;
    let res = args.length ? context.fn(...args) : context.fn();
    delete context.fn;
    return res;
  };
  let obj2 = {
    a: 2,
  };
  let obj1 = {
    a: 1,
    getName: function (b, c) {
      console.log(this.a);
      console.log(b);
      console.log(c);
      return this.a + b + c;
    },
  };
  console.log(obj1.getName._apply(obj2, [3, 4])); // 9

思路讲解

  • 和call根本一直，便是要注意apply承受的是一个数组（或一个类数组目标）
  • 避免无参数，给一个默许参数类型是数组，args = []
  • 假如对错数组，则抛出错误 throw new Error

bind的特色

  • bind办法能够绑定this指向

  • bind办法回来一个绑定后的函数，(高阶函数)

  • 假如绑定的函数被new了，当时函数的this，便是当时的实例

手写bind

Function.prototype._bind = function (ctx, ...bindArgs) {
    let that = this;
    return function () {
      return that.apply(ctx, bindArgs);
    };
  };
  let obj1 = {
    age: '2',
  };
  let obj2 = {
    age: '88',
    getInfo: function (name) {
      return `${name} 本年${this.age} 岁`;
    },
  };
  let p = obj2.getInfo._bind(obj1, '小明');
  console.log('p', p());

思路讲解

  • bind() 办法创立一个新的函数所以要return 一个 function，等待调用时履行.里边回来了一个函数，便是高阶函数的用法
  • 为了获取原始函数的this，在内部使用了一个变量that来保存，用到了闭包。其实还能够用箭头函数 let that = this;

关于bind的其他考量

  • 由于bind只是改动this指向，并不履行。这就给函数调用增加了一些逻辑判别。
  1. 假如调用者，又传入参数该怎样办?
  2. 假如函数用new来实例化，内部的this改怎样处理?
  3. 假如函数要在原型上追加特色，该怎样处理?
调用者传入参数处理
Function.prototype._bind = function (ctx, ...bindArgs) { // bind绑定着参数获取
    let that = this;
    return function (...args) { // 调用者传入参数获取
      return that.apply(ctx, bindArgs.concat(args));  // 只需将二者进行拼接即可
    };
  };
  let obj1 = {
    age: '2',
  };
  let obj2 = {
    age: '88',
    getInfo: function (name) {
      console.log('arg', arguments); // [Arguments] { '0': '小明', '1': '调用时传入参数' }
      console.log('name', name); // name 小明。
      return `${name} 本年${this.age} 岁`;
    },
  };
  let p = obj2.getInfo._bind(obj1, '小明'); // 小明 本年2 岁
  console.log('p', p('调用时传入参数'));
tips
  • 假如只要一个形参参数接纳，可是传入了两个实参，此时会默许取第一个实参。假如想改动实参获取，能够在concat更换方位，或者在使用时，用过索引取形参
函数用new来实例化，而且在原型上进行操作
  Function.prototype._bind = function (ctx, ...bindArgs) {
    let that = this;
    function temp() {} // Object.create 原理
    function fBind(...args) {
      return that.apply(
        // 假如被new调用，this是fBind的实例
        this instanceof fBind ? this : ctx,
        args.concat(bindArgs)
      );
    }
    // 保护fBind的原型
    temp.prototype = this.prototype;
    fBind.prototype = new temp();
    return fBind;
  };
  let obj1 = {
    age: '2',
  };
  let obj2 = {
    age: '88',
    getInfo: function (name) {
      console.log('arg', arguments);
      console.log('name', name);
      return `${name} 本年${this.age} 岁`;
    },
  };
  let p = obj2.getInfo._bind(obj1, '小明');
  console.log('p', p); // [Function: fBind]
  let pp = new p();
  console.log('pp', pp); //  getInfo {}

关于new

说起new，就不得不说说结构函数，具体链接如下

平常封装的函数，根本都能够说是工厂函数,比方咱们对接口的封装

const res = await Net.upload('/Upload/upload', previewData);

咱们并不会去关怀Net.upload是怎样完成的，只需要传入相应的参数('/Upload/upload', previewData) ,就能够做数据恳求。这便是工厂函数。

再比方，咱们要得到一个目标

  function getObj(a, b) {
    let obj = {};
    obj.a = a;
    obj.b = b;
    return obj;
  }
  const obj = getObj('aa', 'bb');
  console.log(obj); // { a: 'aa', b: 'bb' }

咱们并不需要关怀内部怎样完成，只需要传入呼应的参数即可。可是这也会有一个问题，便是每次都要声明一个目标，目标赋值，而且，回来这个目标，比较繁琐。new替咱们做了这些事！！！ 使用new 来做函数的结构调用

function getObj(a, b) {
    this.a = a;
    this.b = b;
  }
  const obj = new getObj('aa', 'bb');
  console.log(obj);

new的特色

  1. 类比工厂函数，能够看出，在结构函数内部，其实每次也要新创立一个目标

  2. 而且会默许把当时的this，指向新创立目标的this

  3. 原型链会做连接

  4. 假如回来值是隐式回来，那么就回来新创立的目标，不然回来显现回来的目标

手写new

function _new() {
 let Constructor = [].shift.call(arguments);
 if (typeof Constructor !== 'function') {
   throw new Error('The first argument of new must be a function');
 }
 let obj = {}; // 创立/ 结构一个目标
 Object.setPrototypeOf(obj, Constructor.prototype);
 let res = Constructor.apply(obj, arguments);
 return res instanceof Object ? res : obj;
}
function Test(name, age) {
 this.name = name;
 this.age = age;
}
Test.prototype.sayName = function () {
 console.log(this.name);
};
const t = _new(Test, 'wd', 7);
console.log(t); // Test { name: 'wd', age: 7 }

思路讲解

  • 传入的有必要是个函数，才能够做函数的结构调用
  • [].shift.call(arguments) 获取第一个参数，第一个参数便是传入的函数。此时arguments的参数便是剩下的所有参数
  • Object.setPrototypeOf 创立的目标和传入的函数，做一个关联
  • Constructor.apply(obj, arguments) 改动this指向，而且apply会调用传入的函数，此时默许传入的函数是没有回来值的

手写call，apply，bind，new

假如传入的函数，有回来值,

手写call，apply，bind，new

假如是回来目标，那么就要做检测。假如调用的函数有回来值，而且是目标，就要回来其所回来的目标。 return res instanceof Object ? res : obj;

不然就回来 创立的新目标 obj

return res instanceof Object ? res : obj;

结束