1. 程式人生 > >JS面向物件程式設計(二) JS中的建構函式!

JS面向物件程式設計(二) JS中的建構函式!

JS中的建構函式是JS面向物件程式設計的核心,雖然ES6已經引入了Class類的概念,但是論靈活性還是建構函式更勝一籌。
一段程式碼,先對建構函式有基本的認識:

function Animal(name, type) {
        this.name = name;
        this.type = type;
        this.do = '';
        this.action = function () {
            switch (this.type) {
                case 'cat':
                    this.do = 'climb';
                    break;
                case 'dog':
                    this.do = 'fight';
                    break;
            }
            return this.do;
        }
    }

    var animal = new Animal('老虎','cat');
    console.log(animal.action()); //climb

表示式new,我總結出有以下四個步驟:

  1. 在建構函式中建立一個空物件。
  2. 將建構函式中的this指向該物件。
  3. 執行建構函式中的程式碼語句。
  4. 將填充完屬性和方法的物件return。

每一個建構函式在被建立的時候,都會自動生成一個prototype屬性,該屬性是一個空物件,也就是該建構函式的原型。

接著上面的程式碼:

console.log(Animal.prototype === animal.__proto__); //true

當建構函式的例項需要一個屬性時,會順著__proto__屬性向上查詢建構函式的原型。

 Animal.prototype.age = 10;
    console.log(animal.age); //10
console.log(animal.__proto__.age); //10

建議:在建立建構函式時,將屬性定義在函式中,方法定義在原型中。

建構函式的繼承:

function A(name) { 
        this.name = name;
    }
    
    A.prototype = { 
        'getName': function () {
            return this.name;
        }
    }

    function B(name, age) {
        A.call(this, name); //繼承父類屬性
        this.age = age;
    }

    B.prototype = new A(); //繼承父類方法
    B.prototype.constructor = B; //修復建構函式指向
    B.prototype.getAge = function () {
        return this.age;
    }
    var b = new B('B', 19);
    console.log(b.name); //B
    console.log(b.age); //19
    console.log(b.getName()); //B
    console.log(b.getAge()); //19