JS面向對象使用面向對象進行開發

面向對象基礎一之初體驗使用面向對象進行開發

對 JS 中的面向對象的基礎進行講述, 初體驗使用面向對象進行開發

主要內容是

1. 面向對象的概念及特性
2. 用面向對象的方式解決簡單的標籤建立實例

一些基礎的概念

面向對象

面向對象的概念

1. 面向對象就是使用對象
2. 面向對象開發就是使用對象開發
3. 面向過程就是以過程的方式開發
4. 面向對象是面向過程的封裝

面向對象的特性

1. 抽象性

   若是須要用一對象來描述一個數據, 那就須要抽取這個對象的核心數據來描述

   • 抽取須要的核心屬性和方法
   • 須要在特定狀況下,才能明確對象的具體意義

2. 封裝性

   封裝就是將數據和功能組合到一塊兒

   • 在 js 中, 對象就是鍵和值的集合
     • 鍵值若是是數據(基本數據, 複合數據, 空數據), 就稱爲屬性
     • 鍵值若是是函數,就稱爲方法
   • 對象就是將屬性和方法封裝起來
   • 方法是將過程封裝起來

3. 繼承性

   繼承性就是本身沒有, 別人有, 將別人的拿過來本身用, 而且成爲本身的

   • 傳統繼承基於模板
   • js 的繼承基於對象
     在 js 中的簡單的繼承模式: 混入模式(mix)
     在 jQuerty 中的混入叫作: extend

   var o1 = { name : 'Jhon' };
    var o2 = { age : 19 };
    function mix(o1,o2){
        for(var key in o2){
            o1[key] = o2[key];
        }
    }
    mix(o1, o2);

使用面向過程和麪向對象進行標籤建立

使用面向過程建立div, 並設置樣式

• 循序漸進, 一步一步來
• 只能一個一個添加屬性
• 若是建立多個div標籤, 很是麻煩

var div = document.createElement('div');
    documet.appendChild(div);
    div.style.width = '200px';
    div.style.height = '200px';
    div.style.backgroundColor = 'red';
    div.style.border = '10px dashed blue';
    ...

使用面向對象建立div, 並設置樣式

• 抽取對象(名詞提煉): div, body
• 分析屬性和方法(動詞提煉): appendChild, style

function DivTag(){
        // 注意這裏的 this 指的是 經過構造函數建立出來的實例對象
        this.DOM = document.createElement('div');
        appendTo : function(node){
            // this是實例對象, 不是DOM節點, 不能直接使用DOM屬性和方法
            node.appendChild(this.DOM);
        };
        css : function(option){
            for(var key in option){
                this.DOM.style[key] = option[key];
            }
        }
    }
    var divTag = new DivTag();
    divTag.appendTo(document.body);
    divTag.css({
        width : '200px',
        height : 200px,
        backgroundColor : 'red',
        border : '10px dashed blue'
    });

• 這樣的使用對象的方式進行建立標籤很是方便, 建立多個不一樣樣式的標籤也很是輕鬆

• 可是這樣也有缺點, 不能和 jQuery 同樣, 不能進行鏈式變成, 咱們能夠這樣修改, 在每個方法後面加上一個return this

  function DivTag(){
          // 注意這裏的 this 指的是 經過構造函數建立出來的實例對象
          this.DOM = document.createElement('div');
          appendTo : function(node){
              // this是實例對象, 不是DOM節點, 不能直接使用DOM屬性和方法
              node.appendChild(this.DOM);
              return this;
          };
          css : function(option){
              for(var key in option){
                  this.DOM.style[key] = option[key];
              }
              return this;
          }
      }
      var divTag1 = new DivTag()
          .appendTo(document.body)
          .css({
              width : '200px',
              height : 200px,
              backgroundColor : 'red',
              border : '10px dashed blue'
          });
      var divTag2 = new DivTag()
          .appendTo(document.body)
          .css({
              width : '400px',
              height : 400px,
              backgroundColor : 'pink',
              border : '10px dashed green'
          });

總結

什麼是面向對象

面向對象說白了就是對面向過程進行了封裝
好比說:
需求是 一個字符串是 str = 'abcdefg', 找到裏面的e,並返回e的索引

• 使用面向過程的處理辦法就是, 遍歷字符串, 獲得索引

var str = 'abcdefg';
    for(var i = 0;i < str.length;i++){
        var char = str.charAt(i);
        if(char == 'e'){
            conole.log(i);
            break;
        }
    }

• 使用面向過程的處理辦法就是, 使用indexOf, 獲得索引

var str = 'abcdefg';
    console.log(str.indexOf('e'));

用生活中吃飯的的例子就能夠這樣理解:

• 若是你本身燒, 那就須要(很是的麻煩, 時間有很長)
  1. 買菜
  2. 洗菜
  3. 燒飯燒菜
  4. 收拾
  5. 洗碗
• 若是是上飯店, 那就很是簡單(由於買菜, 洗菜, 燒飯燒菜, 洗碗的工做都是別人幫你完成了)
  1. 吃就好了