一、問題
javascript是面向對象的，還是面向過程的？基於對象是什么意思？
對象： 指的是對某一類事物進行抽象，抽象出這一類事物共同的特征以及行為（也就是屬性和方法），那些擁有這一共同屬性和方法的事物就是對象
二、分析
面向對象和基於對象的區別：引用一個例子，比如建造房子
- 面向對象：是先設計好圖紙，然后按照這個圖紙的設計去建造房子
- 基於對象：是先建造一個房子，然后根據房子的樣子，再去建造房子
也就是說：
- 面向對象：是先有一個抽象的對象描述（類）， 然后根據這個描述去構建新的對象（實例化對象）
- 基於對象： 是先有一個具體的對象，然后根據這個具體的對象，再去創建新的對象（實例化對象）
面向對象的三大基本特征：封裝,繼承,多態。
基於對象：也使用了對象,但是無法利用現有的對象的模板產生新的對象類型,繼而產生新的對象,基於對象是沒有繼承的特點。
多態體現的就是繼承,沒有了繼承就無從談論多態。多態一般體現在抽象類上。JavaScript語言就是基於對象的,它封裝了一些好的對象,調用對象的方法,設置對象的屬性,但是卻無法讓開發者派生出新的類。只能使用現有對象的方法和屬性。
三、javascript中對象的體現和使用
我們通過多種方式來實現點擊按鈕，更改某個div的屬性樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> div: { width: 300px; height: 300px; background-color: red;
}
</style>
</head>
<body>
<input type="button" value="點擊變化" id="btn" />
<div id="div"></div>
<script>
//點擊按鈕修改div的樣式
//面向過程和面向對象實現方式
</script>
</body>
</html>
面向過程的實現方式：知道需求，理清思路過程，然后按照這個過程從頭到尾寫
//點擊按鈕，改變div的樣式--面向過程實現
document.getElementById("btn").onclick=function() { document.getElementById("div").style.backgroundColor="yellow" }
面向對象思想的實現方式（初級）：
按鈕是一個對象；div是個對象；顏色是一個屬性
//點擊按鈕，改變div的樣式--面向對象（初級） //ChangeStyle是構造函數
function ChangeStyle(btnId,divId,color){ this.btnObj=document.getElementById("btnId"); this.divObj=document.getElementById("divId"); this.color = color; } //數據共享的方式來改變樣式
ChangeStyle.prototype.init = function() { console.log(this) // 此this就是實例對象--即當前對象
var that = this; // 此處必須轉存this，因為在function中this表示該點擊事件的對象
this.btnObj.onclick=function() { that.divObj.style.backgroundColor=that.color; } } //實例化對象
var test = new ChangeStyle("btn", "div", "yellow"); test.init();//即打印當前的test實例對象
面向對象實現（高級）：
//點擊按鈕，改變div的樣式--面向對象（高級） //ChangeStyle是構造函數
function ChangeStyle(btnObj,divObj,json){ this.btnObj=btnObj; this.divObj=divObj; this.json = json; } ChangeStyle.prototype.init = function() { //點擊按鈕改變div樣式
var that = this; // 此處必須轉存this，因為在function中this表示該點擊事件的對象
this.btnObj.onclick=function() { for(var key in that.json){ that.divObj.style[key]=that.json[key]; } } } //實例化對象
var btnObj=document.getElementById("btnId"); var divObj=document.getElementById("divId"); var json = {"width": "500px","height": "500px","backgroundColor": "green","opacity": "0.1",} var test = new ChangeStyle(btnObj, divObj, json); test.init();//調用方法
上面的代碼更加具有共用性：只要使用最后的兩行代碼，可以通過任一對象的點擊事件，操作任意對象的樣式
這就是面向對象的魅力所在！
四、結束