JavaScript 面向物件概念與寫法比對
阿新 • • 發佈：2019-01-24
面向物件的概念1.面向物件就是使用物件，面向物件開發就是使用隊形開發2.面向過程就是使用過程的方式開發，面向物件是對面向過程進行封裝面向物件的特性1.抽象性2.封裝性3.繼承性## 抽象性所謂抽象性就是：如果對一個物件描述一個數據，需要抽取這個物件的核心資料1.提出需要的核心屬性和方法2.不在特定環境想無法明確物件的具體意義## 封裝性物件是將資料與功能組合到一起，即封裝1.js物件就是鍵值對集合 * 鍵值如果是資料（基本資料，複合資料，空資料），就稱為屬性 * 如果鍵值是函式，那麼就稱為方法2.物件就是將屬性和方法封裝起來3.方法是將過程封裝起來## 繼承性所謂繼承就是自己沒有，別人有，拿過來為自己所用，並稱為自己的東西1.傳統的繼承基於模板2.JS繼承基於物件一個簡單的繼承模式 混入（mix）function mix(o1,o2){for(var k in o2){o1[k] = o2[k];}}在jquery中將該方法命名為extend## 使用物件進項表層1. 首先看是否有內建物件，或者第三方提供簡單的案例<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script> //1.首先找物件 //2.任何操作應該交個物件完成 /* //任務需求 //1> 建立一個div標籤 var div = document.createElement("div"); //2> 將div加到頁面中 document.body.appendChild(div); //3> 設定div樣式 div.style.border = '1px dashed red '; div.style.width = '400px'; div.style.height = '300px'; */ //面向物件的方式去思考 //1.抽取物件（名詞提煉法） ：div body //2.分析屬性和方法（動詞提煉）：加到 設定樣式 //需要一個div的建構函式 //初級面向物件 function DivTag(){ this.Dom = document.createElement('div'); this._jadao = function(node){ //需要將this.Dom加到node中 node.appendChild(this.Dom); }; this._styles = function(name,val){ this.Dom.style[ name ] = val; }; this.css = function(option){ for(var k in option){ this.Dom.style[ k ] = option[k]; } }; } var divTag = new DivTag(); //內部應該建立dom物件 //建構函式內部應該建立dom物件div ,同時將其設定為屬性 //divTag應該具有的方法 divTag._jadao(document.body); divTag.css({ 'border':'1px dashed blue', 'width' :'400px', 'height':'300px', 'background':'pink', }); /* divTag._jadao(document.body); divTag._styles('border','1px dashed blue'); divTage._styles('width','pink'); divTage._styles('height','pink'); divTage._styles('background','pink'); */ //中級面向物件 function Div1Tag(){ this.Doms = document.createElement('div'); this.appendTo = function(node){ node.appendChild(this.Doms); return this; } this.css = function (option){ for (var k in option){ this.Doms.style[ k ] = option[k]; } return this; } } new Div1Tag().css({'border':'1px dashed green','background':'blue','width':'400px','height':'400px'}).appendTo( document.body ); </script></html>