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的更多相关文章

  1. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  2. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  3. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  4. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  5. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  6. javascript面向对象系列第一篇——构造函数和原型对象

    × 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...

  7. Javascript面向对象(封装、继承)

    Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...

  8. 《javascript面向对象精要》读书笔记

    <javascript面向对象精要> 买这本书的原因主要是因为作者,Nicholas C. Zakas 牛X闪闪的js专家,读过js高程的应该都知道他,而这本书是他的最新力作,感觉也是js ...

  9. 【转】javascript面向对象编程

    摘要:本文本来是想自己写的,奈何花了好长时间写好之后忘记保存,还按了刷新键,一键回到解放前,索性不写了,所以本文是转载的. 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化. ...

  10. javascript面向对象(一)：封装

    本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...

随机推荐

  1. window下mysql安装步骤

    1. 官网下载mysql zip包 2. 解压后再D:\database\mysql\mysql-5.7.26-winx64下添加my.ini文件,文件内容如下: [mysql]# 设置mysql客户 ...

  2. 04-Java 对象和类

    Java作为一种面向对象语言.支持以下基本概念: 多态 继承 封装 抽象 类 对象 实例 方法 重载 本节我们重点研究对象和类的概念. 对象:对象是类的一个实例(对象不是找个女朋友),有状态和行为.例 ...

  3. 打不开gitHub的解决方法

    因为Github是国外网站,所以经常会遇到打不开的问题,并且有时能打开但是网速好慢 解决这个问题的方法是 : 在C:\Windows\System32\Drivers\etc下找到hosts文件,用记 ...

  4. Springmvc+Mybatis+shiro整合

    Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大的网络 ...

  5. plague|commence|gymnasium|triumph|jump

    N-COUNT 瘟疫:疫病A plague is a very infectious disease that spreads quickly and kills large numbers of p ...

  6. cs231n spring 2017 lecture11 Detection and Segmentation

    1. Semantic Segmentation 把每个像素分类到某个语义. 为了减少运算量,会先降采样再升采样.降采样一般用池化层,升采样有各种“Unpooling”.“Transpose Conv ...

  7. 关于分频器的FPGA实现整理思路

    分频器是用的最广的一种FPGA电路了,我最初使用的是crazybingo的一个任意分频器,可以实现高精度任意分频的一个通用模块,他的思想在于首先指定计数器的位宽比如32位,那么这个计数器的最大值就是2 ...

  8. openssl内存分配，查看内存泄露

    openssl内存分配 用户在使用内存时,容易犯的错误就是内存泄露.当用户调用内存分配和释放函数时,查找内存泄露比较麻烦.openssl提供了内置的内存分配/释放函数.如果用户完全调用openssl的 ...

  9. Android目录结构（详解）

    Android目录结构(详解) 下面是HelloAndroid项目在eclipse中的目录层次结构: 由上图可以看出项目的根目录下共有九个文件(夹),下面就这九个文件(夹)进行详解: 1.1src文件 ...

  10. Markdown快速使用指南

    Markdown 是一种轻量级的标记语言,他简洁.高效,目前被越来越多的写作爱好者,撰稿者广泛使用.Markdown的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言 ...