Principle and Simulation of bind

Preface

If you don't understand bind Please go to Function.prototype.bind, I'm not going to repeat it here .

Want to see bind Principle kids' shoes , You need to know the following ：

• Closure
• Prototype chain
• this The direction of
• Array.prototype.slice
• new The process of
• Object.create

Ideas

1. bind Method does not immediately execute the function , And you need to save an input parameter , So here we use Closure
2. Change the scope of the function , So use apply perhaps call Method to implement
3. Get all the input parameters of the function arguments, And the use of slice Convert to an array

First use the above ideas to achieve a rough prototype of the implementation code ：

Function.prototype.mybind = function () {
    
  if (typeof this !== 'function') throw 'Bind must be called on a function'
  let _this = this, // there this Is the original function 
    context = arguments[0],// Get to this Object to point to 
    slice = Array.prototype.slice,
    args = slice.call(arguments, 1);// obtain bind Function division this Points to all parameters outside the object 
  // Return function  
  return function () {
    
    args = args.concat(slice.call(arguments))// Merge bind Input parameter of the and input parameter of the execution 
    return _this.apply(context, args)
  }
}

Now we can test ：

function test(a, b) {
    
  console.log('this.name', this.name)
  console.log('a', a)
  console.log('b', b)
  return str
}
const henry = {
    
  name: 'henry',
}
// test.bind(henry, 1)(2, 3)
test.mybind(henry, 1)(2, 3)

Okay , Now we have bind Basic usage , But it's not over , If we use bind The returned function is the constructor new What happens to an object ？

Prototype chain

Official documents There is a passage on ：

A bound function may also be constructed using the new operator: doing so acts as though the target function had instead been constructed. The provided this value is ignored, while prepended arguments are provided to the emulated function.

This means that the binding function can also use new Operators create instances , Doing so is like constructing an objective function , Provided this Will be ignored , The prepositional parameters will also be used .

4. We want the constructor of the instance to be the object function
5. Detect the binding function this Whether it is an instance of the objective function , If yes, ignore the binding provided this

...
context = this instanceof _this ? this : context
...
fn.prototype = _this.prototype

The complete code is ：

Function.prototype.mybind = function () {
    
  if (typeof this !== 'function') throw 'Bind must be called on a function'
  let _this = this,
    context = arguments[0],// Get to this Object to point to 
    slice = Array.prototype.slice,
    args = slice.call(arguments, 1);// obtain bind Function division this Points to all parameters outside the object 
  // Return function  
  const fn = function () {
    
    args = args.concat(slice.call(arguments))// Merge bind Input parameter of the and input parameter of the execution 
    context = this instanceof _this ? this : context // If this The constructor of the object pointed to is the original function , shows this yes new Objects generated in the process , At this point, ignore the context
    return _this.apply(context, args)
  }
  fn.prototype = _this.prototype
  return fn
}

Test it ：

function test() {
    }
const testBind = test.mybind()
const tb = new testBind()
console.log('tb', tb.constructor) //tb ƒ test() {}

It seems that I have no problem coming here , Let's take a look at the results of the following code execution

function test() {
     }
const testBind = test.mybind()
const tb = new testBind()
testBind.prototype.say = function () {
    
  console.log('say testBind')
}
test.prototype.say = function () {
    
  console.log('say test')
}
tb.say() //say test

This is not true. bind Use new Result , The result should be say testBind That's right , This is because the prototype object of the binding function and constructor is the same , So we should use Object.create Optimize it , The complete code is as follows ：

Function.prototype.mybind = function () {
    
  if (typeof this !== 'function') throw 'Bind must be called on a function'
  let _this = this,
    context = arguments[0],// Get to this Object to point to 
    slice = Array.prototype.slice,
    args = slice.call(arguments, 1);// obtain bind Function division this Points to all parameters outside the object 
  // Return function  
  const fn = function () {
    
    args = args.concat(slice.call(arguments))// Merge bind Input parameter of the and input parameter of the execution 
    context = this instanceof _this ? this : context // If this The constructor of the object pointed to is the original function , shows this yes new Objects generated in the process , At this point, ignore the context
    return _this.apply(context, args)
  }
  fn.prototype = Object.create(_this.prototype)
  return fn
}