js中的面向對象（一）封裝

1.簡單的封裝（定義）

var cat1 = {};
    cat1.name = '阿黃';
    cat1.sex = '男';
    cat1.age = 11;
    //cat2也同樣具有三個屬性
    var cat2 = {};
    cat2.name = '小黑';
    cat2.sex = '女';
    cat2.age = '10';

把cat1和cat2看成是一個對象，ta們都具有三個屬性。

缺點：一時如果有多個對象，寫起來就比較麻煩，二是實例和原型之間沒有任何聯系；

2.原始模型封裝（在1的基礎上進行改進）

function Cat(name,sex,age){
        return {
            name:name,
            sex:sex,
            age:age
        }

    }
    var cat1 = Cat('小黃','男','11');
    var cat2 = Cat('小黑','女','10');
    alert(cat1.name);

缺點：cat1和cat2沒有什么內在聯系，不能反應他們是同一原型對象的實例

3.構造函數的封裝

function Cat(name,age,sex){
    this.name = name;
    this.sex = sex;
    this.age = age;
}
var cat1 = new Cat('小黃','男','11');
var cat2 = new Cat('小黑','女','10');

表面上是沒有什么缺點，但是如以下代碼

function Cat(name,age,sex){
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.type = '貓科動物';
}
var cat1 = new Cat('小黃','男','11');
var cat2 = new Cat('小黑','女','10');

cat1和cat2都是屬於貓科動物，但是在創建對象原型Cat的實例cat1和cat2時都會創建一次type屬性；這樣就會造成內存的浪費。

4.prototype模式

function Cat(name,sex,age){
    this.name = name;
    this.sex = sex;
    this.age = age;
}
Cat.prototype.type = '貓科動物';
Cat.prototype.say = function (){alert("喵喵");};
var cat1 = new Cat();
alert(cat1.type);

 

原理：Javascript規定，每一個構造函數都有一個prototype屬性，指向另一個對象。這個對象的所有屬性和方法，都會被構造函數的實例繼承。

個人理解是將相同的屬性“放在”一個內存之中，當創建cat1和cat2實例時，他們的屬性都會指向同一個內存，從而不用重復創建。

prototype驗證

1)isPrototypeOf

2)hasOwnProperty

3)in

本文參考

阮一峰的博客