初試面向對象編程

cikenerd 發布于2019-08-22 15:46 / 1026人閱讀

摘要：面向對象編程面向過程是一門面向過程的語言，也就是側重點是實現一件事的步驟。面向對象以事物為中心，側重于完成某件事所需要的事物的特征和行為的設計。

面向對象編程

面向過程

javascript是一門面向過程的語言，也就是側重點是實現一件事的步驟。

特點：有良好的可擴展性和重用性，降低了代碼間的耦合度，接近日常思維。

面向對象

以事物為中心，側重于完成某件事所需要的事物的特征和行為的設計。

特點：封裝、繼承、多態，耦合度低，復用度好。

相信這些概念性的東西，網上真的是一搜一大堆，在我使用我的方法理解和上手面向對象之前，容許我把概念性的東西寫完，畢竟基礎特別重要啊。相信我，如果你正在閱讀，請忍耐一兩分鐘

相關名詞

prototype : 獲取構造函數的原型對象

constructor ：獲取原型對象的構造函數

--proto-- : 獲取實例對象的構造函數的原型對象

原型鏈：構造函數自身會有原型對象，通過prototype查看，構造函數的實例對象自身也會有原型對象，通過--proto--查看，--proto--是object類型，當訪問一個實例化的屬性時，瀏覽器會先查找自身內部屬性，沒有就找--proto--，直到--proto--類型為null。

New關鍵字作用：創建一個空對象，讓空對象調用構造函數給自己賦值，將該對象返回

繼承

實現B繼承A

方式一：在B的構造函數內部寫A.call(this);缺點：參數設置不靈活

方式二：(使用原型鏈實現繼承)step1：改變自身原型對象B.prototype=new A();step2:修復原型對象指向的構造函數B.prototype.constructor=B

好啦，概念性的東西就寫到這，下面開始我的代碼之旅，現在已經晚上11：30整，我好瞌睡啊，太困了，把這個寫完我就去睡覺了Zzzz

基礎設置

國際慣例，先把代碼的基礎設置好

            div,
            p {
                width: 100px;
                height: 30px;
                border: 1px solid #ffffd;
                margin: 30px auto;
            }
            div.open,p.open{
                background: pink;
            }

1.基礎版

        /*NO.1
         * 基礎方法
         * 缺點：代碼冗余，重復獲取元素重復循環操作
         * 功能：修改背景色
         */

        var divs1 = document.getElementsByTagName("div");
        var ps1 = document.getElementsByTagName("p");
        for (var i = 0; i < divs1.length; i++) {
            divs1[i].style.backgroundColor = "pink";
        }
        for (var i = 0; i < ps1.length; i++) {
            ps1[i].style.backgroundColor = "pink";
        }

2.進階版（一）

        /*NO.2
         * 進階方法
         * 缺點：太局限，只能設置樣式
         * 功能：修改背景色
         */
        function getDOM(tagName){
            return document.getElementsByTagName(tagName);
        }
        function setStyle(arr,styleName,styleVal){
            for (var i = 0; i < arr.length; i++) {
                arr[i].style[styleName] = styleVal;
            }
        }
        var divs2 = getDOM("div");
        var ps2 = getDOM("p");
        setStyle(divs2,"backgroundColor","#00a09d");
        setStyle(ps2,"backgroundColor","#00a09d");

3.進階版（二）

        /*NO.3
         * 進階方法
         * 缺點：代碼不利于閱讀，沒有結構化
         * 功能：修改寬度，填充文字，遍歷封裝
         */
        function getDOM(tagName){
            return document.getElementsByTagName(tagName);
        }
        function each(arr,callback){
            for (var i = 0; i < arr.length; i++) {
                callback(arr[i])
            }
        }
        var divs2 = getDOM("div");
        var ps2 = getDOM("p");
        each(divs2,function(tag){    
            tag.style.width = "200px";
            tag.innerText = "I have a pen!!!";
        })

4.進階版（三）

        /*NO.4
         * 進階方法，傳統面向對象寫法(獨立作用域)
         * 功能：添加樣式，遍歷封裝
         */
        function Tool(bgColor){
            this.bgColor = bgColor||"#00a09d";
            this.getDom = function(tagName){
                return document.getElementsByTagName(tagName);
            };
            this.each = function(arr,callback){
                for (var i = 0; i < arr.length; i++) {
                    arr[i].style.backgroundColor = this.bgColor;
                    callback(arr[i]);
                }
            };
        }
        //實例化(使用)
        var tool = new Tool();
        var ps3 = tool.getDom("p");
        var divs3 = tool.getDom("div");
        tool.each(divs3,function(tag){    
            tag.style.width = "200px";
            tag.innerText = "I have a pen!!!";
        })

5.終極版

        /*NO.5
         * 進階方法，ES6面向對象寫法(獨立作用域,類本身指向構造函數)
         * 功能：將傳入的對象變成紅色，填充文字，添加點擊效果(歪樓了，需求改成這慫樣子了)
         * 說明：實例化之后立即實現以上功能
         * 功能：修改背景，填充文字，綁定事件......
         */
        class Tool{
            //構造函數(options為實例化傳入的參數)
            //作用：設置默認參數，合并默認參數和傳入的參數，實現繼承
            constructor(options){
                let dafultOpations = {
                    element:"",
                    bgColor:"red",
                    color:"#fff"
                }
                
                this.options = Object.assign({},dafultOpations,options); //合并對象   assign(相同項會覆蓋) merge(相同項會合并)
                this.checkOptions().setStyle().setText().bindClick()  //實例化后立即執行這些方法，每個方法在調用完成后一定要釋放this
            }
            //由于該類的實現依賴于傳入的DOM，此方法用來確保已經傳入DOM，若實例化沒有傳入，則拋出異常
            checkOptions(){
                if(!this.options.element){
                    throw new Error("Element is required!!!")
                }
                return this;
            }
            setStyle(){
                for (var i = 0; i < this.options.element.length; i++) {
                    this.options.element[i].style.backgroundColor = this.options.bgColor;
                    this.options.element[i].style.textAlign = "center";
                    this.options.element[i].style.color = this.options.color;
                }
                return this;
            }
            setText(){
                for (var i = 0; i < this.options.element.length; i++) {
                    this.options.element[i].innerText = "呆呆Akuma";
                }
                return this;
            }
            bindClick(){
                for (var i = 0; i < this.options.element.length; i++) {
                    let __this = this.options.element[i];  //需將當前的元素區分開 __this!=this
                    let flag = false;
                    __this.addEventListener("click",()=>{
                        if(flag = !flag){                            
                            __this.style.backgroundColor = "pink"
                        }else{
                            __this.style.backgroundColor =     this.options.bgColor;                    
                        }
                    })
                }
                return this;
            }
        }
        
        
        
        var divs = new Tool({
            element:document.getElementsByTagName("div"),
            bgColor:"#00a09d"
        });
        var ps = new Tool({
            element:document.getElementsByTagName("p"),
            bgColor:"#f48"
        });

目前看起來，這個終極版好像是最繁瑣的，首先我要說明，這里只是介紹面向對象編程是怎么回事，對于漫天飛的this真的神煩，不過多寫寫就好了，習慣就好，要學會控制它，如果你成功看完這篇文章，你就會發現，隨著版本（暫時就算版本吧）升級，功能也慢慢增多，靈活性更好，代碼的可擴展性更高啦，至于質疑一個簡單的功能至于寫這么復雜嗎？

很好，我覺得面向對象編程就是造輪子的過程，輪子就相當于工具。打個比方，伐樹你會選擇電鋸還是斧頭，劈柴你會選擇電鋸還是斧頭，相信答案就在你心里，好了不寫了，真困了，快睡著了。

GPU云服務器云服務器面向對象編程面向對象java編程面向對象編程語言 java面向對象編程

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

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

JS程序

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

melody_lql 2019-08-22 11:22 評論0 收藏0
JS函數式編程讀書筆記 - 1

摘要：在近期看到了函數式編程這本書預售的時候就定了下來。主要目的是個人目前還是不理解什么是函數式編程。且和現在在學習函數式編程有莫大的關系。加速大概了解了函數式編程之后。總結看完了第一章也是可以小結一下的函數式編程。本文章記錄本人在學習函數式中理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。在近期看到了《JavaScript函數式編程》這本書預售的時候就定了下...

G9YH 2019-08-21 10:37 評論0 收藏0
前端思考 - 收藏集 - 掘金

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

LinkedME2016 2019-08-20 17:19 評論0 收藏0
【Python】一文弄懂python裝飾器（附源碼例子）

摘要：裝飾器的使用符合了面向對象編程的開放封閉原則。三簡單的裝飾器基于上面的函數執行時間的需求，我們就手寫一個簡單的裝飾器進行實現。函數體就是要實現裝飾器的內容。類裝飾器的實現是調用了類里面的函數。類裝飾器的寫法比我們裝飾器函數的寫法更加簡單。目錄前言一、什么是裝飾器二、為什么要用裝飾器 ...

liuchengxu 2021-09-04 16:40 評論0 收藏0
IntersectionObserve初試

摘要：構造函數調用時，需要給它傳一個回調函數。當監聽的元素進入可視區域或者從可視區域離開時，回調函數就會被調用。構造函數的返回值是一個觀察器實例。它是一個數組，每個成員都是一個門檻值，默認為，即交叉比例達到時觸發回調函數。 IntersectionObserve這個API，可能知道的人并不多(我也是最近才知道...)，這個API可以很方便的監聽元素是否進入了可視區域。 * { marg...

LucasTwilight 2019-08-23 15:34 評論0 收藏0