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的出现，使我们的程序变得更加简单，好好使用反复练习，在书写之前一定要进行分析，注意细节，逻辑严谨。