關於JS的面向對象的思考和總結

面向對象編程的概念和原理

一、面向對象編程是什麼

它是用抽象的方式建立基於現實世界模型的編程模式（將數據和程序指令組合到對象中）

二、面向對象編程的目的

在編程中促進更好的靈活性和可維護性，在大型軟件工程中廣爲流行。

三、面向對象編程的優點（繼承、多態、封裝）

繼承：獲取父類的所有（數據和功能），實現的是複製。
多態：根據實現方法的對象，相同方法名具備不一樣的行爲。
封裝：聚合對象數據和功能，以及限制它們和外界的聯繫（訪問權限）。

JS中如何實現面向對象編程（參考）

一、原型鏈式繼承

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()

缺點： 引用類型被修改時會同步給全部子類

二、構造函數繼承

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()

缺點：父類的函數在子類下面是不共享的，至關於動態的複製了一份代碼

三、組合繼承

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()

缺點：父類內的屬性複製執行了兩遍

四、寄生組合式繼承

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)

這裏解決了組合式繼承的父類代碼二次執行問題

五、class實現繼承（參考）

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()
    }
}