Introduction to the three basic characteristics of object-oriented JavaScript

Students who have learned about object-oriented should all know that the three basic characteristics of object-oriented are: encapsulation, inheritance, and polymorphism, but they may not know much about these three words. For the front-end, the most exposed ones may be encapsulation and inheritance, but polymorphism may not be so understood.

Encapsulation

Before talking about encapsulation, let’s first understand what encapsulation is?

What is encapsulation

Encapsulation: Encapsulate the resources required for the object to run in the program object - basic Above, are methods and data. An object "exposes its interface". Other objects attached to these interfaces can use this object without caring about the methods implemented by the object. The concept is "don't tell me how you do it, just do it." An object can be thought of as a self-contained atom. The object interface includes public methods and initialization data. (Excerpted from Baidu Encyclopedia)

My understanding of encapsulation, there may be another step which is Extraction. First of all, you must know which attribute methods you should abstract from in a pair of code. With these as the basis, we can better package.

Encapsulation is nothing more than encapsulation of its properties and methods.

1. Class: encapsulates the properties and behavior of the object

2. Method: encapsulates specific logical functions

3. Access encapsulation: Access modification encapsulation is nothing more than encapsulating its access rights

class Employees {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    getInfo(){
        let {name,age} = this;
        return {name,age};
    }
    static seyHi(){
        console.log("Hi");   
    }
}

let lisi = new Employees("Aaron",18);
lisi.seyHi();   // lisi.seyHi is not a function
lisi.getInfo();  // {name: "Aaron", age: 18}
Employees.seyHi();  // Hi

The public attributes extracted from Employees are name,age, the public methods are getInfo, seyHi, but the difference between getInfo and seyHi is seyHi The static modifier is used to change it to a static method. seyHi only belongs to the Employees class. However, the getInfo method belongs to the instance.

static is used here to encapsulate the access rights of the seyHi method.

Give another example.

Promise.then()  //  Promise.then is not a function
let p1 = new Promise(() => {})
p1.then();  //  Promise {<pending>}
Promise.all([1]);   //  Promise {<resolved>: Array(1)}

As can be seen from the above code, Promise also uses static to encapsulate the access permissions of its methods.

Inheritance

Inheritance: Speaking of inheritance is not unfamiliar. Inheritance can make the subclass have various public properties of the parent classAttributes and public methods. Without having to write the same code again. While letting the subcategory inherit the parent category, you can redefine some attributes and override some methods, that is, overwrite the original attributes and methods of the parent category so that it can obtain different functions from the parent category. (Excerpt from Baidu Encyclopedia)

After a subclass inherits the parent class, the subclass has the properties and methods of the parent class, but it also has its own unique properties and methods. In other words, the functions of the subclass must be More or the same than the parent class, not less than the parent class.

class Employees {
    constructor(name){
        this.name = name;
    }
    getName(){
        console.log(this.name)
    }
    static seyHi(){
        console.log("Hi");   
    }
}
class Java extends Employees{
    constructor(name){
        super(name);
    }
    work(){
        console.log("做后台工作");
    }
}
let java = new Java("Aaron");
java.getName();
java.work();
// java.seyHi();    //  java.seyHi is not a function

It can be seen from the above example that inheritance will not inherit the static methods of the parent class, but only the public properties and methods of the parent class. This needs attention.

After inheritance, the subclass not only has the getName method, but also has its own worker method.

Polymorphism

Polymorphism: The literal meaning is "multiple states", allowing the pointer of the subclass type to be assigned to the parent Pointer to class type. (Excerpted from Baidu Encyclopedia)

To put it bluntly, polymorphism is the same thing, when the same method is called and the parameters are the same, the behavior is different. Polymorphism is divided into two types, one is behavioral polymorphism and object polymorphism.

Polymorphic expression rewriting and overloading.

What is overriding

Overriding: Subclasses can inherit methods in parent classes without Rewrite the same method. But sometimes the subclass does not want to inherit the methods of the parent class unchanged, but wants to make certain modifications, which requires method rewriting. Method overriding is also called method overwriting. (Excerpt from Baidu Encyclopedia)

class Employees {
    constructor(name){
        this.name = name;
    }
    seyHello(){
        console.log("Hello")
    }
    getName(){
        console.log(this.name);
    }
}
class Java extends Employees{
    constructor(name){
        super(name);
    }
    seyHello(){
        console.log(`Hello,我的名字是${this.name},我是做Java工作的。`)
    }
}
const employees = new Employees("Aaron");
const java = new Java("Leo");
employees.seyHello();   //  Hello
java.seyHello();    //  Hello,我的名字是Leo,我是做Java工作的。
employees.getName();    //  Aaron
java.getName(); //  Leo

It can be seen from the above code that Java inherits Employees, but seyHello exists in both the subclass and the parent class. method, in order to meet different needs, the subclass inherits the parent class and rewrites the seyHello method. So you will get different results when calling. Since the subclass inherits the parent class, the subclass also has the getName method of the parent class.

What is overloading

重载就是函数或者方法有相同的名称，但是参数列表不相同的情形，这样的同名不同参数的函数或者方法之间，互相称之为重载函数或者方法。（节选自百度百科）

class Employees {
    constructor(arg){
        let obj = null;
        switch(typeof arg)
        {
            case "string":
                  obj = new StringEmployees(arg);
                  break;
            case "object":
                  obj = new ObjEmployees(ObjEmployees);
                  break;
            case "number":
                obj = new NumberEmployees(ObjEmployees);
                break;
        }
        return obj;
    }
}
class ObjEmployees {
    constructor(arg){
        console.log("ObjEmployees")
    }
}
class StringEmployees {
    constructor(arg){
        console.log("StringEmployees")
    }
}
class NumberEmployees {
    constructor(arg){
        console.log("NumberEmployees")
    }
}
new Employees({})   // ObjEmployees
new Employees("123456") //  StringEmployees
new Employees(987654)   //  NumberEmployees

因为JavaScript是没有重载的概念的所以要自己编写逻辑完成重载。

在上面的代码中定义了Employees,ObjEmployees,StringEmployees,NumberEmployees类,在实例化Employees的时候在constructor里面进行了判断，根据参数的不同返回不同的对应的类。

这样完成了一个简单的类重载。

总结

1. 封装可以隐藏实现细节，使得代码模块化；

2. 继承可以扩展已存在的代码模块（类），它们的目的都是为了——代码重用。

3. 多态就是相同的事物，调用其相同的方法，参数也相同时，但表现的行为却不同。多态分为两种，一种是行为多态与对象的多态。

在编程的是多多运用这个写思想对其编程时很有用的，能够使你的代码达到高复用以及可维护。

相关免费学习推荐：js视频教程

The above is the detailed content of Introduction to the three basic characteristics of object-oriented JavaScript. For more information, please follow other related articles on the PHP Chinese website!