Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve simple inheritance in JavaScript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve simple inheritance in JavaScript".

Object-oriented and object-based

Almost every developer has experience in developing object-oriented languages such as C++, C#, Java. In traditional object-oriented languages, there are two very important concepts-classes and instances. A class defines the behaviors and methods common to a class of things; an example is a concrete implementation of the class. We also know that object-oriented programming has three important concepts-encapsulation, inheritance, and polymorphism.

But in the world of JavaScript, none of these features seem to exist. Because JavaScript itself is not an object-oriented language, but an object-based language. There are some interesting features, such as everything in JavaScript is an object, including strings, arrays, dates, numbers, and even functions, such as the following example:

/ / define a function-add function add (a, b) {add.invokeTimes++; return a + b;} / / because the function itself is also an object. Here, an attribute is defined for the function add, which is used to record the number of times this function is called add.invokeTimes = 0; add (1 + 1); add (2 + 3); console.log (add.invokeTimes); / / 2

Simulate classes and inheritance in JavaScript

In object-oriented languages, we use classes to create a custom object. However, everything in JavaScript is an object, so what is the way to create a custom object?

This requires the introduction of another concept-prototype, we can simply think of prototype as a template, and the newly created custom objects are all copies of the template (prototype) (actually not a copy but a link, but the link is invisible and feels like a copy).

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

/ / the constructor function Person (name, sex) {this.name = name; this.sex = sex;} / / defines the prototype of Person. The properties in the prototype can be referenced by custom objects Person.prototype = {getName: function () {return this.name;}, getSex: function () {return this.sex;}}

Here we call the function Person a constructor, that is, a function that creates a custom object. As you can see, JavaScript simulates the function of the class through constructors and prototypes.

Code to create a custom object (instantiated class):

Var zhang = new Person ("ZhangSan", "man"); console.log (zhang.getName ()); / / "ZhangSan" var chun = new Person ("ChunHua", "woman"); console.log (chun.getName ()); / / "ChunHua"

When the code var zhang = new Person ("ZhangSan", "man") executes, the following things are actually done internally:

◆ creates a blank object (new Object ()).

◆ copies the attributes (key-value pairs) from Person.prototype into this empty object (as we mentioned earlier, the internal implementation is not a copy but a hidden link).

◆ passes this object to the constructor through the this keyword and executes the constructor.

◆ assigns this object to the variable zhang.

To prove that the prototype template is not copied into the instantiated object, but as a way of linking, take a look at the following code:

Function Person (name, sex) {this.name = name; this.sex = sex;} Person.prototype.age = 20; var zhang = new Person ("ZhangSan", "man"); console.log (zhang.age); / / 20 / / override age attribute zhang.age = 19 in prototype; console.log (zhang.age); / / 19 delete zhang.age / / after deleting the instance property age, the value of this property gets console.log (zhang.age) from prototype; / / 20

This hidden prototype link implemented within JavaScript is not only the warm soil for JavaScript to survive, but also the basis for simulation to achieve inheritance.

How to implement simple inheritance in JavaScript?

The following example creates an employee class Employee that inherits all the attributes in the prototype prototype from Person.

Function Employee (name, sex, employeeID) {this.name = name; this.sex = sex; this.employeeID = employeeID;} / / points the prototype of Employee to an instance of Person / / because the instance of Person can call methods in the Person prototype, the instance of Employee can also call all the properties 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 Thank you for your reading. The above is the content of" how to achieve simple inheritance in JavaScript ". After the study of this article, I believe you have a deeper understanding of how to achieve simple inheritance in JavaScript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.