js面向?qū)ο筇卣?

Jenny_Tong 發(fā)布于2019-08-23 15:23 / 2407人閱讀

摘要：我們都知道面向?qū)ο髶碛腥筇卣?，分別為封裝繼承多態(tài)，其實在腳本語言中是不存在多態(tài)的，但是可以用的方式實現(xiàn)多態(tài)中的兩種效果重載重寫，那下面我們就來說一下面向?qū)ο蟮奶卣鞣庋b把抽象出的屬性和對屬性的方法封裝在一起對外實現(xiàn)接口開放，說白了就是封裝一

我們都知道js面向?qū)ο髶碛腥筇卣鳎謩e為封裝、繼承、多態(tài)，其實在javaScript腳本語言中是不存在多態(tài)的，但是可以用js的方式實現(xiàn)多態(tài)中的兩種效果重載、重寫，那下面我們就來說一下面向?qū)ο蟮奶卣?/pre>
封裝
把抽象出的屬性和對屬性的方法封裝在一起對外實現(xiàn)接口開放，說白了就是封裝一個方法或是類可以傳入?yún)?shù)，供相同功能的外界使用，來達到相同的目的，便于對代碼的管理

代碼
   class Package {
       constructor (animal){
           this.animal = animal
       }
       zoo (animal) {
           console.log("this is"+ this.animal)
       }
       static private () {
           console.log("我是私有方法")
       }
   }

   let newPackage = new Package("大象")
   newPackage.zoo()
   newPackage.private() // Uncaught TypeError: newPackage.private is not a function
上面的一個比較簡單的封裝例子，通過animal參數(shù)傳遞來達到我們想要的結(jié)果，但是class類里面的靜態(tài)方法是不會對外開放的所以會找不到這個函數(shù)

繼承
繼承可以使得子類具有父類別的各種屬性和方法，而不需要再次編寫相同的代碼。在令子類別繼承父類別的同時，可以重新定義某些屬性，并重寫某些方法，即覆蓋父類別的原有屬性和方法，使其獲得與父類別不同的功能。另外，為子類追加新的屬性和方法也是常見的做法。

代碼
class PackageSon extends Package{
    constructor(animal, food){
        super(animal);
        this.food = food
    }
    zoo () {
        console.log("這是"+ this.animal)
    }
    eat () {
        console.log(this.animal+this.food)
    }
}

let newPackageSon = new PackageSon("大象", "吃草")
newPackageSon.zoo()
newPackageSon.eat()

上面的例子使用到了es6 class 語法糖內(nèi)的super方法，其實它是實現(xiàn)了在這里指向了父類中的this對象，然后子類的構(gòu)造函數(shù)再對其進行修改，然后zoo函數(shù)實現(xiàn)了對父類的重寫，eat函數(shù)是子類新增的函數(shù)
多態(tài)
最開始我們已經(jīng)知道了js嚴格講是沒有多態(tài)的，多態(tài)可以表現(xiàn)出我們的代碼的多種狀態(tài)，同一操作作用于不同的對象，可以有不同的解釋，產(chǎn)生不同的執(zhí)行結(jié)果。

重載表現(xiàn) 代碼
// 重載
class overload {
    init (callback) {
        if (callback === "go") {
            console.log("我是go")
        }else if(callback === "eat") {
            console.log("我是eat")
        }else {
            console.log("我是sprot")
        }
    }
}

var newOverload = new overload()
newOverload.init("go")
newOverload.init("eat")
newOverload.init("sprot")

上面是一個重載的例子，它根據(jù)我們調(diào)用構(gòu)造函數(shù)傳入不同的參數(shù)，來實現(xiàn)不同的效果，其實這里也使用上面講到了的封裝，所以面向?qū)ο蟮奶卣魇菬o處不在

重寫表現(xiàn) 代碼
// 重寫
class  rewrite {
    go () {
        console.log("我在走路")
    }
    sport () {
        console.log("我在運動")
    }
}
class  rewriteSon extends rewrite{
    go () {
        console.log("我回家了")
    }
}

var newRewriteSon = new rewriteSon()
newRewriteSon.go()
newRewriteSon.sport()

上面是一個簡單的重寫例子，我們這里用到了繼承，通過創(chuàng)建rewrite父類，編寫了兩個函數(shù)分別實現(xiàn)不同的操作，rewriteSon子類繼承了父類上面的兩個方法，子類中又重新寫了相同名字的go方法，所以子類會把繼承過來父類中的go方法覆蓋掉，從而實現(xiàn)自己想要的操作，打印sport方法時會依舊得出繼承父類方法的操作，所以子類只重寫了go方法

云服務器 GPU云服務器 js 面向?qū)ο笠曨l oop面向?qū)ο?js js面向?qū)ο箝_發(fā)表格對象面向?qū)ο?/a>

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101977.html

JavaScript面向對象的三大特征

摘要：什么是面向?qū)ο蟊疚牟辉谡撌觥＝酉聛碚f一下面向?qū)ο蟮娜筇卣髟诋斨械膶崿F(xiàn)。封裝實現(xiàn)封裝實現(xiàn)就是是對象內(nèi)部的變化對外界是透明的不可見。這種做法使對象之間低耦合便于維護升級團隊協(xié)作開發(fā)。。概述本來打算寫設計模式的，在談論js的設計模式之前先說一下js的面向?qū)ο?因為很多設計模式的實現(xiàn)都摻雜著面向?qū)ο蟮乃枷?所以先做一下前期鋪墊。 js我們都知道是一種動態(tài)類型腳本型語言,變量類型無法保證,...

chaosx110 2019-08-20 14:15 評論0 收藏0
JS面向對象一:MVC的面向對象封裝

摘要：自己的理解的第一個參數(shù)就是的值如果沒用默認是那個調(diào)用函數(shù)的當前的對象在全局作用域中就是被隱藏的所以不寫且在全局作用于調(diào)用函數(shù)的時候就是可以使用或者自己指定的指向 JS面向?qū)ο笠?MVC的面向?qū)ο蠓庋b MDNjavascript面向?qū)ο?面向?qū)ο?Object-Oriented) showImg(https://segmentfault.com/img/remote/1460000016...

Scliang 2019-08-26 12:16 評論0 收藏0
js面向對象編程的理解

摘要：構(gòu)造函數(shù)對象初始化的瞬間被調(diào)用的方法。接下來看下自己做的一個小例子面向?qū)ο缶幊檀蠹液眠@是一輛它的顏色是它的內(nèi)飾是牧馬人越野車綠色的簡約精致的法拉利跑車紅色的豪華舒暢的效果圖注構(gòu)造函數(shù)始終都應該以一個大寫字母開頭。 js的面向?qū)ο缶幊痰睦斫?面向?qū)ο蟮恼Z言有一個標志，即擁有類的概念，抽象實例對象的公共屬性與方法，基于類可以創(chuàng)建任意多個實例對象，一般具有封裝、繼承、多態(tài)的特性！但JS中對象...

wuaiqiu 2019-08-23 11:48 評論0 收藏0
大前端2018現(xiàn)在上車還還得及么

摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅(qū)動，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎：Js基礎教程、js內(nèi)置對...

stormgens 2019-08-01 18:25 評論0 收藏0