Related pages ↓
It is recommended to read this section directly:
Object-oriented Programming - Liao Xuefeng’s official website
5. Object-oriented programming
Object-Oriented Programming
Object-oriented programming in JavaScript is different from object-oriented programming in most other languages such as Java and C#. If you are familiar with Java or C#, great, you must understand the two basic concepts of object-oriented:
类: The class is the type template of the object. For example, define theStudentclass to represent the student, and the class itself is a type,Studentrepresents the student type, But it does not refer to any specific student;实例: An instance is an object created based on a class. For example, based on theStudentclass,xiaoming,xiaohong,xiaojunand other multiple instances, each instance represents a specific student, and they all belong to theStudenttype.
Therefore, classes and instances are basic concepts in most object-oriented programming languages.
However, in JavaScript, this concept needs to be changed. JavaScript does not distinguish between the concepts of classes and instances, but implements object-oriented programming through prototypes.
The prototype means that when we want to create the specific student xiaoming, we do not have a Student type available. What to do? There happens to be such a ready-made object:
var robot = {
name: 'Robot',
height: 1.6,
run: function () {
console.log(this.name + ' is running...');
}
};
Let’s look at this robot The object has a name, height, and can run. It’s a bit like Xiao Ming. We might as well “create” Xiao Ming based on it!
So we renamed it Student and created xiaoming :
var Student = {
name: 'Robot',
height: 1.2,
run: function () {
console.log(this.name + ' is running...');
}
};
var xiaoming = {
name: '小明'
};
xiaoming.__proto__ = Student;
Note that the last line of code points the prototype of xiaoming to the object Student, which looks like xiaoming comes from a>Student Inherited:
xiaoming.name; // '小明'
xiaoming.run(); // 小明 is running...
xiaoming has its own name attribute, but does not define the run() method. However, since Xiaoming inherits from Student, as long as Student has the run() method, xiaoming can also be called:
The difference between JavaScript's prototype chain and Java's Class is that it does not have the concept of "Class". All objects are instances. The so-called inheritance relationship is just pointing the prototype of one object to another object.
If you point the prototype of xiaoming to other objects:
var Bird = {
fly: function () {
console.log(this.name + ' is flying...');
}
};
xiaoming.__proto__ = Bird;
Now xiaoming can no longer run(), he has turned into a bird:
xiaoming.fly(); // 小明 is flying...
While the JavaScript code is running, you can change xiaoming from Student to Bird, or to any object .
- class inheritance
In the above chapter, we saw that the JavaScript object model is based on prototype implementation. It is characterized by simplicity. The disadvantage is that it is more difficult to understand than the traditional class-instance model. The biggest disadvantage is that the implementation of inheritance requires writing a lot of code and requires Correctly implement the prototype chain.
Is there a simpler way to write it? have!
New keywords class were officially introduced into JavaScript starting from ES6. The purpose of class is to make defining classes simpler. Let's first review the method of using functions to implement Student:
function Student(name) {
this.name = name;
}
// 现在要给这个Student新增一个方法
Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
}
If you use the new class keyword to write Student, you can write it like this:
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('Hello, ' + this.name + '!');
}
}
By comparison, you can find that the definition of class includes the constructor constructor and the function defined on the prototype objecthello() (Note that there is no function keyword), thus avoiding scattered code like Student.prototype.hello = function () {...}.
Finally, the code to create a Student object is exactly the same as in the previous chapter:
var xiaoming = new Student('小明');
xiaoming.hello();
- class inheritance
Another huge benefit of defining objects with class is that inheritance is more convenient. Think about the amount of code we need to write to derive a PrimaryStudent from a Student. Now, there is no need to consider the intermediate objects of prototypal inheritance, the constructor of the prototype object, etc., and can be implemented directly through extends:
class PrimaryStudent extends Student {
constructor(name, grade) {
super(name); // 记得用super调用父类的构造方法!
this.grade = grade;
}
myGrade() {
alert('I am at grade ' + this.grade);
}
}