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

This article introduces the relevant knowledge of "how to handwrite bind function". 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!

A previous article, the native implementation of interview questions call, apply, bind, this article describes how to manually implement call, apply, bind, but not long ago reread this article found that the implementation of bind code is not perfect, let's take a look at a piece of code:

Function Person () {this.name= "zs"; this.age=18; this.gender= "male"} var obj= {hobby: "read"} / / bind the this of the constructor to objvar changePerson = Person.bind (obj); / / call the constructor directly, and the function manipulates the obj object, adding three attributes to it; changePerson (); / / 1, output objconsole.log (obj)

/ / using the constructor that changes the point of this, new an instance of var p = new changePerson (); / / 2, output objconsole.log (p)

Code output:

1. Output:

2. Output:

Take a closer look at the above code and then look at the output.

We use bind on the Person class to point its this to obj and get the changeperson function. Here, if we call changeperson directly, we will change obj. If we call changeperson with new, we will get instance p, and its _ _ proto__ points to Person. We find that bind is invalid.

We have come to the conclusion that the function pointed to by this is changed with bind, and if called with the new operator, bind will be invalidated.

Let's take a look at the code for the bind implementation in our article (native implementation of call, apply, bind for interview questions):

Function.prototype.myBind = function (ctx,... argv1) {return (... argv2) = > {return this.call (ctx,... argv1,... argv2)}}

If you're not used to it, convert it to the way es5 executes:

Function.prototype.mybind = function () {/ / 1, save function var _ this = this; / / 2, save target object var context = arguments [0] | | window; / / 3, save parameters outside the target object and convert them into an array; var rest = Array.prototype.slice.call (arguments,1); / / 4, return a function to be executed return function F () {/ / 5, convert the parameters passed twice into an array Var rest2 = Array.prototype.slice.call (arguments) / / 6. Call the function saved in the first step with apply, bind this, and pass the merged parameter array _ this.apply (context,rest.concat (rest2));}}

We use the self-implemented mybind function to implement the example at the top of the article to test whether we can get the same effect as the native bind if we change the this of the constructor with the mybind function, and then execute the new function with new. The test code is as follows:

Function Person () {this.name= "zs"; this.age=18; this.gender= "Man"} var obj= {hobby: "Reading"} / / bind the this of the constructor to obj, calling the mybind method developed above; var changePerson = Person.mybind (obj); / / directly calling the constructor, which manipulates the obj object and adds three attributes to it; changePerson (); / / 1, output objconsole.log (obj)

/ / using the constructor that changes the point of this, new an instance of var p = new changePerson (); / / 2, output objconsole.log (p)

View the output:

1. Output:

2. Output:

We use the mybind implemented above to change the this of the function, and then call the new method, and find that it does not achieve the same effect as the native bind, and there is still some gap between our mybind method and the native bind implementation, so how can we correct it?

Take a closer look at the code and find the breakthrough here: new changeperson ().

Here we just need to determine whether it is called through the new operator when calling new changeperson (). If it is called by the new operator, we directly call the function before the this is not changed with new and return its result.

So how do you tell if a function is called through the new operator? We are going to use instanceof here, take a look at the official documentation to explain it:

| | instanceof operator is used to test whether the prototype property of the constructor appears in the object's

| anywhere in the prototype chain.

To translate into vernacular is to determine whether an instance is generated by a class or constructor.

Going back to the body, we know that when we call a constructor with the new operator, or an ordinary function, we perform the following steps inside the function:

1. Generate an empty object

2. Then point the this to the empty object

3. Finally, return this object.

This object is an example of this constructor, so as long as you execute the this instanceof constructor inside the function to determine whether the result is true, you can determine whether the function is called through the new operator. If the result is true, it is called with the new operator. The code is modified as follows:

Function.prototype.mybind = function () {/ / 1, save function var _ this = this; / / 2, save target object var context = arguments [0] | | window; / / 3, save parameters outside the target object and convert them into an array; var rest = Array.prototype.slice.call (arguments,1); / / 4, return a function to be executed return function F () {/ / 5, convert the parameters passed twice into an array Var rest2 = Array.prototype.slice.call (arguments) if (this instanceof F) {/ / 6. If called with the new operator, call the original function directly with new and pass the parameter return new _ this (... rest2)} else {/ 7 with the extension operator, call the function saved in the first step with apply, and bind this Pass the merged parameter array _ this.apply (context,rest.concat (rest2)) }}}

At this point, the test runs the above test case, and the printed result is as follows:

Perfectly achieve the same effect as native bind, it is not easy to conduct a more in-depth study of a knowledge point, the deeper you find, the more extensive the knowledge involved. Like this article, although it is about the manual implementation of bind, it actually involves the principle of new operator invocation and the usage of instanceof.

This is the end of the content of "how to implement the bind function by hand". 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.