js面向對象特征

Jenny_Tong 發布于2019-08-23 15:23 / 2398人閱讀

摘要：我們都知道面向對象擁有三大特征，分別為封裝繼承多態，其實在腳本語言中是不存在多態的，但是可以用的方式實現多態中的兩種效果重載重寫，那下面我們就來說一下面向對象的特征封裝把抽象出的屬性和對屬性的方法封裝在一起對外實現接口開放，說白了就是封裝一

我們都知道js面向對象擁有三大特征，分別為封裝、繼承、多態，其實在javaScript腳本語言中是不存在多態的，但是可以用js的方式實現多態中的兩種效果重載、重寫，那下面我們就來說一下面向對象的特征

封裝

把抽象出的屬性和對屬性的方法封裝在一起對外實現接口開放，說白了就是封裝一個方法或是類可以傳入參數，供相同功能的外界使用，來達到相同的目的，便于對代碼的管理

代碼

   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參數傳遞來達到我們想要的結果，但是class類里面的靜態方法是不會對外開放的所以會找不到這個函數

繼承

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

代碼

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 語法糖內的super方法，其實它是實現了在這里指向了父類中的this對象，然后子類的構造函數再對其進行修改，然后zoo函數實現了對父類的重寫，eat函數是子類新增的函數

多態

最開始我們已經知道了js嚴格講是沒有多態的，多態可以表現出我們的代碼的多種狀態，同一操作作用于不同的對象，可以有不同的解釋，產生不同的執行結果。

重載表現代碼
// 重載

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

上面是一個重載的例子，它根據我們調用構造函數傳入不同的參數，來實現不同的效果，其實這里也使用上面講到了的封裝，所以面向對象的特征是無處不在

重寫表現代碼
// 重寫

class  rewrite {
    go () {
        console.log("我在走路")
    }
    sport () {
        console.log("我在運動")
    }
}
class  rewriteSon extends rewrite{
    go () {
        console.log("我回家了")
    }
}

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

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

GPU云服務器云服務器 js 面向對象視頻 oop面向對象 js js面向對象開發表格對象面向對象

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

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

JavaScript面向對象的三大特征

摘要：什么是面向對象本文不在論述。接下來說一下面向對象的三大特征在當中的實現。封裝實現封裝實現就是是對象內部的變化對外界是透明的不可見。這種做法使對象之間低耦合便于維護升級團隊協作開發。。概述本來打算寫設計模式的，在談論js的設計模式之前先說一下js的面向對象,因為很多設計模式的實現都摻雜著面向對象的思想,所以先做一下前期鋪墊。 js我們都知道是一種動態類型腳本型語言,變量類型無法保證,...

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

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

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

摘要：構造函數對象初始化的瞬間被調用的方法。接下來看下自己做的一個小例子面向對象編程大家好這是一輛它的顏色是它的內飾是牧馬人越野車綠色的簡約精致的法拉利跑車紅色的豪華舒暢的效果圖注構造函數始終都應該以一個大寫字母開頭。 js的面向對象編程的理解面向對象的語言有一個標志，即擁有類的概念，抽象實例對象的公共屬性與方法，基于類可以創建任意多個實例對象，一般具有封裝、繼承、多態的特性！但JS中對象...

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

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

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