Detailed explanation of the process from learning bind to implementing bind in Javascript-JS Tutorial-php.cn

This article mainly introduces the process from learning bind to implementing bind in Javascript. Friends who are interested can follow along and learn. I hope it can help everyone.

What is bind

The bind() method creates a new function, and when called, sets its this keyword to the provided value. When calling the new function, in any provided Previously provided with a given sequence of arguments.

var result = fun.bind(thisArg[, arg1[, arg2[, ...]]]) 
result(newArg1, newArg2...)

Copy after login

If you don’t understand, don’t worry, keep reading.

What exactly does bind do

Three points can be seen from the above introduction. First, calling the bind method will return a new function (the function body of this new function should be the same as fun). At the same time, two parameters are passed in bind. The first one is pointed to by this, that is, whatever this is passed in is equal to what it is. As shown in the following code:

this.value = 2
var foo = {
  value: 1
}
var bar = function() {
 console.log(this.value)
}
var result = bar.bind(foo)
bar() // 2
result() // 1,即this === foo

Copy after login

The second parameter is a sequence, and you can pass any number of parameters into it. And it will be preset before the new function parameters.

this.value = 2
var foo = {
  value: 1
};
var bar = function(name, age, school) {
 console.log(name) // 'An'
 console.log(age) // 22
 console.log(school) // '家里蹲大学'
}
var result = bar.bind(foo, 'An') //预置了部分参数'An'
result(22, '家里蹲大学') //这个参数会和预置的参数合并到一起放入bar中

Copy after login

We can see that when result(22, 'Study at home in college') is finally called, it already contains the 'An' passed in when calling bind.

One sentence summary: calling bind will return a new function. This in this function points to the first parameter of bind, and the parameters following this will be passed to this new function in advance. When calling the new function, the parameters passed will be placed after the preset parameters and passed into the new function together.

Implement a bind by yourself

To implement a bind, you need to implement the following two functions

Return a function, bind this, and pass preset parameters

The function returned by bind can be used as a constructor. Therefore, when used as a constructor, this should be invalid, but the parameters passed in are still valid

1. Return a function, bind this, and pass the preset parameters

this.value = 2
var foo = {
  value: 1
};
var bar = function(name, age, school) {
  console.log(name) // 'An'
  console.log(age) // 22
  console.log(school) // '家里蹲大学'
  console.log(this.value) // 1
}
Function.prototype.bind = function(newThis) {
  var aArgs  = Array.prototype.slice.call(arguments, 1) //拿到除了newThis之外的预置参数序列
  var that = this
  return function() {
    return that.apply(newThis, aArgs.concat(Array.prototype.slice.call(arguments)))
    //绑定this同时将调用时传递的序列和预置序列进行合并
  }
}
var result = bar.bind(foo, 'An')
result(22, '家里蹲大学')

Copy after login

There are One detail is the sentence Array.prototype.slice.call(arguments, 1). We know that the arguments variable can get the parameters passed when the function is called, but it is not an array, but it has a length attribute. Why can it be turned into a pure array by calling it like this? Then we need to go back to the source code of V8 for analysis. #The source code of this version is an early version with relatively less content.

function ArraySlice(start, end) {
 var len = ToUint32(this.length); 
 //需要传递this指向对象，那么call(arguments)，
 //便可将this绑定到arguments，拿到其length属性。
 var start_i = TO_INTEGER(start);
 var end_i = len;
 if (end !== void 0) end_i = TO_INTEGER(end);
 if (start_i < 0) {
  start_i += len;
  if (start_i < 0) start_i = 0;
 } else {
  if (start_i > len) start_i = len;
 }
 if (end_i < 0) {
  end_i += len;
  if (end_i < 0) end_i = 0;
 } else {
  if (end_i > len) end_i = len;
 }
 var result = [];
 if (end_i < start_i)
  return result;
 if (IS_ARRAY(this))
  SmartSlice(this, start_i, end_i - start_i, len, result);
 else 
  SimpleSlice(this, start_i, end_i - start_i, len, result);
 result.length = end_i - start_i;
 return result;
};

Copy after login

You can see from the source code that after assigning the length attribute under arguments to slice through call, you can get the final array through start_i & end_i, so when there is no need to pass it into the slice, it is a pure array at the end You can also get an array variable.

2. The function returned by bind can be used as a constructor.

When used as a constructor, this should point to the instance of new, and there is also a prototype attribute, which points to the instance. prototype.

this.value = 2
var foo = {
 value: 1
};
var bar = function(name, age, school) {
 ...
 console.log('this.value', this.value)
}
Function.prototype.bind = function(newThis) {
 var aArgs  = Array.prototype.slice.call(arguments, 1)
 var that = this //that始终指向bar
 var NoFunc = function() {}
 var resultFunc = function() {
  return that.apply(this instanceof that ? this : newThis, aArgs.concat(Array.prototype.slice.call(arguments)))
 } 
 NoFunc.prototype = that.prototype //that指向bar
 resultFunc.prototype = new NoFunc()
 return resultFunc
}
var result = bar.bind(foo, 'An')
result.prototype.name = 'Lsc' // 有prototype属性
var person = new result(22, '家里蹲大学')
console.log('person', person.name) //'Lsc'

Copy after login

The above simulation code does two important things.

1. Simulate a prototype attribute for the returned function. , because the properties and methods defined on the prototype can be queried through the instance from the constructor new

var NoFunc = function() {}
...
NoFunc.prototype = that.prototype //that指向bar
resultFunc.prototype = new NoFunc()
return resultFunc

Copy after login

As can be seen from the above code, that always points to bar. At the same time, the returned function has inherited that.prototype, which is bar.prototype. Why not just make the prototype attribute resultFunc.prototype of the returned function equal to bar(that).prototype? This is because any new instance can access the prototype chain. If assigned directly, the new object can directly modify the prototype chain of the bar function, which is prototype chain pollution. So we use inheritance (assign the prototype chain of the constructor to the instance of the parent constructor) to disengage the prototype chain of the new object from bar.

2. Determine whether this is used for ordinary bind or for the constructor to change the point of this when it is currently called.

How to determine where this currently points to? From the first point we already know that the new function returned by the bind method already has a prototype chain. All that is left for us to do is to change the point of this to simulate it. finished. How to determine the current posture being called. The answer is instanceof.

The instanceof operator is used to test whether an object has a constructor's prototype property in its prototype chain.

// 定义构造函数
function C(){} 
function D(){} 
var o = new C();
// true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C; 
// false，因为 D.prototype不在o的原型链上
o instanceof D;

Copy after login

As can be seen from the above, instanceof can determine whether an object is new from this function. If it is new, then the prototype chain of this object should be the prototype of the function.

So let’s take a look at the key returned function structure:

var resultFunc = function() {
  return that.apply(this instanceof that ? 
    this : 
    newThis, 
    aArgs.concat(Array.prototype.slice.call(arguments)))
 }

Copy after login

In this, we must first recognize that this in this instanceof that is the new value returned after the bind function is called. this in the function. So this this may be executed in a normal scope environment, and it may also be new to change its direction. Looking at that again, that always points to bar, and its prototype chain that.prototype always exists. So if this new function now needs to perform a new operation, then this points to the new function, then this instanceof that === true, so pass this in apply as a pointer, which points to the new function. If it is a normal call, then this is not created by new, that is, the new function is not used as a constructor, and this instanceof that === false is obvious. This time is a normal bind call. Just use the first parameter of the call as the pointer to this.

Complete code (implementation under MDN)

if (!Function.prototype.bind) {
 Function.prototype.bind = function(oThis) {
  if (typeof this !== 'function') {
   // closest thing possible to the ECMAScript 5
   // internal IsCallable function
   throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
  }

  var aArgs  = Array.prototype.slice.call(arguments, 1),
    fToBind = this,
    fNOP  = function() {},
    fBound = function() {
     return fToBind.apply(this instanceof fNOP
         ? this
         : oThis,
         aArgs.concat(Array.prototype.slice.call(arguments)));
    };

  if (this.prototype) {
   // Function.prototype doesn't have a prototype property
   fNOP.prototype = this.prototype; 
  }
  fBound.prototype = new fNOP();
  return fBound;
 };
}

Copy after login

可以看到，其首先做了当前是否支持bind的判定，不支持再实行兼容。同时判断调用这个方法的对象是否是个函数，如果不是则报错。

同时这个模拟的方法也有一些缺陷，可关注MDN上的Polyfill部分

小结

模拟bind实现最大的一个缺陷是，模拟出来的函数中会一直存在prototype属性，但是原生的bind作为构造函数是没有prototype的，这点打印一下即可知。不过这样子new出来的实例没有原型链，那么它的意义是什么呢。