JavaScript面向對象的初步了解

面向對象

• 面向過程就是親力親為,事無巨細,面面俱到,步步緊跟
• 面向對象就是找一個對象,通過指揮得到結果
• 面向對象就是将執行者轉變成指揮者的思維轉變
• 面向對象不是面向過程的替代,而是面向過程的封裝

面向對象的特性

1. 抽象性
2. 封裝性
3. 繼承性

js是一個基于對象的多範式的程式設計語言,js中所謂的對象就是鍵值對的集合

如

{name:"chen",age:18,sex:"男"}

抽象性

1. 抽取核心資料,剔除無關屬性和行為組成一個對象.
2. 對象不在特定的環境不能明确指明到底是啥

封裝性

• 對象就是将資料和功能組合在一起即封裝
• js中對象就是鍵值對的集合

  • 鍵值如果是資料(基本資料,複合資料,空資料)就稱為屬性
  • 鍵值若是函數則稱為方法

• 對象就是将屬性和方法封裝起來,方法就是将過程封裝起來

繼承性

• 自己沒有但别人有的,拿過來成為自己的,為自己所有叫繼承
• 繼承是實作複用的一種手段
• js中沒有明确的繼承文法,一般都是按照繼承的理念來實作繼承,達到對象的成員擴充
• 是以,js中實作繼承的方式非常多,其中最簡單的方法叫混入(mix)

function mix(o1,o2){
    for(var k in o2){
        o1[k]=o2[k];
    }
}
var o1={name:"chen"};
var o2={age:};
mix(o1,o2);
           

面向對象思維

• 首先找對象
• 任何操作都交給對象完成

案例

面向過程做法

var div=document.createElement("div");//建立一個`div标簽`
document.body.appendChild(div);// 将div加入到頁面中
div.style.boder="1px solid red";//設定div樣式
div.style.width="400px";
div.style.height="300px";
           

面向對象方式思考

• 抽取對象(div和body是對象)
• 分析屬性和方法(加到,設定樣式)

初級面向對象

function DivTag(){
      this.myDiv=document.createElement("div");//建立div
      this.addToBody=function(node){//把div添加到節點
          node.appendChild(this.myDiv);
      };
      this.addStyle=function(name,value){//為div添加樣式
            this.myDiv.style[name]=value;
      };
      this.addCss=function(option){//添加樣式的友善寫法
            for(var k in option){
                this.myDiv.style[k]=option[k];
            }
      };  
}
var divTag=new DivTag();
divTag.addToBody(document.body);//把div加入到body中
divTag.addStyle("width","400px");
      ...
divTag.addCss(//通過傳入對象形式資料修改div樣式
   { "boder":"1px solid red",
     "height":"200px"
   }
);
           

中級面向對象

function DivTag(){
    this.myDiv=document.createElement("div");
    this.addToBody=function(node){
        node.appendChild(this.myDiv);
        return this;//這步很關鍵,讓同一個對象可以連續調用多個方法
    };
    this.addCss=function(option){
        for(var k in option){
            this.myDiv.style[k]=option[k];
        }
        return this;//
    };
}
  new DivTag().addToBody(document.body).addCss({//封裝性更高,更加簡潔
   width:"100px",
   height:"39px",
   boder:"1px solid blue"
  });
           

總結

        通過以上三種方式實作同一案例的過程,把js面向對象的特性的優點展現的淋漓盡緻,傳統的面向過程的方法中,需求要啥就去幹啥,一步一步的循規蹈矩的實作,若要建立多個div,則所有步驟都要重新再執行一遍,缺點不言而喻;

        若按照面向對象的方法來處理,則先div的建立,加入到節點中,添加樣式,等三大功能都放入到相應的函數中執行,然後再建立相應的對象,用對象來調用相應的方法來完成相應的功能,如此一來,若要建立div,隻需多建立一個對象罷了,代碼複用性大大提高,而且若資料封裝性越高,則面向對象的程度越高,你想幹啥就幹啥,真正的達到為所欲為.這就是當老闆指揮員工幹活和自己當員工事事親為的差别吧,當然再怎麼面向對象,到最底層總要有相應的代碼當員工,事事親為,要不然怎麼說面向對象不是面向過程的替代,而是面向過程的封裝