關於JS的物件導向的思考和總結

孫小渃發表於2019-02-16
JS物件

物件導向程式設計的概念和原理

1、物件導向程式設計是什麼

它是用抽象的方式建立基於現實世界模型的程式設計模式（將資料和程式指令組合到物件中）

2、物件導向程式設計的目的

在程式設計中促進更好的靈活性和可維護性，在大型軟體工程中廣為流行。

3、物件導向程式設計的優勢（繼承、多型、封裝）

繼承：獲取父類的全部（資料和功能），實現的是複製。
多型：根據實現方法的物件，相同方法名具有不同的行為。
封裝：聚合物件資料和功能，以及限制它們和外界的聯絡（訪問許可權）。

JS中如何實現物件導向程式設計（參考）

1、原型鏈式繼承

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

缺點：引用型別被修改時會同步給所有子類

2、建構函式繼承

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

缺點：父類的函式在子類下面是不共享的，相當於動態的複製了一份程式碼

3、組合繼承

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

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

4、寄生組合式繼承

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)

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

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

相關文章