JavaScript面向對象class
- 2020 年 3 月 9 日
- 筆記
JavaScript面向對象class
本周逆戰班學習的主題是“面向對象”，很多人覺得面向對象很難理解，但其實我們早就在面向對象的思想之中了，今天就讓我們再重新認識一下他，主要介紹一下ES6中新增的class類…
面向對象是一種高級的編程思想OO（Object Oriented）
從最開始面向二進位，面向指令，面向自然語言編程，到現如今的面向對象，顧名思義，對象“Object”就是整個思想的中心。面向對象其實就是一種符合我們人類思維習慣的編程思想。
提到面向對象，自然就會想到面向過程，面向過程就分析解決問題所需要的步驟，例如將大象裝入冰箱，需要幾步，需要哪幾步，按照步驟用函數將這些一一實現，而面向對象就是將需要解決的問題分解成多個獨立的對象，通過調用對象的方法來解決問題。這樣子當程式發生改變，我們只要找到相對應的對象進行修改，就方便的多。
1、面向對象的特點：封裝性（忽略細節，選擇執行，重複使用）、繼承性（方便的擴展，子拿父）和多態性（多種形態，可以實現動態的擴展）；
2、面向對象的優勢：資訊的查找速度快，資訊的傳播速度快
★3、js面向對象class
隨著ES6中關鍵詞class的出現，使得定義類變得更加的簡單。
語法格式：
//class CreatePerson{
// constructor ( ){ }
// 自定義方法名( ){ }
// }
// new CreatePerson( );
首先用函數實現CreatePerson的方法：
function CreatePerson(n,a){
this.name = n;
this.age = a;
}
CreatePerson.prototype.show = function(){
console.log(this.name + “—” + this.age);
}
如果用class關鍵字來寫CreatePerson，
class CreatePerson{
constructor(n,a){
this.name = n;
this.age = a;
}
show(){
console.log(this.name + “—” + this.age);
}
}
var p1 = new CreatePerson(“admin”,18);
p1.show();
儘管看上去程式碼變長了，但是仔細觀察，我們會發現結構變得更加的清晰,我們可以發現CreatePerson等價於構造函數的名字，constructor(){}等價於構造函數的函數體，自定義方法名(){}等價於綁定在構造函數原型上的方法。
我們可以看一個選項卡的例子來加深一下印象：
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
*{margin: 0;padding: 0;}
#box{height: 400px;width:550px;border: 2px solid #000;margin: 20px auto;}
ul{display: flex;}
ul li{flex: 1;height:40px;border-right:2px solid #000 ;list-style: none;font:18px/40px “”;text-align: center;}
ul li:last-child{border-right:none;}
ul li.active{background: #9370DB;color: #F0F;}
.cont div{height: 360px;width:550px;display: none;}
.cont .cont1{background: #00FF00;display:block;}
.cont .cont2{background: #008000;}
.cont .cont3{background: #555555;}
</style>
</head>
<body>
<div id=”box”>
<ul>
<li class=”active”>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class=”cont”>
<div class=”cont1″></div>
<div class=”cont2″></div>
<div class=”cont3″></div>
</div>
</div>
</body>
<script>
// 選項卡分析：
// 1.選擇元素（屬性）
// 2.綁定事件（方法）
// 3.樣式的改變（方法）
class Tab{
constructor(){
// 1.選擇元素（屬性）
this.li=document.querySelectorAll(“#box li”);
this.div=document.querySelectorAll(“.cont div”);
}
addEvent(){
// 2.綁定事件（方法）
var that=this;
for(let i=0;i<this.li.length;i++){
this.li[i].onclick=function(){
that.change(i);
}
}
}
change(a){
// 3.樣式的改變(方法)
for(var i=0;i<this.li.length;i++){
this.li[i].className=””;
this.div[i].style.display=”none”;
}
this.li[a].className=”active”;
this.div[a].style.display=”block”;
}
}
var t=new Tab();
t.addEvent();
</script>
</html>
class的出現，使我們的程式變得更加簡單，好好使用反覆練習，在書寫之前一定要進行分析，注意細節，邏輯嚴謹。
