閱讀《JavaScript設計模式》第二章心得

標籤：判斷   區別   title   動作   pre   net   subclass   模式   ext   

物件導向編程

物件導向編程就是將你的需求抽象成一個對象。然後針對這個對象分析其特徵（屬性）與動作（方法）。這個對象我們稱之為類。物件導向編程思想其中的一個特點就是封裝。

1、私人屬性、私人方法、特權方法、對象公有屬性、對象公有方法、構造器和類靜態公有屬性、類靜態公有方法、公有屬性、公有方法

var Book = function (id,name,price){

　　//私人屬性

　　var num = 1;

　　//私人方法

　　function checkId(){};

　　//特權方法

　　this.getName = function(){};

　　this.getPrice = function(){};

　　this.setName = function(){};

　　this.setPrice = function(){};

　　//對象公有屬性

　　this.id=id;

　　//對象公有方法

　　this.copy=function(){};

　　//構造器

　　this.setName(name);

　　this.setPrice(price);

};

//類靜態公有屬性（對象不能訪問）

Book.isChinese = true;

//類靜態公有方法（對象不能訪問）

Book.resetTime = function(){

　　console.log(‘new Tiem‘)

};

Book.prototype = {

　　//公有屬性

　　isJSBook : false;

　　display : function(){}

}

測試代碼如下

var b = new Book(11,22,33);

console.log(b.num);        //undefined

console.log(b.isJSBook);     //false

console.log(b.id);                    //11

console.log(b.isChinese);    //undefined

console.log(Book.isChinese);     //true

Book.resetTime();                         //new Tiem

2、閉包實現

閉包是有權訪問另一個函數範圍中變數的函數，即在一個函數中建立另一個函數。

new關鍵字的作用可以看作是對當前對象的this不停的賦值。如果執行個體化的時候不寫new就相當於在全域範圍中執行了執行個體化函數，那麼執行個體化就會出現問題

由於小程式中沒有window對象，所以在全域執行個體化不帶new時候就會報錯，但是網頁中就不會報錯。

解決忘記寫new的方法是使用安全模式，代碼如下：

var Book = function (title, time, type){

　　//判斷執行過程中this是否是當前這個對象（如果是說明是用new建立的）

　　if(this instanceof Book){

　　　　this.title = title;

　　　　this.time = time;

　　　　this.type = type;　　

　　}else{

　　　　return new Book(title,time,type);

　　}

}

3、繼承

 new之後的變數是沒有prototype的 ,只有__proto__屬性，也就是執行個體化之後就沒有prototype原型了,但是prototype是等於執行個體化之後的__proto__的。執行個體化之後的變數的__proto__中的constructor是等於執行個體化之前的建構函式的。

但是在列印執行個體化之後的建構函式時可以這樣：

console.log(a.__proto__.constructor)

也可以這樣

console.log(a.constructor)

列印出來的都是執行個體化之前的建構函式，因為如果尋找一個屬性在變數中找不到就會去變數的隱藏屬性__proto__中去找。

JavaScript中除了數字、字串、布爾值、null和undefined之外的就是對象了，所以數組是對象，對象之間相互賦值只是更換的記憶體位址，記憶體位址所指向的值都是一樣的，是會相互影響的。

詳情請戳這      JavaScript中實值型別和參考型別的區別 

下面放寄生組合式繼承執行個體：

 1 function inheritObject(o){ 2   function F(){} 3   F.prototype = o; 4   return new F(); 5 } 6  7 function inheritPrototype(subClass,superClass){ 8   var p = inheritObject(superClass.prototype); 9   console.log(p)10   console.log(superClass)11   p.constructor = subClass;12   subClass.prototype = p13 }14 15 function SuperClass(name){16   this.name = name;17   this.colors = ["red","blue","green"];18 }19 SuperClass.prototype.getName = function(){20   console.log(this.name)21 }22 function SubClass(name,time){23   SuperClass.call(this,name)24   this.time = time;25 }26 27 28 inheritPrototype(SubClass,SuperClass);29 SubClass.prototype.getTime = function(){30   console.log(this.time)31 }32 var instance1 = new SubClass("js book",2014)33 var instance2 = new SubClass("css book",2013)34 35 instance1.colors.push("black")36 console.log(instance1.colors)37 console.log(instance2.colors)38 instance2.getName();39 instance2.getTime();

 4、多繼承

 關於js中的for  in和in用法

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

閱讀《JavaScript設計模式》第二章心得