Summary of js function call Modes

Method call mode
When a function is saved as an attribute of an object and we call it a method of the object, this is bound to the object.
Copy codeThe Code is as follows:
Var myObject = {
Name: "myObject ",
Value: 0,
Increment: function (num ){
This. value + = typeof (num) = 'number '? Num: 0;
},
ToString: function (){
Return '[Object:' + this. name + '{value:' + this. value + '}]';
}
}
Alert (myObject); // [Object: myObject {value: 0}]

Function call mode
When a function is not an object function, it is called as a function. this is bound to a global object. This is a language design error. If the language is correctly designed, this should still be bound to the this variable of the external function when calling the internal function. For example:
Copy codeThe Code is as follows:
Var myObject = {
Name: "myObject ",
Value: 0,
Increment: function (num ){
This. value + = typeof (num) = 'number '? Num: 0;
},
ToString: function (){
Return '[Object:' + this. name + '{value:' + this. value + '}]';
},
GetInfo: function (){
Return (function (){
Return this. toString (); // In the internal anonymous function, this points to the Global Object window.
})();
}
}
Alert (myObject. getInfo (); // [object Window]

Fortunately, there is an easy solution: Define a variable and assign it a value of this, then the internal function accesses this pointing to the object through the variable, such:
Copy codeThe Code is as follows:
Var myObject = {
Name: "myObject ",
Value: 0,
Increment: function (num ){
This. value + = typeof (num) = 'number '? Num: 0;
},
ToString: function (){
Return '[Object:' + this. name + '{value:' + this. value + '}]';
},
GetInfo: function (){
Var self = this;
Return (function (){
Return self. toString (); // point to the myObject object through the variable self
})();
}
}
Alert (myObject. getInfo (); // [Object: myObject {value: 0}]

Constructor call mode
JavaScript is a prototype-based language. This means that the object can directly inherit attributes from other objects. The language is classless.
If a function is called with new in front of it, a new object hidden from the prototype member of the function will be created, and this will be bound to the constructor instance.
Copy codeThe Code is as follows:
Function MyObject (name ){
This. name = name | 'myobject ';
This. value = 0;
This. increment = function (num ){
This. value + = typeof (num) = 'number '? Num: 0;
};
This. toString = function (){
Return '[Object:' + this. name + '{value:' + this. value + '}]';
}
This.tar get = this;
}
MyObject. prototype. getInfo = function (){
Return this. toString ();
}
/*
Create a MyObject. prototype object. myObject inherits all attributes of MyObject. prototype,
This is bound to the instance of MyObject.
*/
Var myObject = new MyObject ();
Var otherObject = new MyObject ();
// Alert(myObject.tar get === myObject); // ture
// Alert(myObject.tar get. getInfo (); // [Object: MyObject {value: 0}]
MyObject. increment (10 );
OtherObject. increment (20 );
Alert (myObject. value); // 10
Alert (otherObject. value); // 20

Apply call mode
JavaScript is a functional object-oriented programming language, so functions can have methods.
The apply method of the function, as if the object has this method, so that the object has this method. This points to this object.
Apply receives two parameters. The first is the object to be bound (the object pointed to by this), and the second is the parameter array.
Copy codeThe Code is as follows:
Function MyObject (name ){
This. name = name | 'myobject ';
This. value = 0;
This. increment = function (num ){
This. value + = typeof (num) = 'number '? Num: 0;
};
This. toString = function (){
Return '[Object:' + this. name + '{value:' + this. value + '}]';
}
This.tar get = this;
}
Function getInfo (){
Return this. toString ();
}
Var myObj = new MyObject ();
Alert (getInfo. apply (myObj); // [Object: MyObject {value: 0}], this points to myObj
Alert (getInfo. apply (window); // [object Window], this points to window