JavaScript Object-Oriented Programming (5) class

Class is one of the core concepts of object-oriented programming. A class represents the abstraction of a category of things with similar attributes. Starting with this article, we will formally enter the object-oriented part of JavaScript. The first thing to note is that there is no "class" keyword in JavaScript--In most languages, class is used as the keyword. So, the class here becomes a concept, it has no explicit grammatical mark.

1. Classes and constructors

As I said earlier, there is no explicit class concept in JavaScript. In fact, we're giving just the constructor of the class. The constructor of a class forms the entire contents of this class. Since it is called a constructor, it is also a normal function, and there is no difference. So, we can easily define a constructor:

function Person(name, age) {
　this.name = name;
　this.age = age;
　this.show = function() {
　　alert("Hello, my name is " + this.name + ", my age is " + this.age);
　};
}

Here, we define a class person, which has two attributes: name and age; There is a way: show. It looks like the definition of classes in other languages is no different. In fact, the biggest difference here is in this keyword function. We defined a class by using the method of defining a function.

2.new

After defining the class, you need to create an object for the class. As with other languages, JavaScript also uses the new operator to create objects. The specific code is as follows:

var bill = new Person("Bill", 30);
alert(bill.name);
alert(bill["age"]);
bill.show();

Here, use new to create an object for the person class. Like other languages, after new is the constructor for the class. When you create an object, you can use. or [] to access the property, as mentioned in the previous section.

Notice that the constructor here is a normal function, so is it possible for all functions to use the new operator? The answer is yes. So what exactly does this new operator do?

When you use the new operator, JavaScript first creates an empty object and then initializes the object. What do you use to initialize it? Of course, that's the constructor you called. Finally, this created object is returned to the caller, so we can use the object.

3.prototype

Prototype is the meaning of the archetype. In JavaScript, each object has a prototype attribute. This property points to a prototype object. This is the concept of prototype properties and prototype objects.

Each object has a prototype property, the constructor is a normal function, and the function is an object, so the constructor also has a prototype property. Each prototype object has a constructor attribute, and the constructor property of the prototype object points to the constructor itself that contains the prototype property. In other words, the new operator guarantees that the prototype property of the generated object and the prototype property of the constructor are consistent.

A little confused, isn't it? Take a look at the diagram below, no matter what, to ensure that the diagram shows the correct relationship!

It is to be noted that this prototype object is the object-oriented basis of JavaScript, including the implementation of inheritance and so on using prototype.