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

weij 發布于2019-08-26 12:15 / 2428人閱讀

摘要：面向對象編程的優勢繼承多態封裝繼承獲取父類的全部數據和功能，實現的是復制。多態根據實現方法的對象，相同方法名具有不同的行為。封裝聚合對象數據和功能，以及限制它們和外界的聯系訪問權限。

面向對象編程的概念和原理 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()
    }
}

GPU云服務器云服務器 java關于面向對象 php的面向對象 java的面向對象 php的面向對象應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108328.html

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

摘要：面向對象編程的優勢繼承多態封裝繼承獲取父類的全部數據和功能，實現的是復制。多態根據實現方法的對象，相同方法名具有不同的行為。封裝聚合對象數據和功能，以及限制它們和外界的聯系訪問權限。面向對象編程的概念和原理 1、面向對象編程是什么它是用抽象的方式創建基于現實世界模型的編程模式（將數據和程序指令組合到對象中） 2、面向對象編程的目的在編程中促進更好的靈活性和可維護性，在大型軟件工程...

paulli3 2019-08-02 11:16 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
關于javascript面向對象編程

摘要：所以讓我們趕緊切入正題，一起來看看關于腳本的面向對象編程。所以下面讓我們用這些特性重新寫一下上面實現的函數，看一下更原汁原味的面向對象編程。今天懷著忐忑的心情寫下這篇文章，因為這畢竟是我第一篇真正意義上的技術文章，鞏固知識的同時，希望可以給閱讀的人帶來收獲，就很滿足了。所以讓我們趕緊切入正題，一起來看看關于Java腳本的面向對象編程。 showImg(https://segmentf...

Enlightenment 2019-08-22 10:40 評論0 收藏0
前端基礎進階（十）：面向對象實戰之封裝拖拽對象

摘要：前面幾篇文章，我跟大家分享了的一些基礎知識，這篇文章，將會進入第一個實戰環節利用前面幾章的所涉及到的知識，封裝一個拖拽對象。不封裝對象直接實現利用原生封裝拖拽對象通過擴展來實現拖拽對象。 showImg(https://segmentfault.com/img/remote/1460000008699587); 前面幾篇文章，我跟大家分享了JavaScript的一些基礎知識，這篇文章，...

Eidesen 2019-08-21 18:31 評論0 收藏0
前端思考 - 收藏集 - 掘金

摘要：并嘗試用為什么你統計的方式是錯的掘金翻譯自工程師的文章。正如你期望的，文中的前端開發單一職責原則前端掘金單一職責原則又稱單一功能原則，面向對象五個基本原則之一。單頁式應用性能優化 - 首屏數據漸進式預加載 - 前端 - 掘金前言針對首頁和部分頁面打開速度慢的問題，我們開始對單頁式應用性能進行優化。本文介紹其中一個方案：基于 HTTP Chunk 的首屏數據漸進式預加載方案，該方案總...

LinkedME2016 2019-08-20 17:19 評論0 收藏0