JavaScript面向对象class
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的出现，使我们的程序变得更加简单，好好使用反复练习，在书写之前一定要进行分析，注意细节，逻辑严谨。
JavaScript面向对象class的更多相关文章
- JavaScript学习笔记(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- JavaScript学习总结(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
- javascript面向对象系列第一篇——构造函数和原型对象
× 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...
- Javascript面向对象(封装、继承)
Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...
- 《javascript面向对象精要》读书笔记
<javascript面向对象精要> 买这本书的原因主要是因为作者,Nicholas C. Zakas 牛X闪闪的js专家,读过js高程的应该都知道他,而这本书是他的最新力作,感觉也是js ...
- 【转】javascript面向对象编程
摘要:本文本来是想自己写的,奈何花了好长时间写好之后忘记保存,还按了刷新键,一键回到解放前,索性不写了,所以本文是转载的. 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化. ...
- javascript面向对象(一)：封装
本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...
随机推荐
- Docker系列四: 使用UI管理docker容器
一.什么是Portainer? Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容 ...
- kettle的基本使用
一.下载下载kettlehttp://sourceforge.net/projects/pentaho/files/Data%20Integration/7.0/pdi-ce-7.0.0.0-25.z ...
- 72）PHP，session基本原理和登录验证
(1) (2) 所以 你要是开了session,那么就会有session数据,但是假如在你的php脚本中没有开放发session,就不会有session数据
- 荼菜的iOS笔记--UIView的几个Block动画
前言:我的第一篇文章荼菜的iOS笔记–Core Animation 核心动画算是比较详细讲了核心动画的用法,但是如你上篇看到的,有时我们只是想实现一些很小的动画,这时再用coreAnimation就会 ...
- java面试题 - 框架
1.servlet执行流程 客户端发出http请求,web服务器将请求转发到servlet容器,servlet容器解析url并根据web.xml找到相对应的servlet,并将request.resp ...
- JavaScript类的写法（一）
转自:http://segmentfault.com/a/1190000000725051 js类的基本含义 我们知道,在js中,是没有类的概念的.类的所有实例对象都从同一个原型对象上继承属性,因此, ...
- optogenetics|
Bird &optogenetics&day&night 光遗传学(optogenetics)——结合遗传工程与光来操作个别神经细胞的活性,发现脑部如何产生γ波(gamma o ...
- Java IO: PipedOutputStream
原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) PipedOutputStream可以往管道里写入读取字节流数据,代码如下: 01 Outp ...
- Java ERROR JDWP Unable to get JNI 1.2 environment, jvm
Java: ERROR: JDWP Unable to get JNI 1.2 environment, jvm->GetEnv() return code = -2 DWP exit erro ...
- Django学习之路04
视图层 小白必会三板斧 HttpResponse render redirect django视图函数必须要给返回一个HttpResponse对象(render和redirect内部返回的也是一个Ht ...