JS如何實作物件導向程式設計？ js物件導向程式設計的原理介紹

本篇文章帶給大家的內容是關於JS如何實現物件導向程式設計？ 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()
    }
}

相關推薦：

js物件導向 多種建立物件方法小結_js面向物件

javascript物件導向程式碼_js物件導向

#

以上是JS如何實作物件導向程式設計？ js物件導向程式設計的原理介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！