JavaScript物件導向-- 開始建立物件
就這樣, 首先,我們需要先用new建立物件的實體。
因為JavaScript沒有類別(Class), 但能以function作為Class:
用不用new的差別(如果沒加new, 則視為在全域上新增方法或屬性):
function show() {
console.log(this);
}
show(); // this === window{}
但要是:
new.show(); // this === show{}, 會把function show() {}當成藍圖或範本
以下是將上篇的工廠方式以new產生物件實體(Instance):
function CreatePerson(name, sex) {
//系統內部執行(因而能省略)
//var this = new Object();
//加工
this.name = name;
this.sex = sex;
this.showName = function() {
console.log("my name:" + this.name);
};
this.showSex = function() {
console.log("my sex:" + this.sex);
};
//系統內部執行(因而能省略)
//return this;
}
var p1 = new CreatePerson("Mark", "man");
var p2 = new CreatePerson("Susan", "woman");
解決了new問題, 再者要處理重複定義方法的問題:
用原型(prototype)能解決在建立物件時, 不重複產生方法的問題 --> 在類別上才能建立原型, 實體上無法。
在原型上新增的方法, 是所有物件實體能共享的:
var ary1 = new Array(12, 55, 43, 32, 44);
var ary2 = new Array(12, 33, 1);
Array.prototype.sum = function() {
var output = 0;
for (var i = 0; i < this.length; i++) {
output += this[i];
}
return output;
};
console.log(ary1.sum()); // ary1.sum === ary1.__proto__.sum // true
console.log(ary2.sum());
測試: ary1.sum() === ary2.sum() //true
而當ary1只在自己物件上新增方法, 則會先優先使用自己的方法, 而非在原型上新增的方法:
e.g.
ary1.sum = function() {
return -1;
};
ary1.sum(); // -1
ary2. sum(); // 46
console.dir(ary1) : 一開始便找到sum方法
console.dir(ary2) : 一開始找不到, 要到__proto__找到在原型新增的sum方法,
所以:
ary1.sum === ary1.__proto__.sum // false
ary1.sum === ary2.__proto__.sum // false
p.s. 當瀏覽器在找新增的方法時, 會從物件本身一直往上層找, 可分:
ary2.sum // 在此找不到新增的方法
ary2.__proto__.sum // proto是Array, 在這裡找到原型中新增的方法
ary2.__proto__.__proto__ // 1st proto是Array; 2nd proto是Object
ary2.__proto__.proto__.__proto__ // 1st proto是Array; 2nd proto是Object; 3rd proto 被定義為null
因為JavaScript沒有類別(Class), 但能以function作為Class:
用不用new的差別(如果沒加new, 則視為在全域上新增方法或屬性):
function show() {
console.log(this);
}
show(); // this === window{}
但要是:
new.show(); // this === show{}, 會把function show() {}當成藍圖或範本
以下是將上篇的工廠方式以new產生物件實體(Instance):
function CreatePerson(name, sex) {
//系統內部執行(因而能省略)
//var this = new Object();
//加工
this.name = name;
this.sex = sex;
this.showName = function() {
console.log("my name:" + this.name);
};
this.showSex = function() {
console.log("my sex:" + this.sex);
};
//系統內部執行(因而能省略)
//return this;
}
var p1 = new CreatePerson("Mark", "man");
var p2 = new CreatePerson("Susan", "woman");
解決了new問題, 再者要處理重複定義方法的問題:
用原型(prototype)能解決在建立物件時, 不重複產生方法的問題 --> 在類別上才能建立原型, 實體上無法。
在原型上新增的方法, 是所有物件實體能共享的:
var ary1 = new Array(12, 55, 43, 32, 44);
var ary2 = new Array(12, 33, 1);
Array.prototype.sum = function() {
var output = 0;
for (var i = 0; i < this.length; i++) {
output += this[i];
}
return output;
};
console.log(ary1.sum()); // ary1.sum === ary1.__proto__.sum // true
console.log(ary2.sum());
測試: ary1.sum() === ary2.sum() //true
而當ary1只在自己物件上新增方法, 則會先優先使用自己的方法, 而非在原型上新增的方法:
e.g.
ary1.sum = function() {
return -1;
};
ary1.sum(); // -1
ary2. sum(); // 46
console.dir(ary1) : 一開始便找到sum方法
console.dir(ary2) : 一開始找不到, 要到__proto__找到在原型新增的sum方法,
所以:
ary1.sum === ary1.__proto__.sum // false
ary1.sum === ary2.__proto__.sum // false
p.s. 當瀏覽器在找新增的方法時, 會從物件本身一直往上層找, 可分:
ary2.sum // 在此找不到新增的方法
ary2.__proto__.sum // proto是Array, 在這裡找到原型中新增的方法
ary2.__proto__.__proto__ // 1st proto是Array; 2nd proto是Object
ary2.__proto__.proto__.__proto__ // 1st proto是Array; 2nd proto是Object; 3rd proto 被定義為null
留言
張貼留言