JavaScript内置一些方法的实现原理--new关键字，call/apply/bind方法--实现

先学习下new操作符吧

new关键字调用函数的心路历程：

1.创建一个新对象

2.将函数的作用域赋给新对象（this就指向这个对象）

3.执行函数中的代码

4.返回这个对象

根据这个的思路，来实现一个简单的new操作吧，代码演示：

function myNew(Func, ...args) {
  if (typeof Func !== 'function') throw new Error(`${Func} is not a constructor`);
  const obj = Object.create(Func.prototype);
  const res = Func.apply(obj, args);
  if (res instanceof Object) return res;
  return obj;
}
function Person(name, age) {
  this.name = name;
  this.age = age;
}
const p1 = new Person('xm', 20);
const p2 = myNew(Person, 'xm', 20);

首先，先判断传进来的第一个参数是不是函数，不是函数抛出错误。

接着以传进来的函数的原型对象为原型创建一个新对象。

这步相当于obj.__proto__ = Func.prototype或者Object.setPrototypeOf(obj, Func.prototype)。

（Object.create()是推荐用法，ie11以下不支持上面那些东西、const，ie11不支持...）

调用函数，通过apply方法把函数的this绑定到obj。如果函数有返回值，且为对象，则返回该对象。

否则返回obj。

稍微兼容一点的写法（到ie9）：

function myNew(Func) {
  if (typeof Func !== 'function') throw new Error( Func + 'is not a constructor');
  var obj = Object.create(Func.prototype);
  var args = Array.prototype.slice.call(arguments, 1);
  var res = Func.apply(obj, args);
  if (res instanceof Object) return res;
  return obj;
}
function Person(name, age) {
  this.name = name;
  this.age = age;
}
var p1 = new Person('xm', 20);
var p2 = myNew(Person, 'xm', 20);

验证：

 

call方法

call方法最常见的用法就是改变函数的this指向。

该方法的第一个参数为函数的this指向。后面的参数为函数的参数，按顺序传入。

根据这个思路，来实现这样一个功能简单的call方法吧。代码演示：

Function.prototype.myCall = function(context, ...args) {
  let self = this;
  context = context || window;
  Object.defineProperty(context, 'myFn', {
    configurable: true,
    get() {
      return self;
    }
  });
  const res = context.myFn(...args);
  delete context.myFn;
  return res;
};

以上代码，在Function的原型对象上添加一个myCall方法，就可以实现fn.myCall()如此模样的操作了。

接着定义一个变量保存方法函数内部this，this指向调用该方法的函数。

然后做一个简单的短路操作，如果传进来的第一个参数是undefined、null，则指向window。

当然，如果瞎传，那就只能下一行执行时报错了。

接着在context上添加一个属性，并把该属性设置成可以删除的，设置get方法。

访问该属性时触发get方法，返回的是调用myCall方法的函数。接下来调用函数，返回值保存到res。

最后删除context.myFn属性，返回res。

验证：

稍微兼容一些的写法：

Function.prototype.myCall = Function.prototype.call || function(context) {
  var self = this, args = [], res, i, len;
  context = context || window;
  Object.defineProperty(context, 'myFn', {
    configurable: true,
    get() {
      return self;
    }
  });
  for (i = 1, len = arguments.length; i < len; i++) {
    args.push('arguments[' + i + ']');
  }
  res = eval('context.myFn(' + args + ')');
  delete context.myFn;
  return res;
};

当然，测试的时候先把前面的短路操作去掉。。

apply方法

apply方法与call方法很相似，只在传参上有点区别。apply第二个参数是数组或类数组对象。

 接下来就来实现一个功能相对单一的apply方法吧。代码演示：

Function.prototype.myApply = function(context, arr) {
  let self = this;
  context = context || window;
  Object.defineProperty(context, 'myFn', {
    configurable: true,
    get() {
      return self;
    }
  });
  const res = context.myFn(...arr);
  delete context.myFn;
  return res;
};

几乎和call方法的实现一模一样。。

稍微兼容一些的写法：

Function.prototype.myApply = Function.prototype.apply || function(context) {
  var self = this, args = [], _args = [], res, i, len;
  context = context || window;
  Object.defineProperty(context, 'myFn', {
    configurable: true,
    get() {
      return self;
    }
  });
  for (i = 0, len = arguments[1].length; i < len; i++) {
    args.push('_args[' + i + ']');
    _args.push(arguments[1][i]);
  }
  res = eval('context.myFn(' + args + ')');
  delete context.myFn;
  return res;
};

需要注意的是，传进的参数只有两个，第二个是数组或类数组，像myCall方法中传入eval函数的字符串直接映射arguments对象是行不通的。

可以再创建一个数组，把传进来的第二个参数全部push进去，eval函数的字符串直接映射该数组。

当然，测试的时候先把前面的短路操作去掉。。

bind方法

bind方法略有不同，函数调用bind方法，返回的是一个函数。当函数只是普通调用时，this指向bind方法的第一个参数。

如果返回的函数被当做构造函数调用时，前面绑定的this又无效了，此时指向new操作符创建的对象。

如：

function person() {
  console.log(this); 
}
const P1 = person.bind({name: 'xm'});
P1();// {name: 'xm'}
new P1();// person实例

还需要注意的是，当返回的函数被当做对象的方法调用时，此时this仍然指向bind方法绑定的对象。如：

const obj = {
  P1  
};
obj.P1();// {name: 'xm'}

接下来，来实现这样的一个bind方法吧。代码演示：

Function.prototype.myBind = function(context, ...args) {
  const self = this;
  context = context || window;
  const Bound = function() {
    const _args = [...args, ...arguments];
    let _context = context;
    if (this instanceof Bound) _context = this;
    return self.apply(_context, _args);
  }
  const _Fn = function () {};
  _Fn.prototype = this.prototype;
  Bound.prototype = new _Fn();
  return Bound;
};

以上代码，在Function的原型对象上添加一个myBind方法，就可以实现fn.myBind()如此模样的操作了。

接着保存函数的this，这个this指向调用myBind()方法的函数。

然后简单处理下传进来的第一个参数，为null、undefined时指向window。

接下来就是创建一个Bound函数，这个Bound函数是一个闭包，它可以访问外层函数的变量。

最后它是要作为myBind()方法的返回值，返回出去的。

 

在Bound函数里，第五行代码先处理了下参数。除第一个context参数，其他参数有时候会在myBind方法里传，有时候会在返回的函数里传。

这里不管三七二十一，都转成数组，然后拼接成一个数组。然后通过apply方法传参。（使用eval函数也行，就是麻烦了些）

第七行代码判断this 和 Bound的关系，如果Bound函数被new操作符调用，则函数内部的this指向Bound的实例（即new创建的对象）。

此时instanceof会返回真，然后这里处理下_context参数，把this赋给_context。

最后通过apply方法调用self(即外层函数保存的this)，最后把函数返回值return出去。

 

测试代码：

function person(name, age) {
  console.log(this);
  console.log(name, age);
}
const Bound = person.myBind({name: 'xm'}, 'xh' );
const person1 = new Bound(20);

以上代码，person函数先调用myBind()方法，并把返回的函数（Bound）保存到Bound。

然后通过new调用Bound函数。结果：

对比：

方法没有大的问题，基本是实现了。

 

然后，这三行代码的作用是处理Bound函数的原型链。这样做的一个好处是，

Bound函数原型对象是空函数_Fn的一个实例。可以随意扩展。_Fn函数的原型对象又是person函数的原型对象。

这就等于Bound函数的原型对象的原型指针指向了person函数的原型对象。。。代码描述就是  

因此，Bound函数的实例不仅拥有Bound.prototype上的方法和属性，还拥有person函数原型对象的方法和属性。

原型链，如图：

验证：

稍微兼容一些的写法：

Function.prototype.myBind = Function.prototype.bind || function(context) {
  var self = this;
  var args = Array.prototype.slice.call(arguments, 1);
  context = context || window;
  var Bound = function() {
    var _args = Array.prototype.slice.call(arguments, 0);
    var _context = context;
    if (this instanceof Bound) _context = this;
    return self.apply(_context, args.concat(_args));
  }
  var _Fn = function () {};
  _Fn.prototype = this.prototype;
  Bound.prototype = new _Fn();
  return Bound;
};