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(){}等价于构造函数的函数体,自定义方法名(){}等价于绑定在构造函数原型上的方法。
我们可以看一个选项卡的例子来加深一下印象:
*{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;}
// 选项卡分析:
// 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[i].onclick=function(){
that.change(i);
}
}
}
change(a){
// 3.样式的改变(方法)
for(var i=0;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();
class的出现,使我们的程序变得更加简单,好好使用反复练习,在书写之前一定要进行分析,注意细节,逻辑严谨。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章