首頁 > 開發者 > JavaScript
標籤：方式 logs 函數式編程 核心 color 抽取 val height round
說明（2017.3.28）：
1. JavaScript是一種基於對象的多範式程式設計語言，不是物件導向，但離開對象不能活。
範式編程是指編程習慣、方式，分為過程式、對象式和函數式編程。
2. 物件導向是指，使用對象進行開發，物件導向是對面向過程的封裝。
3. JavaScript物件導向的三個特點，抽象性、繼承性和封裝性。
抽象性是指，抽取出核心屬性和方法，不在特定條件下不能確定對象的具體意義。
繼承性是指，把我沒有的屬性和方法拿來使用，並變成自己的屬性和方法。
封裝性是指，把方法和屬性打包成一個對象。
4. JavaScript的對象就是索引值對的集合。
索引值是資料（基本資料，複合資料，空資料），就叫屬性。
索引值是函數，就叫方法。
5. 例子是在body裡面添加一個div並設定樣式。
第一次，採用過程的方法，先添加div，再分別設定樣式。
第二次，採用物件導向的方法，把建立出來的div作為一個屬性DOM，添加div到body作為方法appendTo()，設定樣式作為方法css()。
第三次，將css()的參數設定為json格式對象，只要調用一次css()方法就可以了。
第四次，每個方法最後返回this，實現像jquery一樣的鏈式編程。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body>10 <script type="text/javascript">11 // 畫一個div框12 // 過程的方法13 // var divTag = document.createElement("div");14 // divTag.style.border = "1px solid red";15 // divTag.style.width = "200px";16 // divTag.style.height = "100px";17 // divTag.style.backgroundColor = "pink";18 // document.body.appendChild(divTag);19 // 物件導向的方法20 var DivTag = function(){21 this.DOM = document.createElement("div")22 this.appendTo = function(){23 document.body.appendChild(this.DOM)24 return this;25 };26 // 注意，此處for in迴圈對於json來說，i是鍵名，而不是索引27 this.css = function(option){28 for(var i in option){29 this.DOM.style[i] = option[i];30 }31 return this;32 // this.DOM.style[name] = value;33 };34 };35 36 var divTag = new DivTag();37 divTag.appendTo();38 divTag.css({border:"1px dotted blue",width:"100px",height:"100px"});39 divTag.appendTo().css({border:"3px dotted yellow",width:"100px",height:"100px"});40 // divTag.css("border","1px solid red");41 // divTag.css("width","200px");42 // divTag.css("height","200px");43 </script>44 </html>
JavaScript進階 物件導向（1）--添加一個div標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
