简单介绍

  • 在ES6面向对象基本上与java的类实现类似

1 class关键字，构造器和类分开了

1.1 ES5代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ES5旧方法</title>
  7.     <script>
  8.         function User(name, pass) {
  9.             this.name = name;
  10.             this.pass = pass;
  11.         }
  12.         User.prototype.showName = function() {
  13.             alert(this.name);
  14.         };
  15.         User.prototype.showPass = function() {
  16.             alert(this.pass);
  17.         };
  18.         let user = new User("blue", "123456");
  19.         user.showName();
  20.         user.showPass();
  21.     </script>
  22. </head>
  23. <body>
  24. </body>
  25. </html>

1.2 ES6代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ES6新方法</title>
  7.     <script>
  8.         class User {
  9.             constructor(name, pass) {
  10.                 this.name = name;
  11.                 this.pass = pass;
  12.             }
  13.             showName() {
  14.                 alert(this.name);
  15.             };
  16.             showPass() {
  17.                 alert(this.pass);
  18.             };
  19.         }
  20.         let user = new User("blue", "123456");
  21.         user.showName();
  22.         user.showPass();
  23.     </script>
  24. </head>
  25. <body>
  26. </body>
  27. </html>

2.class里面直接加方法，简化继承核心

2.1 ES5代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ES5继承</title>
  7.     <script>
  8.         function User(name, pass) {
  9.             this.name = name;
  10.             this.pass = pass;
  11.         }
  12.         User.prototype.showName = function() {
  13.             alert(this.name);
  14.         };
  15.         User.prototype.showPass = function() {
  16.             alert(this.pass);
  17.         };
  18.         // let user = new User("blue", "123456");
  19.         // user.showName();
  20.         // user.showPass();
  21.         // -----继承
  22.         function VipUser(name, pass, level) {
  23.             User.call(this, name, pass);
  24.             this.level = level;
  25.         };
  26.         VipUser.prototype = new User();
  27.         VipUser.prototype.constructor = VipUser;
  28.         VipUser.prototype.showLevel = function() {
  29.             alert(this.level);
  30.         };
  31.         let user1 = new VipUser("blue", "123456", '3');
  32.         user1.showName();
  33.         user1.showPass();
  34.         user1.showLevel();
  35.     </script>
  36. </head>
  37. <body>
  38. </body>
  39. </html>

2.2 ES6代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ES6新方法</title>
  7.     <script>
  8.         class User {
  9.             constructor(name, pass) {
  10.                 this.name = name;
  11.                 this.pass = pass;
  12.             }
  13.             showName() {
  14.                 alert(this.name);
  15.             };
  16.             showPass() {
  17.                 alert(this.pass);
  18.             };
  19.         }
  20.         // let user = new User("blue", "123456");
  21.         // user.showName();
  22.         // user.showPass();
  23.         class VipUser extends User {
  24.             constructor(name, pass, level) {
  25.                 super(name, pass);
  26.                 this.level = level;
  27.             }
  28.             showLevel() {
  29.                 alert(this.level);
  30.             }
  31.         }
  32.         let user1 = new VipUser("blue", "123456", '3');
  33.         user1.showName();
  34.         user1.showPass();
  35.         user1.showLevel();
  36.     </script>
  37. </head>
  38. <body>
  39. </body>
  40. </html>

ES6-面向对象即类的更多相关文章

  1. Nodejs与ES6系列4:ES6中的类

    ES6中的类 4.1.class基本语法 在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码 function Shape(width,height) ...

  2. ES6中的类

    前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...

  3. ES6中的类和继承

    class的写法及继承 JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子     function Point(x, y) {  this.x = x;  this. ...

  4. ES6里关于类的拓展（一）

    大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中 ...

  5. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  6. es6中class类的全方面理解（一）

    传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...

  7. JS - ES5与ES6面向对象编程

    1.面向对象 1.1 两大编程思想 1.2 面向过程编程 POP(Process-oriented programming) 1.3 面向对象编程 OOP (Object Oriented Progr ...

  8. es6中class类的全方面理解

    传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...

  9. ES6 面向对象笔记

    JS面向对象两大编程思想 面向过程 面向对象 面向过程编程POP         面向过程就是分析出问题的需要步骤,然后用函数一步一步的实现,使用的时候一个一个调用就可以了 面向对象编程OOP     ...

  10. OC学习总结之面向对象和类

    OC学习总结之面向对象和类   Objective-c是c语言的母集合,它的原意就是在原始的c语言的主体上加入面向对象的特性.1.面向对象和面向过程  面向对象和面向过程是编程的两种思考方式.面向对象 ...

随机推荐

  1. 2020牛客寒假算法基础集训营1 J题可以回顾回顾

    2020牛客寒假算法基础集训营1 这套题整体来说还是很简单的. A.honoka和格点三角形 这个题目不是很难,不过要考虑周全,面积是1,那么底边的长度可以是1也可以是2, 注意底边1和2会有重复的, ...

  2. E. Reachability from the Capital dfs暴力

    E. Reachability from the Capital 这个题目就是给你一个有向图,给你起点,问增加多少条边让这个图变成一个连通图. 这个因为n只有5000m只有5000 所以可以暴力枚举这 ...

  3. TransactionHelper

    public class TransactionHelper { public static OracleTransaction ora_Transaction = null; public stat ...

  4. 系统基础优化 vim

    系统基础优化 vim 1系统基础优化 (CPU-lscpu 内存-free 磁盘-df 负载-w/uptime) 1.1 系统基础优化 准备工作:如何查看系统的信息 (1)cat /etc/redha ...

  5. 从垃圾回收机制解析为什么局部内部类只能访问final修饰的局部变量以及为什么加final能解决问题

    我们先稍微看一下代码: 从这里的提示可以看到,必须要将a的修饰符变为final才行. 现在笔者就这一结果做出自己的分析: 首先来说,我们知道,方法被调用时会执行,当执行的时候,方法中的局部变量会加载到 ...

  6. 新书《OpenShift云原生架构：原理与实践》第一章第三节：企业级PaaS平台OpenShift

    近十年来,信息技术领域在经历一场技术大变革,这场变革正将我们由传统IT架构及其所支撑的臃肿应用系统时代,迁移至云原生架构及其所支撑的敏捷应用系统时代.在这场变革中,新技术的出现.更新和淘汰之迅速,以及 ...

  7. InnoDB的ibd数据文件为什么比data_length+index_length+data_free的总和还要大？

    问题描述: 同事在给jiradb做mysqldump时,发现dump出来的文件只有10MB左右,而ibd文件占用磁盘空间100MB左右. 最初,我们猜测可能是delete操作导致了大量的磁盘碎片,以及 ...

  8. hive经典练习题

    一.建表和加载数据 1.student表 create table if not exists student(s_id int,s_name string,s_birth string,s_sex ...

  9. neo4j企业版集群搭建

    一.HA高可用集群搭建 版本采用的是neo4j-enterprise-3.5.3-unix.tar.gz 1.1.集群ip规划 192.168.56.10 neo4j-node1 192.168.56 ...

  10. 前端面试题-TCP和UDP的区别

    TCP和UDP的区别 (1)TCP是面向连接的,udp是无连接的即发送数据前不需要先建立链接. (2)TCP提供可靠的服务.也就是说,通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达;UD ...