物件導向(ES5與ES6類的繼承解析)

weixin_34290000發表於2017-02-09

物件導向的語言都有一個類的概念,通過類可以建立多個具有相同方法和屬性的物件,ES6之前並沒有類的概念,在ES6中引入類class.

ES5 物件導向

建立物件(四種模式簡介,此外還有動態原型模式、寄生建構函式模式、穩妥建構函式模式等)

一、工廠模式


function createPerson (Name,Age,Job) {

      var man= new Object();

      man.name= Name;

      man.age= Age;

      man.job= Job;

      man.sayName= function () {

              alert(this.name)

    }

  return  man;

}

var personOne=  createPerson ("Erric",26,"Engineer");

var personTwo=  createPerson ("Lori",26,"teacher");

優點:解決了多個相似物件的建立問題

缺點: ①  物件識別問題無法解決(即怎麼知道一個物件的型別)

二、建構函式模式

function Person (Name,Age,Job) {

      this.name = Name;

      this.age = Age;

      this.job= Job;

      this.sayName= function () {

              alert(this.name)

      }

}

var personOne=  new Person("Erric",26,"Engineer");

var personTwo=  new Person("Lori",26,"teacher");

注一: 若不使用new操作符直接呼叫函式,那麼其屬性和方法都會被新增到window物件裡面(因為在全域性作用域呼叫一個方法時,this總是指向window物件)

如: Person("Erric",26,"Enginee")

        window.sayName()  //  彈出 "Erric"

          window.name            //  "Erric"

          window.age              //  26

注二: new 操作符實際上進行了以下操作

          ① 建立一個新的物件

          ② 將建構函式的作用域賦給新物件(this指向了這個新的物件)

          ③ 執行建構函式中的程式碼(為這個新物件新增屬性)

          ④ 返回這個新的物件

優點:① 不用顯式的建立物件

            ② 將屬性和方法賦給了this物件

            ③ 沒有return語句

缺點:①  每個方法都要在每個例項上重新建立一遍(personOne和personTwo中的sayName方法不是同一個方法,每個函式都是一個物件,故每  定義了一個函式就例項化了一個物件)。

            此問題也可以通過將方法單獨抽出來解決(但是方法一多,都移到全域性的話封裝性就無從談起),如下:

            function Person (Name,Age,Job) {

                    this.name = Name;

                      this.age = Age;

                      this.job= Job;

                      this.sayName= sayName

            }

            function sayName() {

                    alert(this.name)

              }

            var personOne=  new Person("Erric",26,"Engineer");

            var personTwo=  new Person("Lori",26,"teacher");

            ② 若是將公共的sayName方法移到全域性,那麼又沒有封裝性可言了。



三、原型模式

function Person () {

}

Person.prototype.name= "Erric"

Person.prototype.age= "28"

Person.prototype.job= "Job"

Person.prototype.sayName= function () {

        alert(this.sayName)

}

優點:①  解決了函式共用的問題,不用每個例項都建立一遍方法。

缺點:①  不能傳參

            ② 如果例項中修改了原型中的屬性(引用型別)或方法,那麼這個屬性或方法會被徹底的修改,而影響到其他例項。



四、建構函式+原型組合模式

function Person (Name,Age,Job) {

          this.name= Name

          this.age= Age

          this.job= Job

}

Person.prototype.sayName= function () {

          alert(this.name)

}

// 上面往原型上新增屬性和方法的也可如下寫,但是此時原型的constructor不指向Person建構函式,而是指向Object,因為Person.prototype就像一個新的物件例項,它的__proto__指向Object原型。

//  Person.prototype= {

          constructor: Person,            // 重新再例項中定義constructor的指向,覆蓋Object原型中的constructor指向

          sayName: function () {

                  alert(this.name)

          }

}

var personOne=  new Person("Erric",26,"Engineer");

var personTwo=  new Person("Lori",26,"teacher");


原型物件的理解(重要)

1.首先得明白以下三點:

① 每個函式(含建構函式)都有一個prototype屬性,指向Person原型

② 每個例項都有一個__proto__屬性,也指向Person原型

③ 每個原型都有一個constructor屬性,指向其對應的建構函式

建構函式、例項、原型三者關係如下圖:

4481904-65596048bd4f6ae9.png

2.萬物皆物件,說明原型鏈的最開始點都是Object,所以任何一個引用型別的 instanceof Object都會返回true。


類的繼承(兩種方式)

一、原型鏈繼承

        對於什麼是原型鏈?

        每個建構函式都有一個原型物件,原型物件的constructor指向這個建構函式本身,而例項的__proto__屬性又指向原型物件。這個假設一個例項的__proto__內部指標指向其原型,而它的原型又是另一個型別的例項,那麼它的原型又將指向另一個原型,另一個原型也包含一個指向它的建構函式的指標,假設另一個原型又是另一個型別的例項,這樣層層遞進,就構成了例項與原型的鏈條,這就是原型鏈的基本概念。

實現原型鏈的繼承方式基本如下:

function Father () {

      this.appearance = "beautiful"

}

Father.prototype.sayHappy = function () {

        alert("快樂")

}

function Child () {

          this.name= "Jhon"

}

Child.prototype= new Father()        //  繼承了父類的方法和屬性

Child.prototype.addArr= [1,2,3,4,5]

var child= new Child()
child.sayHappy()          //  彈出“快樂”
child.appearance        //  "beautiful"

child.addArr                      //  [1,2,3,4,5]

原型鏈繼承的缺點:①  不能傳參  ② 若原型上的方法時引用型別的話,不小心被修改了的話會影響其他例項。


二、藉助建構函式繼承(利用calll和apply改變this指標)

基本思路:在子型別建構函式的內部呼叫超型別的建構函式。

function Father (Hobby){

      this.hobby= Hobby

}

Father.prototype.sayHappy = function () {

      alert("快樂")

}

function Child () {

      this.name= "Jhon"

      Father.call(this,"Play Games")          //  或者Father.apply(this,["Play Games"]),繼承了Father的屬性和方法

}

var child =  new Child()
child.sayHappy                // 沒有反應,原型上的方法和屬性不會繼承
child.hobby                      //  "Play Games"

藉助建構函式繼承的缺點:①  方法都在建構函式中定義,函式的複用無從談起    ②  超類中的方法對子類不可見。


三、組合繼承(也叫經典繼承,將原型鏈和藉助建構函式繼承相結合)

思路:1.原型鏈實現對原型屬性和方法的繼承;

            2.建構函式實現對例項屬性的繼承,且呼叫基類的建構函式;

function Father(Hobby) {

          this.hobby= Hobby;

          this.exGF = ['cuihua', 'erya']

}

Father.prototype.sayHappy = function () {

          alert("快樂")

}

function Child () {

          this.name= "Jhon"

          Father.call(this,"Play Games")          //  或者Father.apply(this,["Play Games"]),繼承了Father的屬性和方法

}

Child.prototype= new Father()

Student.prototype.sayName= function () {

          alert(this.name);

}

var liHua= new Child()

liHua.sayHappy()

liHua.sayName()


檢測物件屬性的兩種方法:

object.hasOwnProperty(屬性名),這個方法檢測的是物件例項的屬性(若是返回true),不能檢測原型上的屬性。

in操作符,檢測物件所有的屬性,包含原型和例項上的額,有的話就返回true.


判斷一個原型是否在某個例項的原型鏈上:

Person.prototype.isPropotypeOf(personOne)    //  true

Object.prototype.isPropotypeOf(personOne)      //  true

判斷一個建構函式是否在例項的原型鏈中出現過:

personOne instanceof Person                //  true

personOne instanceof Object                //  true


ES6 物件導向

ES6中引入了Class(類)這個概念,通過關鍵字class可以建立一個類。類的資料型別就是函式,類的所有方法都定義在prototype屬性上。

class Person () {
        constructor (x,y) {
              this.name= x
              this.age= y
        }
        sayName () {
                alert("快樂")
        }
}
var liHua= new Person("張俊澤",26)

注: 可以理解為constuctor中的屬性和方法為ES5中的建構函式部分,和constructor同級的是ES5中原型上的方法和屬性。


ES6的繼承通過extends關鍵字實現

class Father(){}
class Child extends Father {
        constructor(x,y,color){
                  super(x,y)
                  this.color= color
        }
        toString() {
                retunr "世界和平!"
        }
}

上面程式碼中,constructor方法和toString方法之中,都出現了super關鍵字,它在這裡表示父類的建構函式,用來新建父類的this物件。

子類必須在constructor方法中呼叫super方法,否則新建例項時會報錯。這是因為子類沒有自己的this物件,而是繼承父類的this物件,然後對其進行加工。如果不呼叫super方法,子類就得不到this物件。


類的prototype和__proto__屬性

Class作為建構函式的語法唐,同時有prototype和__proto__屬性,因此存在兩條繼承鏈:

①  子類的__proto__,表示建構函式的繼承,總是指向父類

②  子類的prototype屬性的__proto__屬性,表示方法的繼承,總是指向父類的prototype屬性。

class Father {

}

class Child extends Father{

          constructor () {

                  super()

          }

}

var childOne= new Child()

Child.__proto__ ==  Father        //  true

childOne.__proto__ ==  Child.prototype        //  true

Child.prototype.__proto__ ==  Fahter.prototype            //  true

相關文章