How to explain JS' bind simulation implementation to your girlfriend

episode

My girlfriend studies at home on weekends , Suddenly sent me a wechat message , Open it to see the simulation implementation bind, Let me tell her ~

Explain

Don't talk much , Start

First line of code

In function Function The prototype of the prototype Mount a bind2 Method

Function.prototype.bind2 = function(context) {}

Second line of code

hold this Assign a value to self, Mainly for the later implementation apply When ,self Pointing to bind2 The caller

var self = this;

Third line of code

Use Array.prototype.slice.call() Method to arguments This class array is from 1 Start , That is the first. 2 The parameters from item to tail are converted into an array , Some students may wonder why it is not the first 1 A start , Because the first item is usually an object , In the picture is context This into the reference , This input is at the end apply Time use In fact, the self and args Hereunder return When used in functions of, closures will be generated

var args = Array.prototype.slice.call(arguments, 1);

Fourth line of code

Returns a function

return function() {}

Line 5

Similar to the second line of code , Omitting the second input parameter here is actually from the first item to the end

var bindArgs = Array.prototype.slice.call(arguments);

The sixth line of code

perform apply Method change function this Point to context, The parameters of the function passed in twice are merged , Why merge parameters , because bind When used, the first return is a function , Execute this function again , It's comparable apply/call Use ; This also involves the reference of external variables by inner functions , That is often said closure .

self.apply(context, args.concat(bindArgs));

for instance ：

var obj = {
  type: 'car'
};
function factory(brand, color) {
  console.log(' Commodity type :', this.type) //  Commodity type : car
  console.log(' Brand of goods :', brand) //  Brand of goods : BMW
  console.log(' The color of the goods :', color) //  The color of the goods : red
}
var product = factory.bind2(obj, 'BMW');
product('red')

thus , End of explanation , My girlfriend said she understood , Continue to work hard

Little egg

Sort out the knowledge points ：

• Prototype prototype Mounting method
• this Point to
• Array.prototype.slice.call() Turn the class array into an array
• Closure
• apply Method

notes ：bind If you are interested in the implementation of other scenarios, you can further explore .