JavaScript construction and inheritance detail code

Source: Internet
Author: User
Tags constructor ibase inheritance


<script>
Define the user object for JS
function User (Name,age) {
This.name=name,
This.age=age,
This.getname=function () {
return this.name;
},
This.getage=function () {
return this.age;
}
}
Instantiating an Object
var use=new user ("AA", 21);
alert (use.name);
Alert (Use.getage ());
JS Object inheritance
/*
111cn.net in the Object-oriented programming method, object inheritance is essential, so how to implement the inheritance mechanism in the web effects. Since JavaScript is not a strict object-oriented language, it is also significantly different in object inheritance. We also create a base class polygon that represents a polygon, and a polygon has a common attribute that is the number of edges (sides) and a common method for calculating the area (Getareas). So our polygon class looks like the following definition:
*/
function Polygon (isides) {
This.sides = Isides;
}
Polygon.prototype.getareas = function () {
return 0;
}
/*
Because the base class does not determine the area, so here we return to 0.
We then create a subclass triangle, a triangle, which obviously inherits from the polygon, so we want this triangle class to inherit the polygon class, and to overwrite the Getareas method of the Polygon class to return the area of the triangle. Let's look at the implementation in JavaScript:
*/
Function triangle (IBase, iheight) {
Polygon.call (this,3); Here we use Polygon.call () to invoke the polygon constructor and use 3 as a parameter to indicate that this is a triangle, because the edges are OK, so there is no need to specify the edges in the constructor of the subclass.
This.base = IBase; The bottom of a triangle
This.height = iheight; The height of the triangle
}
Triangle.prototype = new Polygon ();
Triangle.prototype.getareas = function () {
Return 0.5 * This.base *this.height; Overrides the Getareas method of the base class, returning the area of the triangle
}

/*
Referring to the above implementation, we define a rectangle:
*/
function Rectangle (iwidth, iheight) {
Polygon.call (this,4);
This.width = iwidth;
This.height = iheight;
}
Rectangle.prototype = new Polygon ();
Rectangle.prototype.getareas = function () {
return this.width * this.height;
}
/*
OK, so here we've defined a base class and two numbers, and we're going to test whether one of these two subclasses works:
*/
var t = new triangle (3,6);
var r = new Rectangle (4,5);
Alert (T.getareas ()); Output 9 indicates the correct
Alert (R.getareas ()); Output 20 indicates the correct
</script>

The constructor has the following two attributes, the essence of which is still the JavaScript function:

It is called by the new operator

Passed to it is a reference to the newly created empty object, as the value of this keyword, and it also has to initialize the newly created object appropriately

Defines the constructor,
function User (Name,age)
{
THIS.name = name;
This.age = age;
}

Instantiating two objects
var simaopig = new User (' Simaopig ', ' 25 ');
var Xiaoxiaozi = new User (' Xiaoxiaozi ', ' 25 ');

Classes and inheritance in pseudo-javascript
In object-oriented languages, we use classes to create a custom object. While everything in JavaScript is an object, what is the way to create a custom object?

This requires the introduction of another concept-prototype (prototype), we can simply think of prototype as a template, the newly created custom object is a copy of this template (prototype) (actually not a copy but a link, except that the link is not visible, It feels like a copy to the people.

Let's take a look at an example of creating a custom object through prototype:

//constructor
   function person (name, sex) {
       this.name = name;
& nbsp;      this.sex = sex;
  }
  //define the prototype of person, the attributes in the prototype can be referenced by the custom object
   person.prototype = {
    & nbsp;  getname:function () {
           return this.name;
      },
       getsex:function () {
            return this.sex;
      }
  }
  
Here we call the function person the constructor, which is the function that creates the custom object. As you can see, JavaScript simulates the functionality of a class by constructing functions and prototypes.
code to create a custom object (instantiated Class):


var Zhang = new person ("Zhangsan", "Mans");
Console.log (Zhang.getname ()); "Zhangsan"
var chun = new Person ("Chunhua", "Woman");
Console.log (Chun.getname ()); "Chunhua"


How do I implement simple inheritance in JavaScript?
The following example creates an employee class employee that inherits all the attributes from the prototype prototype from person.


function employee (name, sex, EmployeeID) {
THIS.name = name;
This.sex = sex;
This.employeeid = EmployeeID;
}
Point the employee's prototype to an instance of person
Because instances of person can invoke methods in the person prototype, instances of employee can also invoke all attributes in the person prototype.
Employee.prototype = new Person ();
Employee.prototype.getemployeeid = function () {
return This.employeeid;
};
var Zhang = new Employee ("Zhangsan", "Man", "1234");
Console.log (Zhang.getname ()); "Zhangsan

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.