I recognize the JavaScript function call

Today is just Saturday nothing, and because of the cause of the work caused by waking up in the morning can not sleep, bored, think of the JS function call problem. Of course, the web is also a few things on JavaScript, but I think it is necessary to put their own ideas out, although there is nothing good, gossip short, now start JS function call parsing. Finally, if there is anything wrong or incomplete, please give me a lot of advice.

OK, the text begins:

Although the browser is multi-threaded, but the JS engine in the browser is an event-driven single-threaded operation mode, that is, the JS engine will only sequentially from the task list to take the task. When a function is called in JS, the execution of the current function is paused, complete control and parameters are given to the new function, except that the parameter is passed (if the actual parameter does not match the number of parameters, the actual argument overflows, it is not displayed in the called function, but can be removed by arguments; The corresponding parameter in the called function is undefined), and two additional parameters, this and arguments, are appended. This is very important in object-oriented programming, it is in the JS function call, decided in what way to call the function, speaking of this, I seem to forget to say that the function of several methods of invocation.

There are about 4 function calls:

1. method invocation mode;

2. Function call mode

3. constructor invocation mode;

4.apply/call/bind Call pattern

method Invocation Pattern : When a function is saved as a property of an object, we call it a method, and when this method is called, this points to the object where the current method resides;

    varMyobjectmethod ={method:function(isparameters) {if(isparameters) {return  This. property= "Porpertychange"; }            Else{                return  This. property; }}, Porperty:"Startcall"} myobjectmethod.method ();//myobjectmethod.porperty = "Startcall";Myobjectmethod.method (true);//myobjectmethod.porperty = "Porpertychange";

The This method refers to the object where the method is located, and can be used to get/change the properties in the object, this pointer to the change is in the call, the method can be obtained through the This object is called public method;
function Call pattern : When a function is not a property of an object, then he is called as a function, this will point to the Global (window);

        varMyobjectfunction ={method:function(isparameters) {varMyFunction =function(){                    return  This. property= "Call";//thsi window                }                returnmyFunction (); }, Property:"Startcall"        }        DebuggerWindow.property= "Window.porperty"; Myobjectfunction.method (); //myobjectfunction.porperty = "Startcall"; window.property = "cal";

Of course, Myobjectfunction.property can be obtained by the scope/closure of the function:

        varMyobjectfunction ={method:function(isparameters) {varthat = This; varMyFunction =function(){                    //thsi window                    returnThat.property = "call";//That, myobjectfunction                }                returnmyFunction (); }, Property:"Startcall"} DEBUGGERC Window.property= "Window.porperty"; Myobjectfunction.method (); //Myobjectfunction.porperty = "call"; Window.property = "Window.porperty";

constructor Invocation Pattern : Inheritance is an important feature and concept in the OO language. In many OO languages, two types of inheritance are supported: interface inheritance and implementation inheritance. And JS is the same as the Imperial Palace prototype chain way to achieve inheritance. Called by means of new, at which point this is directed to the prototype of the function

        varMyobjectfunction ={method:function(isparameters) {varMyfunctionconstructor =function() {} MyFunctionConstructor.prototype.property= "MyFunction.prototype.property"; return NewMyfunctionconstructor (); }, Property:"Startcall"} window.property= "Window.porperty"; varresult = Myobjectfunction.method ();//result = Myfunction.prototype; myobjectfunction.porperty = "Startcall"; window.property = "Window.porperty" ;        //Result.property =myfunction.prototype.property

The above example is a bit confusing, not a good representation of the constructor invocation pattern

        Window.property = "Window.prperty";         var function (val) {            this property = val;  this, method.prototype        }        = "Method.prototype.property";         var New method ("Val"); // mymethod.property= "Val"; window.property= "Window.prperty";

I hope this example can make people understand one point;

Apply/call/bind Call pattern invocation mode :

The invocation of Apply/call/bind can change the point of this so that this points to the set object.

    varMyobjectfunction ={method:function(a,b,c) {return  This. property; }, Property:"Startcall"        }        varObject ={property:"Objectcall"        }        varresult = MyObjectFunction.method.apply (object,[1,2,3]); Result= MyObjectFunction.method.call (object,4,5,6); varMyFunction = MyObjectFunction.method.bind (object,7,8); MyFunction (9);

The difference between the Apply/call/bind calls:

The 1.apply/call call executes immediately, and bind is bound first and needs to be called manually;

2.apply is passed an array, and Call/bind is the value in turn;

3.bind can bind the passed parameters, or it can not bind parameters

Well, the function of the call here is finished, hoping to help you, no longer, but also look haihan, thank you.

I recognize the JavaScript function call