Inheritance in JavaScript-javascript tutorial

Source: Internet
Author: User
Inheritance in JS is a very complex topic and is much more complex than any other object-oriented language. Next, I will introduce the inheritance in JavaScript through this article. If you are interested, let's take a look. Introduction to inheritance

Inheritance in JS is a very complex topic and is much more complex than any other object-oriented language. In most other object-oriented languages, only one keyword is required to inherit a class. To Inherit public members in JS, a series of measures are required. JS belongs to the original type inheritance. Thanks to this flexibility, we can either use standard class-based inheritance or use more subtle original type inheritance. In JavaScript, it should be clear that all inheritance is carried out through prototype, and JS is inherited based on objects.

Inheritance:

function Animal(name){ this.name = name; this.showName = function(){ alert(this.name); } } function Cat(name){ Animal.call(this, name); } var cat = new Cat("Black Cat"); cat.showName();

Animal. call (this) means that the Animal object is used to replace this object, so does Cat have all the attributes and methods of Animal, the Cat object can directly call the Animal method and attributes.

Multi-inheritance:

function Class10() { this.showSub = function(a,b) { alert(a-b); } } function Class11() { this.showAdd = function(a,b) { alert(a+b); } } function Class2() { Class10.call(this); Class11.call(this); }

It's easy to implement multi-inheritance with two calls.

Of course, there are other methods to inherit js, such as using prototype chain. This does not belong to the scope of this article, but only describes the usage of call here. When we talk about call and apply, the two methods basically mean that the second parameter of call can be of any type, and the second parameter of apply must be an array, it can also be arguments.

The following describes how to implement simple inheritance in JavaScript?

The following example creates an Employee class, which inherits all attributes in prototype from Person.

Function Employee (name, sex, employeeID) {this. name = name; this. sex = sex; this. employeeID = employeeID;} // point the prototype of the Employee to an instance of the Person. // because the Person instance can call the method in the Person prototype, therefore, the Employee instance can also call all attributes in the Person prototype. Employee. prototype = new Person (); Employee. prototype. getEmployeeID = function () {return this. employeeID;}; var zhang = new Employee ("ZhangSan", "man", ""); console. log (zhang. getName (); // "ZhangSan

The inheritance implementation above is rough and has many problems:

It is not appropriate to instantiate the Person when creating the Employee constructor and prototype (hereinafter referred to as the class.

The constructor of the Employee class cannot call the constructor of the parent class Person, causing repeated value assignment to the name and sex attributes in the Employee constructor.

The functions in Employee override the functions with the same name in Person, and there is no overload mechanism (which is a type problem with the previous one ).

The syntax for creating JavaScript classes is too fragmented and not as elegant as that in C #/Java.

An error occurred while pointing to the constructor attribute in the implementation.

The above is the content of the inherited _ JavaScript Technique in javascript. For more information, see the PHP Chinese website (www.php1.cn )!

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.