Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to achieve call, apply, bind". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, let's give a definition of call:

The call method calls a function or method with a specified this value and several specified parameter values.

For example:

Var foo = {value: 1}

Function bar () {console.log (this.value);}

Bar.call (foo); / / 1

From the execution result of the above code, we can see that call first changes the direction of this so that the this of the function points to foo, and then makes the bar function execute.

The summary is as follows: 1. Call changes the direction of the function this. 2. Call the function.

Think about it: how can we achieve the above effect? The code is modified as follows:

/ / Mount the bar function on the foo object to make it foo. Use foo.bar to call var foo = {value:1, bar:function () {console.log (this.value)}} foo.bar () / / 1

Take a closer look at what we do, mount the bar function on the foo object, make it a method of foo, and call it with foo.bar.

Let's take a look at the execution result of the above code: print 1, is there any inspiration? To simulate the call method, can we do this:

A, set the function to the property (or method) of an object

B. Call the function through the properties of the object

C, set this property (or method) on the object

The code is as follows:

Function.prototype.myCall = function (context) {context = context | | window / / Mount the function to the fn property of the object context.fn = this / / process the passed parameter const args = [... arguments] .slice (1) / / call the method const result = context.fn (... args) / / delete the attribute delete context.fn return result} through the property of the object.

Let's take a look at the code above:

1. First of all, we have done compatible processing for the parameter context. No value is passed, and the default value of context is window.

2. Then we mount the function on context, context.fn = this

3. Process the parameters. Intercept the parameters passed into myCall, remove the first bit, and then convert them to an array.

4. Call context.fn, and the this of fn points to context.

5. Delete the attribute delete context.fn on the object

5. Return the result.

And so on, let's implement apply by the way, the only difference is the handling of parameters, the code is as follows:

Function.prototype.myApply = function (context) {

Context = context | | window context.fn = this let result / / myApply is in the form of (obj, [arg1,arg2,arg3]) / / so the second parameter of myApply is [arg1,arg2,arg3] / / here we use the extension operator to handle the way the parameter is passed if (arguments [1]) {result = context.fn (. Arguments [1])} else {result = context.fn ()} delete context.fn return result}

The above is the simulation implementation of call and apply, the only difference is the way the parameters are handled.

Then think about the implementation of bind. Before simulating the implementation of bind, take a look at the use case of bind:

Var obj = {console.log 1}; function bar () {console.log (this.a);} bar.bind (obj) ()

We can see that although the bind function can also change the this of the bar function, but after the change, the function will not be executed, just return a new function, if you want to execute, you have to continue to call, carefully observe the writing of the fifth line of code.

Based on the use case above, let's first implement a simple version of bind:

Function.prototype.myBind = function (ctx) {return () = > {/ / use the arrow function, otherwise this points to the error return this.call (ctx)} var obj = {avision 1}; function bar () {console.log (this.a);} bar.myBind (obj) ()

However, this is relatively crude, and the function cannot be handled with too many parameters, as in the following case:

Bar.bind (obj, 2) (2) / / orbar.bind (obj) (2,2)

In order to be compatible with the different ways in which parameters are passed during bind calls, the code is modified as follows:

Function.prototype.myBind = function (ctx,... argv1) {return (... argv2) = > {return this.call (ctx,... argv1,... argv2)}} / / Test Code var obj = {aVl1}; function bar (bMagec) {console.log (this.a+b+c);} bar.myBind (obj) (20jue 30); bar.myBind (obj,20,30) () "how to achieve call, apply, bind" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.