js OOP編程，jsoop編程

js OOP編程，jsoop編程

今天來總結下關於JavaScript的物件導向編程！

一、封裝
/*1. 產生對象的原始模式*/

var Cat = {name:'',color:''}//根據這個原型對象的規格，產生2個執行個體對象。var cat1 = {};cat1.name = "大毛";cat1.color = "黃色";var cat2 = {};cat2.name = "二毛";cat2.color = "黑色";//缺點：1.代碼冗餘 2.執行個體之間看不出聯絡，它們屬於object

/*2. 原始模式改進（原廠模式）*/

function Cat(name,color){return {name:name,color:color}}//使用：var cat1 = Cat("大毛","黃色");var cat2 = Cat("二毛","黑色");//缺點：1.執行個體之間看不出聯絡，它們屬於object

/*3. 建構函式模式*/

function Cat(name,color){this.name = name;this.color = color;}//使用：var cat1 = new Cat("大毛","黃色");var cat2 = new Cat("二毛","黑色");//這時，cat1和cat2會自動包含一個constructor屬性，指向它們的建構函式alert(cat1.constructor == Cat);//truealert(cat2.constructor == Cat);//truealert(cat1 instanceof Cat);//truealert(cat2 instanceof Cat);//true//缺點：浪費記憶體

/*4. 建構函式模式的問題和Prototype模式*/

function Cat(name,color){this.name = name;this.color = color;this.type = "貓科動物";this.eat = function(){alert("吃老鼠");}}//使用：var cat1 = new Cat("大毛","黃色");var cat2 = new Cat("二毛","黑色");//實際上這樣做是十分浪費記憶體的，因為type屬性和eat方法是所有Cat類都應該有的，//沒有必要每次執行個體化的時候都為這兩個屬性分配空間。//從這裡可以看出為它們另外分配了空間：alert(cat1.type == cat2.type);//falsealert(cat1.eat == cat2.eat);//false//下面用prototype模式可以解決這個問題//javascript規定，每一個建構函式都有一個prototype屬性，指向另一個對象。//這個對象的所有屬性和方法，都會被建構函式的執行個體繼承。//這樣，我們就可以將那此不變的屬性和方法，直接定義在prototype對象中。function Cat(name,color){this.name = name;this.color = color;}Cat.prototype.type = "貓科動物";Cat.prototype.eat = function(){alert("吃老鼠");}//prototype對象是一個類所有執行個體公用的，可以以此來驗證：alert(cat1.type == cat2.type);//truealert(cat1.eat == cat2.eat);//true//指向同一空間

/*5. prototype模式的驗證方法*/

1).isPrototypeOf()//用來判斷，某個prototype對象和某個執行個體之間的關係。alert(Cat.prototype.isPrototypeOf(cat1));//truealert(Cat.prototype.isPrototypeOf(cat2));//true2).hasOwnProperty()//用來判斷，一個屬性是不是區域屬性alert(cat1.hasOwnProperty("name"));//truealert(cat1.hasOwnProperty("type"));//false//type屬性是繼承自prototype對象的屬性，不是區域屬性，所以為false3).in運算子//用來判斷，某個執行個體是否含有某個屬性，不管是不是區域屬性。alert("name" in cat1);//truealert("type" in cat1);//true//in運算子還可以用來，遍曆某個對象的所有屬性。for(var prop in cat1){alert(cat1[prop]);}

二、繼承
/*1.“建構函式”繼承*/

function Animal(){this.species = '動物';}function Cat(name,color){this.name = name;this.color = color;}//問題：怎樣才能讓“貓”繼承“動物”呢？

/*1）. 建構函式綁定*/

function Cat(name,color){Animal.apply(this,arguments);//實際上是調用了父類的建構函式this.name = name;this.color = color;}

/*2）. prototype模式*/

Cat.prototype = new Animal();Cat.prototype.constructor = Cat;

/*3）. 直接繼承prototype*/

//這種方法是對第二種方法的改進，由於Animal對象中，//不變的屬性都可以直接寫入Animal.prototype，所以我們也可以讓Cat()跳過Animal(),//直接繼承Animal.prototype//改寫Animal對象：function Animal(){}Animal.prototype.species = '動物';//開始繼承：Cat.prototype = Animal.prototype;Cat.prototype.constructor = Cat;//與前一種方法相比，這樣做的優點是效率高（不用建立Animal執行個體），比較節省記憶體//缺點：Cat.prototype和Animal.prototype現在指向了同一個對象，那麼任何對//Cat.prototype的修改，都會反映到Animal.prototype中，這並不是我們想要的

/*4）. 利用Null 物件作為中介*/

//正因為存在上述的缺點，所以才有了第四種繼承方式，利用一個Null 物件作為中介實現繼承。var F = function(){}F.prototype = Animal.prototype;Cat.prototype = new F();Cat.prototype.constructor = Cat;//F是Null 物件，所以幾乎不佔用記憶體。//為了使用的方便，將其封裝一下：function extend(Child, Parent) {var F = function(){};F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;Child.uber = Parent.prototype;//主要是用來做擴充的}

/*5）. 拷貝繼承*/

//對於父類，還是將它所有不變的屬性放到它的prototype對象中。function Animal(){}Animal.prototype.species = '動物';function extend2(Child, Parent){var p = Parent.prototype;var c = Child.prototype;for(var i in p){ c[i] = p[i];}c.uber = p;}

/*2.“非建構函式”繼承*/

var Chinese = {nation:'中國'};var Doctor = {career:'醫生'}//怎樣讓“醫生”去繼承“中國人”，從而得到一個中國醫生對象？//註：這裡的兩個對象都是普通對象，而不是建構函式，無法使用建構函式方法實現繼承。

/*1）. object()方法*/

function object(o){function F() {}F.prototype = o;return new F();}

/*2）. 淺拷貝方法*/

function extendCopy(p){var c = {};for(var i in p){c[i] = p[i];}c.uber = p;return c;}

/*3）. 深拷貝方法*/

function deepCopy(p,c){var c = c||{};for(var i in p){if(typeof p[i] === 'object'){c[i] = (p[i].constructor === Array) ? [] : {};deepCopy(p[i],c[i]);} else {c[i] = p[i];}}}return c;}