Several important attributes in JavaScript (this, constructor, prototype) Introduction _ Basics

Source: Internet
Author: User
Tags pack
This
This represents the current object that refers to the current Page Object window if it is used globally, and if this is used in a function, this refers to what is invoked on the object based on this function at run time. We can also use apply and call two global methods to change the specific point of this in the function.
Let's look at an example of using this in a global scope:
Copy Code code as follows:

<script type=>
Console.log (= = = window);
Console.log (Window.alert = = =. Alert);
Console.log (. parseint (, 10));
</script>

The This in the function is determined at run time, not when the function is defined, as follows:
Copy Code code as follows:

Foo () {
Console.log (. Fruit);
}
Fruit =;
Foo ();
Pack = {
Fruit:,
Foo:foo
};
Pack.foo ();

Global functions apply and call can be used to change the direction of this in a function, as follows:
Copy Code code as follows:

Foo () {
Console.log (. Fruit);
}
Fruit =;
Pack = {
Fruit
};
foo.apply (window);
Foo.apply (Pack);

Note: Apply and call two functions have the same function, the only difference is that the parameters of the two functions are defined differently
Because functions are also objects in JavaScript, we can see the following interesting examples:
Copy Code code as follows:

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. And each function has a default prototype property.
If this function is used in a scene that creates a custom object, we call this function a constructor. For example, here's a simple scenario:
Copy Code code as follows:

Person (name) {
. name = name;
}
Person.prototype = {
GetName: () {
. Name;
}
}
Zhang = person ();
Console.log (Zhang.getname ());

As an analogy, consider the data types in JavaScript-strings, numbers, arrays (array), objects (object), dates (date), and so on. We have reason to believe that these types are implemented as constructors within JavaScript, such as:
Array () {
}
ARR1 = Array (1, 56, 34, 12);
ARR2 = [1, 56, 34, 12];
Many of the methods (such as Concat, join, push) of an array operation should also be defined in the prototype attribute.
In fact, all of the intrinsic data types of JavaScript have read-only prototype attributes (this is understandable: because if these types of prototype properties are modified, which predefined methods disappear), we can add our own extension methods to them.
Array.prototype.min = () {
min = [0];
(i = 1; i < length; i++) {
([i] < min) {
Min = [i];
}
}
Min
};
Console.log ([1, 12].min ());
Note: There is a trap to add an extension method to the array's prototype, and the extension method is also 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's 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, the following example:
Copy Code code 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 met prototype, something interesting happened.
We know that each function has a default attribute prototype, and this prototype constructor the default point to this function. As shown in the following example:
Copy Code code 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);

When we redefined the prototype of a function (note: The difference between this and the previous example is not a modification but a overwrite), constructor's behavior is a bit strange, as follows:
Copy Code code 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, then?
It turns out that overwriting person.prototype is equivalent to doing the following code:
Copy Code code as follows:

Person.prototype = Object ({
GetName: () {
. Name;
}
});

and constructor always point to the constructor that created itself, so Person.prototype.constructor = = = Object At this point, that is:
Copy Code code 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 to fix this problem? The method is also very simple, the Person.prototype.constructor can be overwritten again:
Copy Code code 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);
Related Article

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.