前端開發：javascript中的面向對象

前端開發：面向對象與javascript中的面向對象實現（一）

面向對象理解：

　　面向對象是一種對現實世界理解和抽象的方法，是一種先進的程序設計理念，是一種比較抽象的，多形態的設計模式。我們可以這么理解：“萬物皆對象”，我面向了它，即“面向對象”。例如，面前有一台電視機，深入剖析，這個電視機具有哪些特性？

     ①  它是開着的或者是關着的；

     ②  它有幾個按鈕，包括（開關鍵、音量鍵、上一個節目、下一個節目）；

     ③  有一個機頂盒用來接收數據

　　類的概念

　　現在，我們把電視看成一個對象，它的抽象化就是類，對象的抽象是類，類的具體化就是對象，也可以說類的實例是對象，也就是說，類==對象==實例

　　類的方法

　   類有很多個方法，現在我們可以把電視機看成一個類，它現在有哪些方法呢？ 開關、音量、節目；這是它的方法，就是類的方法；我們不需要去關心按下開關電視經歷了什么樣的開機過程，我們只需要知道，我按下了開關，它就會開啟。

　　私有與公共

　　可以被用戶訪問到的方法叫做公共方法，而那些只可以被類訪問的方法叫做私有方法，沒錯，就是數據，電視機在接收電視台的信息的時候，我們是不能控制的，它在內部調用了一個方法。哦~我們按下了開關這個方法，然后開關這個方法調用了一個私有的接收信息方法，然后電視就被另一個私有方法（顯示在屏幕上）顯示出來了。

　　繼承

　　現在，我覺得我的電視機屏幕顯示效果太爛，行，換個新的。在換上的時候，我們可以說，哦~現在電視機又多了一個顯示器，擁有了這個顯示器的所有控制按鈕與控制接口（開關，音量等等），那我們就可以認為，電視機繼承了這一個新的顯示器，它繼承了這個顯示器的方法，它現在就可以調用這個顯示器的顯示方法，把電視顯示在新的顯示器上面。

　　一張詳解圖：

 

javascript中面向對象實現（1）：

　　在javascript中實現面向對象沒有其他oo語言那樣簡便，因為它並沒有直接規定class標識等等，要實現它有很多種方法，博主暫且舉一個最常見的栗子，其它的篇幅過長，我們在下一章一一詳解：

//創建自定義數據格式
        
        function DianZan(){
            //構造函數
        }
        DianZan.prototype = {
            //給類添加方法
                dianzan:function(){
                    alert("給博主點一個贊");
                },
                budianzan:function(){
                    alert("狠心拒絕");
                }
            }
        
        var dianzan = new DianZan();   //創建了一個實例（類）
        
        dianzan.dianzan(); //調用方法點贊

首先，我們創建了一個構造函數，然后給構造函數的原型添加了兩個方法，最后，創建一個dianzan示例（類），然后調用點贊方法

前端開發：面向對象與javascript中的面向對象實現（二）構造函數與原型

1.原型：

　　javascript中沒有提供傳統的面向對象語言中的類（class）式繼承，而是通過原型委托的方式來實現的對象與對象之間的繼承，javascript也沒有抽象類和接口，它在實現類或者設計模式的時候，原型模式提供了類似的方法。原型是用於創建對象的一種模式，可以理解為：“一個對象繼承了另一個對象的屬性和方法，那么就可以說被繼承的對象是這個對象的原型”，更具體的說，就是，對象a通過某種方法引用對象b的屬性，那么可以就可以說b是a的原型； 栗子：

/*克隆對象*/
function concat(obj){　　　　
    if(obj instanceof Object){
        if(Object.create!=undefined){　　　
            return Object.create(obj);　　//html5規范中新增Object.create（）方法
        }else{
            var F = function(){
            }
            F.prototype = obj;
            return new F();
        }
    }else{
        return -1;
    }
}
var A = {　　　　　　　　　　　　　　
    "name":"zhangtaifeng",
    "age":"21"
}
var B = concat(A);
/*************對象B的原型是A*************/
B.job = "qianduankaifa";
alert(B.name);

上面的代碼中，對象B通過concat方法克隆了一個對象A（） 此時對象A是對象B的原型對象，而最后 B.job = "qianduankaifa"; 則是B對象的默認方法；我們分析控制台打印的結果：

html5規范中新增的Object.create（）方法，它將A對象的引用指向了B對象的__proto__屬性，__proto__即原型對象在javascript中的表現形式，在firefox控制台中打印可以看到，我們創建的每一個函數都有一個prototype原型屬性，而這個對象的用途是包含可以由特定的類型的所有
實例共享的屬性和方法

上面這段要理解起來着實不容易，簡單的說，javascript中所有的對象都有一個prototype的原型屬性，它是用來保存多個對象共享的屬性方法的。
來個小例子：我們用來充電的插線板，你把手機通過充電器連接過去，開始充電，那么這個時候，我們如果把手機看成一個對象，這時候可以說插板是手機的充電原型。手機獲得了插板的屬性----電流；充電器就是他們中間的指針，連接的指針。這時候手機還是可以做其他操作的。
實際上，每個對象默認的原型屬性是從Obejct對象克隆繼承來的，所以你可以說，對象B的原型是Object；

var A = {
    "name":"zhangtaifeng",
    "age":"21"
}

console.log(A.__proto__===Object.prototype);　　//true

這段代碼最后返回了true； 說明，javascript所有的對象都默認繼承了Object.prototype 所以對象可以調用Object提供的操作方法；

2.構造函數：

　　　構造函數是一個創建對象的方法，通過new fn（）的形式創建，它可以被看作類，但是它並不是類，而是函數構造器，javascript的函數既可以作為普通函數被調用，也可以作構造器被調用。當時用new操作符來調用函數時，這個函數就是一個構造函數，它會默認返回一個新的對象，用new運算符來創建對象的過程，實際上也是克隆Object.prototype對象，再進行一些其他操作的過程。

var Parse = function(){　　　　　　　　
    this.name = "zhangtaifeng";    
}

var Parse01 = new Parse();　　　　//到這一步 通過new操作符調用了Parse（） 那么此時的Parse就是一個構造函數 
alert(Parse01.name)　　　　　　//zhangtaifeng

構造函數命名首字母需大寫，我們打印Parse01查看它的結果：

與上面的對象是同樣的，它其實是創建了一個對象並賦值給了Parse01。

構造函數中可以直接設置他的原型對象屬性：

var Parse = function(){
    this.name = "zhangtaifeng";    
}
    Parse.prototype = {
        "age":"21"
    }
var Parse01 = new Parse();
alert(Parse01.age)

此時我們再次打印查看結果：

我們可以理解為，每個對象都有一個prototype原型屬性，而構造函數的作用就是創建一個對象，只是它可以顯示的通過Parse.prototype設置prototype的屬性 此時Parse的原型是Parse.prototype這個對象。

 原文鏈接：https://www.cnblogs.com/ztfjs/p/oob.html