This Call,apply,bind method summary-chasing dream son

Why What's call,apply,bind doing? Why do you want to learn this?

This is typically used to specify the environment for this, which is usually the problem before it is learned.

var a = {    User: "Chasing the Dream",    fn:function () {        console.log (this.user);    }} var B = a.fn;b (); Undefined

We want to print the user in object A but print out what's going on with the undefined? If we directly execute A.fn () is possible.

var a = {    User: "Chasing the Dream",    fn:function () {        console.log (this.user);    }} A.fn (); Chasing the dream son

It is possible to print here because this is pointing to function A, so why doesn't it point to a? If we need to understand the point of this problem, please see a thorough understanding of JS in the direction of this, do not have to hard back this article.

Although this method can achieve our goal, but sometimes we have to save this object to another variable, then you can use the following methods.

1. Call ()

　　

var a = {    User: "Chasing the Dream",    fn:function () {        console.log (this.user);//Dream son    }}var b = A.fn;b.call (a);

By the call method, the first parameter is added to which environment to add B to, in a nutshell, this will point to that object.

The call method can add multiple parameters in addition to the first argument, as follows:

var a = {    User: "Chasing Dream Son",    fn:function (e,ee) {        console.log (this.user);//Dream        Console.log (e+ee);//3    }} var B = A.fn;b.call (a,1,2);

2. Apply ()

The Apply method is somewhat similar to the call method, and it can also change the point of this

var a = {    User: "Chasing the Dream",    fn:function () {        console.log (this.user);//Dream son    }}var b = a.fn;b.apply (a);

The same applies can have multiple parameters, but the difference is that the second parameter must be an array, as follows:

var a = {    User: "Chasing Dream Son",    fn:function (e,ee) {        console.log (this.user);//Dream        Console.log (e+ee);//11    }}var B = a.fn;b.apply (a,[10,1]);

Or

var a = {    User: "Chasing Dream Son",    fn:function (e,ee) {        console.log (this.user);//Dream        Console.log (e+ee);//520    }} var b = A.fn;var arr = [500,20];b.apply (A,arr);

Note If the first argument to call and apply is NULL, then this refers to the Window object

var a = {    User: "Chasing the Dream",    fn:function () {        console.log (this);//window {external:object, Chrome:object, Document:document, A:object, Speechsynthesis:speechsynthesis ...}}    var b = a.fn;b.apply (null);

3. Bind ()

The Bind method is somewhat different from the call and apply methods, but they can be used to change the point of this anyway.

Let's talk about their differences first.

var a = {    User: "Chasing the Dream",    fn:function () {        console.log (this.user);    }} var B = A.fn;b.bind (a);

We found that the code was not printed, yes, that's the difference between bind and call, the Apply method, and the Bind method actually returns a modified function.

var a = {    User: "Chasing the Dream",    fn:function () {        console.log (this.user);    }} var b = A.fn;var C = B.bind (a); Console.log (c); function () {[native code]}

So let's run the function C and see if we can print out the user in object A.

var a = {    User: "Chasing the Dream",    fn:function () {        console.log (this.user);//Dream son    }}var b = A.fn;var c = B.bind (a); C ();

OK, the same bind can have multiple parameters, and the parameters can be executed again when added, but note that the parameters are in the order of the formal parameter.

var a = {    User: "Chasing the Dream",    fn:function (e,d,f) {        console.log (this.user);//Dream        Console.log (e,d,f);//10 1 2    }} var b = A.fn;var C = b.bind (a,10); C (n);

Summary: Call and apply are changes in the context of this and immediately execute this function, the bind method can let the corresponding function when it is called when the calling, and the parameters can be added at the time of execution, this is their difference, according to their actual situation to choose to use.

This Call,apply,bind method summary-chasing dream son