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


留言

熱門文章