Step by step, the call/apply/bind implementation is simulated

call

The call() method calls a function with a specified this value and one or more arguments given separately.

thinking

var people={
  sex:'man'.age:27
}
function sayPeople(a,b){
  console.log(this.sex,this.age,a,b)
  return false
}
sayPeople.call(people,2.3) //man 27 2 3
Copy the code

The effect of the call implementation here is that external functions can call internal properties of the object (this refers to changes). It’s easy to understand: you can call an object’s internal properties by setting an external function as an object’s internal method.

var people={
  sex:'man'.age:27
}
function sayPeople(a,b){
  console.log(this.sex,this.age,a,b)
}
sayPeople.call(people,2.3)//man 27 2 3
// If you want to rewrite the code, you can find that the output is consistent
var people2={
  sex:'man'.age:27.sayPeople2:sayPeople2
}
function sayPeople2(a,b){
  console.log(this.sex,this.age,a,b)
}
people2.sayPeople2(4.5)//man 27 4 5
Copy the code

var people={
  sex:'man'.age:27
}
function sayPeople(){
  console.log(this.sex,this.age)
}

Function.prototype.newCall=function(obj) {
  // Set the calling function to the built-in function of obj
  obj.fn=this
  obj.fn()
  // Delete fn to avoid additional fn methods on the object
  delete obj.fn
}
sayPeople.call(people)    //man 27
sayPeople.newCall(people) //man 27
Copy the code

var people = {
  sex: 'man'.age: 27
}
function sayPeople(a,b) {
  console.log(this.sex, this.age,a,b)
}

Function.prototype.newCall = function (obj) {
  // Set the calling function to the built-in function of obj
  obj.fn = this
  // Get all parameters except the first one
  var arr = []
  for (var i = 1; i < arguments.length; i++) {
    // Note that we are getting strings, not concrete values, because eval() is executing strings as code
    arr[i - 1] = 'arguments[' + i + '] '
  }
 // Use eval() to call fn methods with multiple arguments
  eval('obj.fn(' + arr + ') ')
  // Delete fn to avoid additional fn methods on the object
  delete obj.fn
}
sayPeople.call(people,1.2) //man 27 1 2
sayPeople.newCall(people,1.2)//man 27 1 2

Copy the code

var people = {
  sex: 'man'.age: 27
}
function sayPeople(a,b) {
  console.log(this.sex, this.age,a,b)
  return false
}

Function.prototype.newCall=function(obj) {
  // Check whether the object passed in is null or undefined, or if it points to window
  obj=obj || window  
  // Set the calling function to the built-in function of obj
  obj.fn=this
  // Get all parameters except the first one
  var arr=[]
  for(var i=1; i<arguments.length; i++) { arr[i-1] ='arguments['+i+'] '
  }
  // Use eval() to call fn methods with multiple arguments
  var result=eval('obj.fn('+arr+') ')
  // Delete fn to avoid additional fn methods on the object
  delete obj.fn
  // Consider calling the function sayPeople with a return
  return result
}

console.log(sayPeople.call(people,1.2)) 
//man 27 1 2
//false
console.log(sayPeople.newCall(people,1.2))
//man 27 1 2
//false

Copy the code

apply

The apply() method calls a function with a given this value and arguments in the form of an array (or array-like object). Note: Call () is similar to apply() except that call() accepts a list of parameters, while apply() accepts an array of parameters.

thinking

The difference between Apply and Call is that the second parameter is implemented differently

var people = {
  sex: 'man'.age: 27
}
function sayPeople(. args) {
  console.log(this.sex, this.age,... args);return false
}
Function.prototype.newApply = function (obj, arr) {
  var result,args=[];
  // Check whether the object passed in is null or undefined, or if it points to window
  obj = obj || window
  // Set the calling function to the built-in function of obj
  obj.fn = this
  // Apply has only two parameters. If arr is null, execute fn
  if(! arr) { result = obj.fn() }else {
    for (var i = 0; i < arr.length; i++) {
      args[i] = 'arr[' + i + '] '
    }
    // Use eval() to call fn methods with multiple arguments
    result = eval('obj.fn(' + args + ') ')}// Delete fn to avoid additional fn methods on the object
  delete obj.fn
  // Consider the case where the function return is called
  return result
}
console.log(sayPeople.apply(people, [1.2.8.9.5]))
//man 27 1 2 8 9 5
//false
console.log(sayPeople.newApply(people, [1.2.8.9.5]))
//man 27 1 2 8 9 5
//false
Copy the code

grammar

function_.bind(thisArg[, arg1[, arg2[, …]]])_

Analog implementation

Bind will return a copy of the original function :this refers to the same change principle, so we can get the following code from the above thinking

var people = {
  sex: 'man'.age: 27
}
function sayPeople(a,b) {
  console.log(this.sex, this.age,a,b)
  return false
}
Function.prototype.newBind=function(obj){
  // Save this in case this is lost
  var that = this
  var args=Array.prototype.slice.call(arguments.1)
  return function () {
   return  that.apply(obj, args)
  }
}
sayPeople.bind(people,2.2) ()//man 27 2 2
sayPeople.newBind(people,2.2) ()//man 27 2 2
Copy the code

We found that Bind also accepts arguments that return functions, so we need to merge the arguments

var people = {
  sex: 'man'.age: 27
}
function sayPeople(a,b) {
  console.log(this.sex, this.age,a,b)
  return false
}


Function.prototype.newBind=function(obj){
  // Prevent this from being lost
  var that = this
  var args=Array.prototype.slice.call(arguments.1)
  return function () {
     // Arguments refer to the arguments passed in by the function returned by bind
    // Note that arguments don't need to be split at this point, just convert the class array to an array
   return  that.apply(obj, args.concat(Array.prototype.slice.call(arguments)))
  }
}

sayPeople.bind(people,2) (2)//man 27 2 2
sayPeople.newBind(people,2) (2)//man 27 2 2
Copy the code

The second step is to create an instance of the bind return function using new.

var sex= 'woman';
var people = {
  sex: 'man'.age: 27
}
function sayPeople(a,b) {
  console.log(this.sex, this.age,a,b)
  return false
}
var sayPeople2 = sayPeople.bind(people,2)
var people2=new sayPeople2(2)
console.log(people2)
//undefined undefined 2 2
//sayPeople {}
Copy the code

A binding function can also use the new operator to create objects: this behavior is like treating the original function as a constructor. The supplied this value is ignored, and the arguments to the call are supplied to the mock function.

We can see that the “this” pointer inside sayPeople is missing. It does not point to people or window. But the parameters passed in are not affected. The reason for this is the use of new. So the solution is to modify the prototype and the first parameter passed into apply.

The key point

1. When did you use new
2. Change the return function’s prototype to point to sayPeople

thinking

1. If new is used, the current this reference is an instance of the return function, so we can determine the use of new by whether the current this prototype is a return function
2. Change the prototype by modifying the Prototype property

The specific implementation

var sex= 'woman';
var people = {
  sex: 'man'.age: 27
}
function sayPeople(a,b) {
  console.log(this.sex, this.age,a,b)
  return false
}
Function.prototype.newBind=function(obj){ 
  // Prevent this from being lost
  var that = this
  var args=Array.prototype.slice.call(arguments.1)
   function newFn () {
    // If this instanceof newFn is true, new is called
    return that.apply(this instanceof newFn ? this:obj, args.concat(Array.prototype.slice.call(arguments)))}// Change the return function's prototype to the binding function's (in this case sayPeople)prototype
  newFn.prototype=that.prototype
  return newFn
}
var sayPeople2 = sayPeople.newBind(people,2)
var people2=new sayPeople2(2)
console.log(people2)

Copy the code

Code optimization

If we change prototype in newFn, it will also affect prototype in the binding function sayPeople, so we need to use an empty function to mediate.

Function.prototype.newBind=function(obj){ 
  // If bind is not a function, an error is reported
  if (typeof this! = ="function") {
  throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
 }
  // Prevent this from being lost
  var that = this
  var emptyFn=function (){}
  var args=Array.prototype.slice.call(arguments.1)
   function newFn () {
    // If this instanceof newFn is true, new is called
    return that.apply(this instanceof newFn ? this:obj, args.concat(Array.prototype.slice.call(arguments)))}// Change the return function's prototype to the binding function's (in this case sayPeople)prototype
  emptyFn.prototype=that.prototype
  newFn.prototype=new emptyFn()
  return newFn
}
Copy the code