好程式設計師web前端學習路線之Javascript物件導向

好程式設計師web前端學習路線之Javascript物件導向，物件導向是使用物件，物件導向開發就是使用物件開發。

程式導向就是用過程的方式進行開發，物件導向是對程式導向的封裝

物件導向的三大特性：

1. 抽象性：

　　如果需要一個物件描述資料，需要抽取這個物件的核心資料，提出需要的核心屬性和方法，不在特定的環境下無法明確物件的具體意義。

　　狹義的抽象，也就是程式碼裡的抽象，就是把一些相關聯的業務邏輯分離成屬性和方法（行為），這些屬性和方法就可以構成一個物件。

　　這種抽象是為了把難以理解的程式碼歸納成與現實世界關聯的概念，比如美食這樣一個物件：屬性可以歸納出“海底撈”、“自助餐”、“蓋飯”等等；方法（行為）可以歸納出“貴”、“實惠”、“便宜”等。

var fineFood = {

   name: '海底撈',

   seat: '貴賓座',

   Number: 4,

   shout: function() {

       console.log('貴貴貴'); //這裡是你的業務邏輯程式碼，這裡我就簡單用這個來代替

   },

   eat: function() {

       console.log('吃土吧，哈哈！');

   },

   Reason: function() {

       console.log('貴是有原因');

   }

};

1. 封裝性：

　　物件是將資料與功能組合在一起，簡單的理解這就是封裝

1. Javascript物件就是鍵值對的集合，鍵值如果是資料就稱之為屬性，如果鍵值是函式就稱之為方法。
2. 　　物件就是將屬性與方法封裝起來
3. 　　方法將是過程封裝起來

　　封裝就是將抽象出來的資料與對資料的操作封裝在一起。資料被保護在內部，程式的其他部分只有透過授權的操作才能進行對資料進行操作。

 JS封裝只有兩種狀態，一種是公開的，一種是私有的。

function Person(name,seatl){

   this.name=name;         //公開

   var seat=seat;                 //私有

   this.showInfo=function(){ //公開

       window.alert(this.name+" "+seat);

   }

   function showInfo2(){      //把函式私有化

       window.alert("你好"+this.name+" "+seat);

   }

}

var p1 = new Person('Cece', 20, 10);

window.alert(p1.name + " is " +p1.age); //Cece is undefined

p1.showInfo();//Cece 20

p1.showInfo2();//報錯

　　建構函式方式與原型方式給物件新增方法的區別:

//1.透過建構函式方式給物件新增方法

function fineFood(name){

   this.name=name;

   this.seat=function(){

       window.alert("有請"+this.name + "幾位貴賓");

   }

}

var fineFood1=new fineFood("aa");

var fineFood2=new fineFood("bb");

if(fineFood1.shout==fineFood.shout){

   window.alert("相等");

}else{

   window.alert("不相等");

}

//會輸出“不相等”

//2.透過原型方式給物件新增方法

function fineFood(name){

   this.name=name;    

}

fineFood.prototype.shout=function(){

   window.alert("有請"+this.name + "幾位貴賓");

}

var fineFood1=new fineFood("aa");

var fineFood2=new fineFood("bb");

if(fineFood1.shout==fineFood2.shout){

   window.alert("相等");

}else{

   window.alert("不相等");

}

//會輸出“相等”

 透過prototype給所有的物件新增方法，但是這種方式不能去訪問類的私有變數和方法；說明透過建構函式來分配成員方法，給每個物件分配一份獨立的程式碼。這樣的弊端就是如果物件例項有很多，那函式的資源佔用就會很大，而且有可能造成記憶體洩漏。而原型法是大家共享同一份程式碼，就不會有那種弊端。

　　因此，透過建構函式新增成員方法和透過原型法新增成員方法的區別：

1）.透過原型法分配的函式是所有物件共享的；

2）.透過原型法分配的屬性是獨立的；

3）.如果希望所有的物件使用同一個函式，最好使用原型法新增方法，這樣比較節省記憶體。

1. 繼承性

　　函式是可以繼承另外一個物件，建構函式例項化出來的物件除了本身成員外還有擁有被繼承物件的成員。

　　原型鏈是一種機制，指的是 JavaScript 每個物件都有一個內建的 _proto_ 屬性指向建立它的建構函式的 prototype（原型）屬性。

　　原型鏈的作用是為了實現物件的繼承，要理解原型鏈，需要先從函式物件、constructor、new、prototype、_proto_ 這五個入手。

函式物件 
在 JavaScript 裡，函式即物件，程式可以隨意操控它們。比如，可以把函式賦值給變數，或者作為引數傳遞給其他函式，也可以給它們設定屬性，甚至呼叫它們的方法。

// 普通物件：

var o1 = {};

var o2 = new Object();

//函式物件：

function f1(){};

var f2 = function(){};

var f3 = new Function('string','console.log(string)');

簡單的說，凡是使用 function 關鍵字或 Function 建構函式建立的物件都是函式物件。而且，只有函式物件才擁有 prototype （原型）屬性。

constructor 建構函式  

函式還有一種用法，就是把它作為建構函式使用。像 Object 和 Array 這樣的原生建構函式。此外，也可以建立自定義的建構函式，從而自定義物件型別的屬性和方法。

function Person(name, age, job){

    this.name = name;

    this.age = age;

    this.job = job;

    this.sayName = function(){

        console.log(this.name);

    };

}

var person1 = new Person("Stone", 28, " aa ");

var person2 = new Person("Sophie", 29, " bb ");

　　我們建立了一個自定義建構函式 Person()，並透過該建構函式建立了兩個普通物件 person1 和 person2，這兩個普通物件均包含3個屬性和1個方法。

你應該注意到函式名 Person 使用的是大寫字母 P。按照慣例，建構函式始終都應該以一個大寫字母開頭，而非建構函式則應該以一個小寫字母開頭。這個做法借鑑自其他面嚮物件語言，主要是為了區別於 JavaScript 中的其他函式；因為建構函式本身也是函式，只不過可以用來建立物件而已。

new 運算子

　　要建立 Person 的新例項，必須使用 new 運算子。以這種方式呼叫建構函式實際上會經歷以下4個步驟：

1. 建立一個新物件；

2. 將建構函式的作用域賦給新物件（因此 this 就指向了這個新物件）；

3. 執行建構函式中的程式碼（為這個新物件新增屬性）；

4. 返回新物件。