1. 程式人生 > >js 面向對象的三大特性:封裝,繼承、多態

js 面向對象的三大特性:封裝,繼承、多態

num 大量 表示 以及 word cto class this 管理

一:什麽是封裝?

封裝的定義:就是對象內部的變化對外界是透明的,不可見的。

封裝的場景:

在寫項目的過程中,有時候不同頁面,會有相同的功能,我們還需要每個頁面都寫一遍嗎?額,,,,其實也可以寫的,只不過不嫌累 就i行,皮一下下~~

例如:人員庫項目中,部門管理中部門主管的模糊搜索,和新增部門的模糊搜索兩個地方相同的功能,我們可不可以將模糊搜索的方法進行封裝呢,然後,在不同頁面點擊觸發的時候調用呢?這樣我們是不是 就不必要 寫大量重復的代碼了,也會讓我們的代碼更加清晰。

// 部門主管的模糊搜索
remoteMethod(val) {
            this.query.keyWord = val;
            
this.$store.dispatch(department/querySupervisorid, this.query) },

封裝的好處:使用封裝,可以達到代碼的復用,使代碼更加簡潔,不會重復寫很多的代碼。

二:什麽是繼承

繼承的定義:我們想要一個對象能夠訪問另一個對象的屬性,同時,這個對象還能夠添加自己新的屬性或者覆蓋可訪問的另一個對象的屬性,我們實現這個目標的方式叫做“繼承”。

實現繼承的方式:

function Foo(x, y) {
    this.x = x
    this.y = y
}
Foo.prototype.sayX = function() {
    console.log(
this.x) } Foo.prototype.sayY = function() { console.log(this.y) } function Bar(z) { this.z = z this.x = 10 } Bar.prototype = Object.create(Foo.prototype) // 註意這裏,該方法時在FOO的原型上創建Bar的原型屬性的空對象 Bar.prototype.sayZ = function() { console.log(this.z) } Bar.prototype.constructor = Bar var o = new
Bar(1) o.sayX() // 10 o.sayZ() // 1

這種繼承方式被稱為“構造函數繼承”。

三:什麽是多態

多態:同一操作作用於不同的對象,可以有不同的解釋,產生不同的執行結果。本質上就是將”做什麽“和”誰去做以及怎麽做“分開,就是消除不同對象的耦合關系。

重載:方法名相同,參數不同,表示不同的方法

init() {
      this.test(100, 200)
      this.test(10)
    },
 test(num1, num2) {
      if(arguments.length===2) {
        console.log(111, num1, num2)
      } else {
        console.log(222, num1)
      }
},

重寫:方法名相同,後者覆蓋前者

test1() {
      console.log(重寫1)
 },
 test1() {
      console.log(重寫2)
  },

打印結果是: 重寫2

js 面向對象的三大特性:封裝,繼承、多態