Understanding of this, prototype, and constructor in Javascript

Http://blog.163.com/wish4sun@126/blog/static/1438006652011312119516/

In JavaScript object-oriented programming, we often see these three keywords:This, prototype, constructor.
Understanding these three keywords is the key point of understanding JavaScript object-oriented programming.

 

1. First, let's say "this ":
1. This indicates the current object;
2. If this is used in the global scope, it indicates the current page Object window;
3. If this is used in a function, this indicates what is called Based on the object on which the function is called at runtime.
4. We can also use the apply and call global methods to change the specific point of this in the function.

Check the firebug console?

// Define a global function Foo () {console. log (this. fruit);} // defines a global variable, which is equivalent to window. fruit = "apple"; var fruit = "apple"; // In this case, the function Foo points to the window object. // This call method and window. foo (); is a fully equivalent Foo (); // "apple" // custom object, and direct the property Foo of this object to the global function Foo var pack = {fruit: "orange", foo: Foo}; // in this case, this in function Foo points to window. pack object pack. foo (); // "orange" Next let's see how apply and call change the point of this. // define a global function Foo () {console. log (this. fruit);} // defines a global variable VAR fruit = "apple"; // customizes an object var pack = {fruit: "orange"}; // equivalent to window. foo (); Foo. apply (window); // "apple" // This in Foo = pack Foo. apply (pack); // "orange" because the function in Javascript is also an object, we can see the following example // define a global function Foo () {If (this = Window) {console. log ("this is window. ") ;}} // The function foo is also an object, so you can define the boo attribute of Foo as a function Foo. boo = function () {If (this = Foo) {console. log ("this is foo. ");} else {If (this = Window) {console. log ("this is window. ") ;}}; // equivalent to window. foo (); // This is window. // you can see that this in the function points to the object foo that calls the function. boo (); // This is foo. // use apply to change the point of this in the function to foo. boo. apply (window); // This is window.

 

 

2. What is prototype)

1. prototype is essentially a JavaScript Object;

2. Each function has a default prototype attribute;

3. With prototype, we can extend the built-in JavaScript objects.

If this function is used to create a custom object, we call it a constructor. For example:

 

 
// Constructor function person (name) {This. name = Name;} // defines the prototype of person. attributes in the prototype can be referenced by custom objects. prototype = {getname: function () {returnthis. name ;}}; var Zhang = new person ("zhangsan"); console. log (Zhang. getname (); // "zhangsan" we can use prototype to extend the built-in JavaScript objects. For example,: // extend a method array to obtain the minimum value to the array of the inherent JavaScript type. prototype. min = function () {var min = This [0]; for (VAR I = 1; I <this. length; I ++) {If (this [I] <min) {min = This [I] ;}} return min ;}; // call the min method console on any array instance. log ([1, 56, 34, 12]. min (); // 1
 

 

 

Note: There is a trap. After adding an extension method to the array prototype, this extension method will also be recycled when the for-in loop array is used.

The followingCodeNote This (assuming that the min method has been extended to the array prototype ):

 

 
VaR arr = [1, 56, 34, 12]; var Total = 0; For (var I in ARR) {total + = parseint (ARR [I], 10 );} console. log (total); // The Nan solution is also simple: var arr = [1, 56, 34, 12]; var Total = 0; For (var I in ARR) {If (ARR. hasownproperty (I) {total + = parseint (ARR [I], 10) ;}} console. logs (total); // 103
 

 

 

3. Constructor)

1. constructor always points to the constructor that creates the current object.
2. Each function has a default prototype attribute, and the constructor of this prototype points to this function by default.

Let's look at an example:

 

// Equivalent to VaR arr = new array (1, 56, 34, 12); var arr = [1, 56, 34, 12]; console. log (ARR. constructor = array); // true // equivalent to VaR Foo = new function (); var Foo = function () {}; console. log (FOO. constructor = function); // true // The constructor instantiates an OBJ object var OBJ = new Foo (); console. log (obj. constructor = Foo); // true // combine the above two sections of code to obtain the following conclusion console. log (obj. constructor. constructor === function); // true
 

 

But when constructor encounters prototype, interesting things happen.
We know that each function has a default prototype attribute, and the constructor of this prototype points to this function by default. For example:

 

Function person (name) {This. name = Name;} person. prototype. getname = function () {return this. name ;}; var P = new person ("zhangsan"); console. log (P. constructor = person); // true console. log (person. prototype. constructor = person); // true // merge the above two lines of code to obtain the following result console. log (P. constructor. prototype. constructor = person); // true
 

 

At that time, when we re-define the prototype of the function (note: the difference from the previous example is that it is not modified but overwritten), the behavior of the constructor is a bit strange, as shown in the following example.

 

Function person (name) {This. name = Name;} person. prototype = {getname: function () {returnthis. name ;}}; var P = new person ("zhangsan"); console. log (P. constructor = person); // false console. log (person. prototype. constructor = person); // false console. log (P. constructor. prototype. constructor = person); // false why? It turns out that when people. prototype is overwritten, it is equivalent to performing the following code operations: person. Prototype = new object ({getname: function () {returnthis. Name ;}});
 

 

Constructor always points to the creation of its own constructor, so at this time person. Prototype. constructor = Object

How can we fix this problem? The method is also very simple. Just overwrite person. Prototype. constructor again:

 

Function person (name) {This. name = Name;} person. prototype = new object ({getname: function () {returnthis. name ;}}); person. prototype. constructor = person; var P = new person ("zhangsan"); console. log (P. constructor = person); // true console. log (person. prototype. constructor = person); // true console. log (P. constructor. prototype. constructor = person); // true
 

Finally we recommend two blog: http://www.csharpwin.com/dotnetspace/13145r8306.shtml this blog handed us a way, want to know more, can be through tracking!

Http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930548.html