Examples of methods and attributes inherited in JavaScript

Source: Internet
Author: User

Role of the prototype attribute:
The prototype attribute provides a set of basic functions of the object class. The new instance of the object "inherits" the operation that is granted to the object prototype.

Features of the prototype attribute:
All JavaScript internal objects have the read-only prototype attribute. You can add a function for the internal object prototype, but the object cannot be assigned a different prototype.
However, user-defined objects can be assigned to new prototypes.

Role of the constructor attribute:
Constructor indicates the function used to create an object.

Functions of the constructor attribute:
The constructor attribute is a member of all objects with prototype. They include all JavaScript internal objects except Global and Math objects.
The constructor attribute stores references to the functions used to construct a specific object instance.

A. Use prototype to add object attributes [method 1]
Example:Copy codeThe Code is as follows: <script type = "text/javascript">
// Method 1
Var myObj = function (){
This. study = "JavaScript ";
}
MyObj. prototype. holobby = function ()
{
This. holobby = "See girl ";
}
Var newObj = new myObj ();
For (var attr in newObj)
{
Document. write (attr + "<br/> ");
}
</Script>

B. Use prototype to add object attributes. [method 2]
Example:Copy codeThe Code is as follows: <script type = "text/javascript">
// Method 2
Var superObj = {name: "xugang "};
Var subObj = {age: 20 };
Function extend (superObj, subObj ){
// Obtain the prototype object of the parent object
SubObj. getSuper = superObj. prototype;
// Give the attributes of the parent object to the sub-Object
For (var I in superObj ){
SubObj [I] = superObj [I];
}
}
Extend (superObj, subObj );
For (var s in subObj)
{
Document. write (s + "<br/>"); // traverses attributes of sub-objects
}
</Script>

C uses prototype to inherit the prototype attributes of the parent class
Example:Copy codeThe Code is as follows: <script>
Function Person (_ name ){
This. name = _ name;
}
// Create an object (used to change the prototype object)
Function addSex (_ sex ){
This. sex = _ sex;
}
// Modify the prototype object
Person. prototype = new addSex ('male ');
Var p = new Person ('xugang ');
Alert ("p prototype:" + p. constructor );
// Print all attributes
For (var I in p ){
// Alert (p [I]);
}

// ============================= Inheritance ==========================
// Create the sub-object Student
Function Student (_ study ){
This. study = _ study;
}
// Use prototype to allow Student to inherit Person
Student. prototype = new Person ('andy Lau ');
Var stu1 = new Student ('js ');
Alert ("stu1 prototype:" + stu1.constructor );
For (var I in stu1 ){
Alert (stu1 [I]);
}
</Script>

Because the prototype of the Student object is changed to the Person object, and the prototype of the Person object is changed to addSex, the prototype of the Student object is addSex.
Note: The prototype of an object is determined at the moment of the new object. Changes after the new object are invalid!

D. How to set the prototype object and constructor of an object
Example:Copy codeThe Code is as follows: <script type = "text/javascript">
Function B (){
This. name = "Andy Lau ";
Return "B method ";
}
Function C (){
This. age = 42;
Return "C method ";
}
B. prototype = new C ();
Var B = new B ();
B. constructor = B; // rewrite the constructor's constructor to B.
Document. write ("B constructor :");
Document. write (B. constructor () + "<br/> ");
Document. write ("Construction Method of B's prototype object :");
Document. write (B. constructor. prototype. constructor () + "<br/> ");
For (var m in B)
{
Document. write ("Property:" + m );
Document. write ("value:" + B [m] + "<br/> ");
}
</Script>

The result is as follows:
Method B: Method B
Construction Method of the prototype object of B: C method
Property: age value: 42
Attribute: name value: Andy Lau

The _ proto _ variable used to save the prototype in the E object
Example:Copy codeThe Code is as follows: <script type = "text/javascript">
Function myObject (){}
Var my = new myObject ();
// Any object will have a hidden Variable _ proto _ to save the prototype.
Document. write (my. _ proto _ + "<br/> ");
// Displayed as undefined under Internet Explorer
// Display as: [object Object] in Mozilla Firefox

Function Person (){
This. name = "Andy Lau ";
Return "Person method ";
}
/*
After the method is defined, it is equivalent:
Person. prototype = {constructor: Person}
*/
// Modify the prototype object of the Person object
Function Super_Person (){
This. holobby = "singing ";
Return "Super_Person method ";
}
Person. prototype = new Super_Person ();
Var newObj = new Person ();
/* Create an object using new:
Var o = {};
Person. prototype. constructor. call (o );
O = {__ proto __: Person. prototype, name = "Andy Lau "};
Return o;
*/
Document. write (newObj. constructor. prototype. constructor () + "<br/> ");
// Print the newObj prototype object (invalid in IE !)
Document. write (newObj. _ proto _. constructor () + "<br/> ");
</Script>

The results in Firefox are as follows:
[Object Object]
Super_Person Method
Super_Person Method

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.