JS是面向過程、面向對象仍是基於對象？面向對象的代碼體現

時間 2020-05-20

標籤面向過程面向對象仍是基於對象代碼體現欄目 JavaScript 简体版

原文原文鏈接

1、問題

　　javascript是面向對象的，仍是面向過程的？基於對象是什麼意思？javascript

　　對象：指的是對某一類事物進行抽象，抽象出這一類事物共同的特徵以及行爲（也就是屬性和方法），那些擁有這一共同屬性和方法的事物就是對象html

2、分析

　　面向對象和基於對象的區別：引用一個例子，好比建造房子java

面向對象：是先設計好圖紙，而後按照這個圖紙的設計去建造房子
基於對象：是先建造一個房子，而後根據房子的樣子，再去建造房子

　　也就是說： json

面向對象：是先有一個抽象的對象描述（類），而後根據這個描述去構建新的對象（實例化對象）
基於對象：是先有一個具體的對象，而後根據這個具體的對象，再去建立新的對象（實例化對象）

面向對象的三大基本特徵：封裝,繼承,多態。函數

基於對象：也使用了對象,可是沒法利用現有的對象的模板產生新的對象類型,繼而產生新的對象,基於對象是沒有繼承的特色。this

多態體現的就是繼承,沒有了繼承就無從談論多態。多態通常體如今抽象類上。JavaScript語言就是基於對象的,它封裝了一些好的對象,調用對象的方法,設置對象的屬性,可是卻沒法讓開發者派生出新的類。只能使用現有對象的方法和屬性。spa

3、javascript中對象的體現和使用

　　咱們經過多種方式來實現點擊按鈕，更改某個div的屬性樣式prototype

<!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" }

　　面向對象思想的實現方式（初級）： code

　　按鈕是一個對象；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();//調用方法