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

This article introduces the use of Js to achieve Bind, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Recently, I was helping my girlfriend review the basic knowledge related to JS. If she encountered any questions that would not be met, she would come and ask me.

Isn't it easy? Divide three into five and divide into two, and solve it in minutes.

Function bind (fn, obj,... arr) {return fn.apply (obj, arr)}

So I sent this code.

At this time, he was immediately subjected to a series of soul torture by his girlfriend.

At this time, my teacher Ma couldn't sit still. I was not convinced, so I went to review the bind. I found that if I hadn't written the basic code for too long, I still needed a little time to review. This time I had to write a deep bind, which won the true biography of teacher Ma, and divided him into five layers of shorthand.

Layer 1-the method bound to the prototype

This layer is very simple, thanks to the nature of the JS prototype chain. Because the prototype chain of function xxx points to Function.prototype, when we call xxx.bind, we call methods on Function.prototype.

Function.prototype._bind = function () {}

In this way, we can call our bind method directly on a constructor ~ for example, like this.

Funciton myfun () {} myfun._bind ()

For a detailed understanding of this aspect, you can see this picture and this article (https://github.com/mqyqingfeng/blog/issues/2)

Layer 2-change the direction of the this

This can be said to be the core feature of bind, which is to change the direction of this and return a function. To change this, we can do it through the known apply and call, so here we will use apply for simulation. First save the current this, that is, the function passed in, through self. Because we know that this has implicit binding rules (excerpt from "JavaScript you don't know" 2.2.2)

Function foo () {console.log (this.a)} var obj = {a: 2, foo}; obj.foo (); / / 2

With the above features, we can write our _ bind function.

Function.prototype._bind = function (thisObj) {const self = this; return function () {self.apply (thisObj);}} var obj = {avision 1} function myname () {console.log (this.a)} myname._bind (obj) (); / / 1

Maybe many friends stop here, because in general interviews, especially in some school recruitment interviews, you may only need to know the first two. But it is still not enough to amaze everyone in the interview, so let's continue our exploration and research.

Layer 3-support for Corey

Corialization of functions is an old topic, so let's review it here.

Function fn (x) {return function (y) {return x + y;}} var fn1 = fn (1); fn1 (2) / / 3

It is not difficult to find that Corification uses closures, and when we execute fn1, the x of the outer function is used in the function, thus forming the closure.

And our bind function is similar, we get the arguments of the current external function, and remove the bound object, save it as a variable args, and finally return method, once again get the arguments of the current function, and finally use finalArgs for a merge.

Function.prototype._bind = function (thisObj) {const self = this; const args = [... arguments] .slice (1) return function () {const finalArgs = [... args,... arguments] self.apply (thisObj, finalArgs);}}

Through the above code, let's bind method, more and more robust.

Var obj = {I: 1} function myFun (a, b, c) {console.log (this.i + a + b + c);} var myFun1 = myFun._bind (obj, 1,2); myFun1 (3); / / 7

Generally speaking, when you get to this floor, it can be said to be very good, but if you stick to it for a while, it will become a perfect answer.

Layer 4-consider the call to new

You know, our method, after binding through bind, can still be instantiated through new, and the priority of new is higher than that of bind (from "JavaScript you don't know" priority 2.3).

We verify and compare this with native bind and our layer 4 bind.

/ / Native var obj = {I: 1} function myFun (a, b, c) {/ / using the new method here, this points to the current function myFun console.log (this.i + a + b + c);} var myFun1 = myFun.bind (obj, 1,2); new myFun1 (3); / / NAN / / layer 4 bind var obj = {I: 1} function myFun (a, b, c) {console.log (this.i + a + b + c) } var myFun1 = myFun._bind (obj, 1,2); new myFun1 (3); / / 7

Note that the bind method is used here

So we need to deal with new within bind. The new.target attribute, on the other hand, happens to detect whether the constructor is called through the new operator.

Next, we need to implement a new ourselves.

According to the MDN,new keyword, do the following:

1. Create an empty simple JavaScript object (that is, {})

two。 Link this object (set its constructor) to another object

3. Use the newly created object in step 1 as the context of the this

4. If the function does not return an object, it returns this.

Function.prototype._bind = function (thisObj) {const self = this; const args = [... arguments] .slice (1); return function () {const finalArgs = [... args,... arguments]; / / new.target is used to detect whether if is called by new (new.target! = = undefined) {/ / this points to the constructor itself var result = self.apply (this, finalArgs) / / determine whether the modified function returns the object if (result instanceof Object) {return reuslt;} / / if no object is returned, return this return this;} else {/ / the original logical return self.apply (thisArg, finalArgs) if not new;}

Seeing here, your attainments are as pure as fire, but there is one small detail in the end.

Layer 5-retention function prototype

The above method is fine in most scenarios, but it goes wrong when our constructor has the prototype attribute. So we need to make up for prototype, and the calling object must be a function.

Function.prototype._bind = function (thisObj) {/ / determine whether it is a function call if (typeof target! = = 'function' | | Object.prototype.toString.call (target)! = =' [object Function]') {throw new TypeError (this + 'must be a function');} const self = this; const args = [. Arguments] .slice (1); var bound = function () {var finalArgs = [... args,... arguments] / / new.target is used to detect whether if is called by new (new.target! = = undefined) {/ / indicates that var result = self.apply (this, finalArgs) is called by new; if (result instanceof Object) {return result;} return this;} else {return self.apply (thisArg, finalArgs);}} If (self.prototype) {/ / Why is Object.create used? Because we want to prevent the modification of bound.prototype resulting in the modification of self.prototype. Do not write bound.prototype = self.prototype;. This may cause the prototype of the original function to be modified. Bound.prototype = Object.create (self.prototype); bound.prototype.constructor = self;} return bound;}; this is how to use Js to implement Bind. I hope the above content can be helpful to you and learn more. If you think the article is good, you can share it for more people to see.

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.