Js function call mode

Source: Internet
Author: User
1. method call Mode 2. function call mode 3. constructor call mode 4. the Apply call mode has four call modes in javascript: method call mode, function call mode, constructor call mode, and apply call mode. These modes differ in how to initialize the key parameter this... SyntaxHighlighter. all ();

1. method call mode
2. function call mode
3. constructor call mode
4. Apply call mode

There are four call modes in javascript: method call mode, function call mode, constructor call mode, and apply call mode. These modes differ in how key parameters such as this are initialized.

1. 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.
The 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}]

2. 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:
The Code is as follows: www.2cto.com

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:
The 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}]

3. 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.
The 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

4. 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.
The 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.