"One of Javascript supplements" apply and call functions

When it comes to web front-end development, many engineers feel that nothing can be html/css/javascript, but in the Javascript language, we still have a lot of unfamiliar and unfamiliar problems, three years front-end development I encountered a lot of weaknesses in the recent interview. Therefore, determined to delve into the core of the front-end knowledge, to achieve God's general realm. We start with JavaScript, HTML and CSS are markup language, but there are many features, will be discussed slowly.Apply and call functions 1, definition

Let's take a look at the API of these two functions in JavaScript,

void apply ([Thisobj[,argarray]])

Invokes a method of an object that assigns all the method properties of the current object to the object that the parameter 1 points to, such as a property or method that is directly overridden. ) and is entered as parameter 2 as multiple parameters.

The default value for Thisobj is the Global object window

void Call ([thisobj[,arg1[, Arg2[,[,argn]]])

The difference between call and apply is that the array of parameter 2 for apply is divided into multiple input parameters.

Try to understand the implementation of the code below and understand the definition in depth.

varPerson_no1 ={name:' Jiminy ', Age:30, Phone:123, fun:function() {alert ( This. Name); }}varPerson_no2 ={name:' John ', Age:25, Phone:123}person_no1.fun.call ( This);//undefinedPerson_no1.fun.call (PERSON_NO1);//JiminyPerson_no1.fun.call (PERSON_NO2);//John

2. Application-callback function

When we encapsulate some controls, we usually need some methods to execute after some operations, and we can use call or apply to go back and forth another method.

1 functionA (name) {2      This. Name =name; 3      This. ShowName =function(a) {4Alert This. Name);5 alert (a);6     }      7 }      8     9 functionB (name) {TenConsole.warn ( This); One      This. Name = ' CCCCC '; A      This. Alertname =function(){ -Alert This. Name); -     } the      This. ShowName =function(){ -Alert (' Ttttt '); -     } -     varA =NewA (' QQQ '); +     // Call Back -A.showname.call ( This, ' X '); +     //equal = A.showname.apply (this, [' X ']); A }       atB ("I ' m B"); - //CCCCC - //x

In the code example:

Replace the A.showname object with the current object window and invoke the anonymous function directly, alert (window.name)//CCCCC

function A, B are all functions of the Window object.

-Inheritance

1functionA (name) {2THIS.name =Name3This.showname =function(){4 Alert (This. name);5}6}78functionB (name) {9this.name = ' CCCCC ';10This.alertname =function(){Alert (This. name);12}13This.showname =function(){Alert (' Ttttt ');15}16//After executing this statement17//The function B becomes functions B () {18//THIS.name = name;19//This.showname = function () {20//alert (this.name);21st//}22//This.alertname = function () {23//alert (this.name);24//}25//}A.call (This, name);27// equal = A.apply (this, [name]); 28  29 30 var a = new A ("I ' m a" ); 31 a.showname (); //i ' m a32 var B = new B ("I ' m b" 33 b.showname (); //i ' m b34 B.alertname ( ); //i ' m B        

In the code example:

b inherits all the properties and methods of A through A.call (this, name), and overrides the same properties and methods!

-Multiple inheritance

Similar to single inheritance, you can try to write a bit.

-Method parameter to array

We often see code like Array.prototype.slice.call (arguments) in some open-source frameworks,arguments is a default property within the method, an object type, Include parameter list

such as

0:PARAM1,

1:PARAM2,

....

Length:n

}

This can be assigned to the Array.slice method by calling the Array.prototype.slice.call() method, since JS calls arrays and objects Array[index] and Object[index] The result is the same, so you can also use this method to enter an object that contains the length property.

functionTest (A, B, c) {alert (Array.prototype.slice.call (arguments));} Array.prototype.slice=function(start,end) {varresult =NewArray (); Start= Start | | 0; End= End | | This. Length;  for(vari = start; I < end; i++) {Result.push ( This[i]); }    returnresult;} Test (' x ', ' y ', ' z ');//Object Array Arguments usageAlert (Array.prototype.slice.call ([' X ', ' y ', ' z ']);//Source ArrayAlert (Array.prototype.slice.call (' xyz '));//Array of stringsAlert (Array.prototype.slice.call ({0: ' x ', 1: ' Y ', 2: ' Z ', Length:3}));//Object Array//x, y//x, y//x, y//x, y

3. Summary

This article briefly introduces several application and call applications, is my experience and reference to other information obtained, in the actual development, there are many skills, need to be flexible application, I hope that we can thoroughly understand the definition of function, blending through, in the structured code and skillfully

Using these methods makes the code beautiful and concise.

4. References

http://uule.iteye.com/blog/1158829

"One of Javascript supplements" apply and call functions