Object-Oriented Programming ​

All data in JavaScript can be viewed as objects. Does that mean we are already using object-oriented programming?

Certainly not. If we only use Number, Array, string, and basic objects defined by {...}, we cannot unleash the ultimate power of object-oriented programming.

JavaScript's object-oriented programming differs from that of many other languages like Java or C#. If you are familiar with Java or C#, you understand two fundamental concepts of object-oriented programming:

• Class: A class is a type template for objects. For example, the Student class represents students; the class itself is a type, while Student signifies the student type but does not represent any specific student.
• Instance: An instance is an object created from a class. For example, from the Student class, we can create instances like xiaoming, xiaohong, and xiaojun, each representing a specific student, all belonging to the Student type.

Thus, classes and instances are basic concepts in most object-oriented programming languages.

However, in JavaScript, this concept needs adjustment. JavaScript does not distinguish between classes and instances but instead implements object-oriented programming through prototypes.

A prototype means that when we want to create a specific student like xiaoming, we do not have a Student type available. So, what to do? Fortunately, we have a ready-made object:

let robot = {
    name: 'Robot',
    height: 1.6,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

This robot object has a name, height, and can run, resembling xiaoming. So we’ll create xiaoming based on it!

We rename it to Student and create xiaoming:

let Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

let xiaoming = {
    name: 'Ming'
};

xiaoming.__proto__ = Student;

Note that the last line of code points xiaoming's prototype to the Student object, making it seem like xiaoming inherits from Student:

xiaoming.name; // 'Ming'
xiaoming.run(); // Ming is running...

xiaoming has its own name property but does not define the run() method. However, since xiaoming inherits from Student, it can call run() as long as Student has it.

The difference between JavaScript's prototype chain and Java's class is that it lacks the concept of "Class"; all objects are instances, and the so-called inheritance merely points one object's prototype to another.

If you point xiaoming's prototype to another object:

let Bird = {
    fly: function () {
        console.log(this.name + ' is flying...');
    }
};

xiaoming.__proto__ = Bird;

Now xiaoming can no longer run(); it has become a bird:

xiaoming.fly(); // Ming is flying...

In JavaScript, at runtime, you can change xiaoming from Student to Bird or to any object.

Please note that the above code is for demonstration purposes only. When writing JavaScript code, do not directly use obj.proto to change an object's prototype, and older versions of IE do not support proto. The Object.create() method can accept a prototype object and create a new object based on that prototype, but the new object has no properties. Thus, we can write a function to create xiaoming:

// Prototype object:
let Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

function createStudent(name) {
    // Create a new object based on the Student prototype:
    let s = Object.create(Student);
    // Initialize the new object:
    s.name = name;
    return s;
}

let xiaoming = createStudent('Ming');
xiaoming.run(); // Ming is running...
xiaoming.__proto__ === Student; // true

This is one method for creating prototype inheritance. JavaScript has other ways to create objects, which we will delve into later.