Several important attributes in JavaScript (this, constructor, prototype)

This
This indicates the current object. If this is used globally, it indicates the current page Object window. If this is used in the function, this indicates what is called Based on the object on which the function is called at runtime. We can also use the apply and call global methods to change the specific point of this in the function.
First, let's look at an example of using this in the global scope: Copy codeThe Code is as follows: <script type =>
Console. log (=== window );
Console. log (window. alert ===. alert );
Console. log (. parseInt (, 10 ));
</Script>

This in a function is determined at runtime, rather than at function definition, as follows:Copy codeCode: foo (){
Console. log (. fruit );
}
Fruit =;
Foo ();
Pack = {
Fruit :,
Foo: foo
};
Pack. foo ();

The global functions apply and call can be used to change the point of this in the function, as follows:Copy codeCode: foo (){
Console. log (. fruit );
}
Fruit =;
Pack = {
Fruit:
};
Foo. apply (window );
Foo. apply (pack );

Note: The apply and call functions have the same functions. The only difference is that the parameter definitions of the two functions are different..
Because functions in JavaScript are also objects, we can see the following interesting example:Copy codeCode: foo (){
(=== Window ){
Console. log ();
}
}
Foo. boo = (){
(=== Foo ){
Console. log ();
} (=== Window ){
Console. log ();
}
};
Foo ();
Foo. boo ();
Foo. boo. apply (window );

Prototype
Prototype is essentially a JavaScript Object. Each function has a default prototype attribute.
If this function is used to create a custom object, we call it a constructor. For example, the following simple scenario:Copy codeThe Code is as follows: Person (name ){
. Name = name;
}
Person. prototype = {
GetName :(){
. Name;
}
}
Zhang = Person ();
Console. log (zhang. getName ());

As an analogy, we consider the data types in JavaScript, such as String, Number, Array, Object, and Date. We have reason to believe that these types are implemented as constructors in JavaScript, such:
Array (){
}
Arr1 = Array (1, 56, 34, 12 );
Arr2 = [1, 56, 34, 12];
At the same time, many methods for Array Operations (such as concat, join, and push) should also be defined in the prototype attribute.
In fact, all the inherent Data Types in JavaScript have the read-only prototype attribute (this is understandable: If you modify the prototype attribute of these types, but we can add our own extension method to it.
Array. prototype. min = (){
Min = [0];
(I = 1; I <. length; I ++ ){
([I] <min ){
Min = [I];
}
}
Min;
};
Console. log ([1, 56, 34, 12]. min ());
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 following code illustrates this (assuming that the min method has been extended to the Array prototype ):
Arr = [1, 56, 34, 12];
Total = 0;
(I arr ){
Total + = parseInt (arr [I], 10 );
}
Console. log (total );
The solution is also simple:
Arr = [1, 56, 34, 12];
Total = 0;
(I arr ){
(Arr. hasOwnProperty (I )){
Total + = parseInt (arr [I], 10 );
}
}
Console. log (total );
Constructor
Constructor always points to the constructor that creates the current object. For example:Copy codeThe Code is as follows: arr = [1, 56, 34, 12];
Console. log (arr. constructor === Array );
Foo = (){};
Console. log (Foo. constructor === Function );
Obj = Foo ();
Console. log (obj. constructor === Foo );
Console. log (obj. constructor. constructor === Function );

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:Copy codeThe Code is as follows: Person (name ){
. Name = name;
};
Person. prototype. getName = (){
. Name;
};
P = Person ();
Console. log (p. constructor === Person );
Console. log (Person. prototype. constructor = Person );
Console. log (p. constructor. prototype. constructor = Person );

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:Copy codeThe Code is as follows: Person (name ){
. Name = name;
};
Person. prototype = {
GetName :(){
. Name;
}
};
P = Person ();
Console. log (p. constructor === Person );
Console. log (Person. prototype. constructor = Person );
Console. log (p. constructor. prototype. constructor = Person );

Why?
It turns out that when people. prototype is overwritten, it is equivalent to performing the following code operations:Copy codeThe Code is as follows: Person. prototype = Object ({
GetName :(){
. Name;
}
});

Constructor always points to the creation of its own constructor, so at this time Person. prototype. constructor = Object, that is:Copy codeThe Code is as follows: Person (name ){
. Name = name;
};
Person. prototype = {
GetName :(){
. Name;
}
};
P = Person ();
Console. log (p. constructor === Object );
Console. log (Person. prototype. constructor = Object );
Console. log (p. constructor. prototype. constructor === Object );

How can we fix this problem? The method is also very simple. Just overwrite Person. prototype. constructor again:Copy codeThe Code is as follows: Person (name ){
. Name = name;
};
Person. prototype = Object ({
GetName :(){
. Name;
}
});
Person. prototype. constructor = Person;
P = Person ();
Console. log (p. constructor === Person );
Console. log (Person. prototype. constructor = Person );
Console. log (p. constructor. prototype. constructor = Person );