好程序員web前端學習路線之Javascript面向對象

好程序員web前端學習路線之Javascript面向對象，面向對象是使用對象，面向對象開發就是使用對象開發。

面向過程就是用過程的方式進行開發，面向對象是對面向過程的封裝

面向對象的三大特性：

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

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

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

var fineFood = {

???name: '海底撈',

???seat: '貴賓座',

???Number: 4,

???shout: function() {

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

???},

???eat: function() {

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

???},

???Reason: function() {

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

???}

};

封裝性：
　　對象是將數據與功能組合在一起，簡單的理解這就是封裝

Javascript對象就是鍵值對的集合，鍵值如果是數據就稱之為屬性，如果鍵值是函數就稱之為方法。
　　對象就是將屬性與方法封裝起來
　　方法將是過程封裝起來
　　封裝就是將抽象出來的數據與對數據的操作封裝在一起。數據被保護在內部，程序的其他部分只有通過授權的操作才能進行對數據進行操作。

?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）.如果希望所有的對象使用同一個函數，最好使用原型法添加方法，這樣比較節省內存。

繼承性
　　函數是可以繼承另外一個對象，構造函數實例化出來的對象除了本身成員外還有擁有被繼承對象的成員。

　　原型鏈是一種機制，指的是 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. 返回新對象。