How does JS implement object-oriented programming? Introduction to the principles of js object-oriented programming

The content of this article is about how JS implements object-oriented programming? The introduction to the principles of js object-oriented programming has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is object-oriented programming?

It is an abstract way to create a programming model based on a real-world model (combining data and program instructions into objects)

2. The purpose of object-oriented programming

is to promote better flexibility and maintainability in programming, and is widely popular in large-scale software projects.

3. Advantages of object-oriented programming (inheritance, polymorphism, encapsulation)

Inheritance: Get all the data and functions of the parent class, and achieve copying.
Polymorphism: The same method name has different behaviors depending on the object that implements the method.
Encapsulation: Aggregate object data and functions, and limit their contact with the outside world (access rights).

How to implement object-oriented programming in JS (reference)

1. Prototype chain inheritance

function Person() {
    this.name = 'per'
    this.obj = {
        name: ''
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    
}
Student.prototype = new Person()

const stu1 = new Student()
const stu2 = new Student()

stu1.setName('stu')
stu1.getName()
stu2.getName()

Disadvantage: When the reference type is modified, it will be synchronized to all subclasses

2. Constructor inheritance

function Person() {
    this.obj = {
        name: 'a'
    }
    this.setName = name => {
        this.obj.name = name
    }
    this.getName = () => {
        return this.obj.name
    }
}
function Student() {
    Person.call(this)
}
const stu1 = new Student()
const stu2 = new Student()
stu1.setName('stu')
stu1.getName()
stu2.getName()

Disadvantages: The functions of the parent class are not shared under the subclass, which is equivalent to dynamically copying a copy of the code

3. Combined inheritance

function Person() {
    this.obj = {
        name: 'a'
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    // 继承属性
    Person.call(this)
}
// 继承方法
Student.prototype = new Person()

Disadvantages: The attribute copy in the parent class is executed twice

4. Parasitic combined inheritance

function Person() {
    this.obj = {
        name: 'a'
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    // 继承属性
    Person.call(this)
}
// 这里实现方法的继承
function inherit(sub, parent) {
    sub.prototype = Object.create(parent.prototype)
    sub.prototype.constructor = sub       
}
inherit(Student, Person)

Here is the solution to the double inheritance of the parent class code in combined inheritance Execution issues

5, class implementation inheritance (reference)

class Person {
    constructor(){
        this.obj = {
            name: 'a'
        }
    }
    get name() {
        return this.obj.name
    }
    set name(name) {
        this.obj.name = name
    }
}
class Student extends Person {
    constructor() {
        super()
    }
}

Related recommendations:

js object-oriented Summary of multiple methods of creating objects_js-oriented Object

javascript object-oriented programming code_js object-oriented

The above is the detailed content of How does JS implement object-oriented programming? Introduction to the principles of js object-oriented programming. For more information, please follow other related articles on the PHP Chinese website!