JS面向物件程式設計(二) JS中的建構函式!
阿新 • • 發佈:2018-12-22
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,我總結出有以下四個步驟:
- 在建構函式中建立一個空物件。
- 將建構函式中的this指向該物件。
- 執行建構函式中的程式碼語句。
- 將填充完屬性和方法的物件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