JavaScript物件導向-- 原型之共用方法&屬性
想先說一下, 學習日誌的內容並不完全都是我自己想來的... 只是為了學習、學會和紀錄而寫。
之前寫到因為工廠方式會複製相同方法, 導致記憶體浪費。
但如果在原型上新增方法, 就能只定義一次方法, 不產生重複定義相同方法的困擾。
在新增屬性時也能以此類推。
先看共用方法:
e.g.
function CreatePerson(name, sex) {
this.name = name;
this.sex = sex;
}
CreatePerson.prototype.showName = function() {
console.log("my name: " + this.name);
};
CreatePerson.prototype.showSex = function() {
console.log("my sex: " + this.sex);
};
var p1 = new CreatePerson("Mark", "man");
var p2 = new CreatePerson("Jack", "man");
console.log(p1.showName === p2.showName); // true, 可知p1&p2共用相同一份 的方法
再看共用屬性:
e.g.
function Obj() {
this.name = "Mark";
this.run = function() {
// code
};
}
var a = new Obj();
var b = new Obj();
var c = new Obj();
Obj.prototype.height = 15; // 這樣a、b、c都有相同的屬性了。
由上可知:
Obj.prototype === a.__proto__ // true
因而
Obj.prototype.height === a.__proto__.height // true
而b&c也會得到相同的相等結果
p.s. JavaScript是prototype-based的語言。 懂了原型, 就懂了物件導向。
之前寫到因為工廠方式會複製相同方法, 導致記憶體浪費。
但如果在原型上新增方法, 就能只定義一次方法, 不產生重複定義相同方法的困擾。
在新增屬性時也能以此類推。
先看共用方法:
e.g.
function CreatePerson(name, sex) {
this.name = name;
this.sex = sex;
}
CreatePerson.prototype.showName = function() {
console.log("my name: " + this.name);
};
CreatePerson.prototype.showSex = function() {
console.log("my sex: " + this.sex);
};
var p1 = new CreatePerson("Mark", "man");
var p2 = new CreatePerson("Jack", "man");
console.log(p1.showName === p2.showName); // true, 可知p1&p2共用相同一份 的方法
再看共用屬性:
e.g.
function Obj() {
this.name = "Mark";
this.run = function() {
// code
};
}
var a = new Obj();
var b = new Obj();
var c = new Obj();
Obj.prototype.height = 15; // 這樣a、b、c都有相同的屬性了。
由上可知:
Obj.prototype === a.__proto__ // true
因而
Obj.prototype.height === a.__proto__.height // true
而b&c也會得到相同的相等結果
p.s. JavaScript是prototype-based的語言。 懂了原型, 就懂了物件導向。
留言
張貼留言