简单介绍

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

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

1.1 ES5代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ES5旧方法</title>

    <script>

        function User(name, pass) {

            this.name = name;

            this.pass = pass;

        }

        User.prototype.showName = function() {

            alert(this.name);

        };

        User.prototype.showPass = function() {

            alert(this.pass);

        };

        let user = new User("blue", "123456");

        user.showName();

        user.showPass();

    </script>

</head>

<body>

</body>

</html>

1.2 ES6代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ES6新方法</title>

    <script>

        class User {

            constructor(name, pass) {

                this.name = name;

                this.pass = pass;

            }

            showName() {

                alert(this.name);

            };

            showPass() {

                alert(this.pass);

            };

        }

        let user = new User("blue", "123456");

        user.showName();

        user.showPass();

    </script>

</head>

<body>

</body>

</html>

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

2.1 ES5代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ES5继承</title>

    <script>

        function User(name, pass) {

            this.name = name;

            this.pass = pass;

        }

        User.prototype.showName = function() {

            alert(this.name);

        };

        User.prototype.showPass = function() {

            alert(this.pass);

        };

        // let user = new User("blue", "123456");

        // user.showName();

        // user.showPass();

        // -----继承

        function VipUser(name, pass, level) {

            User.call(this, name, pass);

            this.level = level;

        };

        VipUser.prototype = new User();

        VipUser.prototype.constructor = VipUser;

        VipUser.prototype.showLevel = function() {

            alert(this.level);

        };

        let user1 = new VipUser("blue", "123456", '3');

        user1.showName();

        user1.showPass();

        user1.showLevel();

    </script>

</head>

<body>

</body>

</html>

2.2 ES6代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ES6新方法</title>

    <script>

        class User {

            constructor(name, pass) {

                this.name = name;

                this.pass = pass;

            }

            showName() {

                alert(this.name);

            };

            showPass() {

                alert(this.pass);

            };

        }

        // let user = new User("blue", "123456");

        // user.showName();

        // user.showPass();

        class VipUser extends User {

            constructor(name, pass, level) {

                super(name, pass);

                this.level = level;

            }

            showLevel() {

                alert(this.level);

            }

        }

        let user1 = new VipUser("blue", "123456", '3');

        user1.showName();

        user1.showPass();

        user1.showLevel();

    </script>

</head>

<body>

</body>

</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. 【Scala】利用Akka的actor编程模型，实现2个进程间的通信

    文章目录 步骤 一.创建maven工程,导入jar包 二.master进程代码开发 三.worker进程代码开发 四.控制台结果 步骤 一.创建maven工程,导入jar包 <propertie ...

  2. Owin Katana 的底层源码分析

    最近看了一下开源项目asp.net katana,感觉公开的接口非常的简洁优雅,channel 9 说是受到node.js的启发设计的,Katana是一个比较老的项目,现在已经整合到asp.net c ...

  3. SQLserver分库分表

    https://blog.csdn.net/ExceptionalBoy/article/details/78851327

  4. CF#214 C. Dima and Salad 01背包变形

    C. Dima and Salad 题意 有n种水果,第i个水果有一个美味度ai和能量值bi,现在要选择部分水果做沙拉,假如此时选择了m个水果,要保证\(\frac{\sum_{i=1}^ma_i}{ ...

  5. python 基础知识2-数据类型

    1.什么是数据类型? 整数(int) ,字符串(str),布尔值(bool),列表(list),元组(tuple),字典(dict),集合(set). int.数字:主要用于运算.1,2,3... b ...

  6. shell 光标处理快捷键

    Ctrl+左右键 单词之间跳转Ctrl+a跳到本行的行首, Ctrl+e则跳到页尾. Ctrl+u删除当前光标前面的文字 ctrl+k-删除当前光标后面的文字 Ctrl+w和Alt+d-对于当前的单词 ...

  7. neo4j 图数据库安装及介绍

    neo4j 图数据库安装及介绍 一.neo4j图数据库介绍 图数据库,顾名思义就是利用了"图的数据结构来作为数据存储逻辑体现的一种数据库",所以要想学好图数据库当然需要了解一些关于 ...

  8. 【SMB源码解析系列】——002.RESET中断

    跟随代码结尾处的中断向量,我们可以看到RESET中断所在地址为Start标签处. 这部分代码比较简单,从字面便可基本理解. 1.(682~683)状态寄存器设置,sei指令用于禁用IRQ中断,SMB中 ...

  9. 聊聊ESP8266的SDK（ESP8266_RTOS_SDK v3.3 环境搭建）

    ESP8266_RTOS_SDK发行版本v3.3-rc1环境搭建 在大学期间玩8266所接触的都无操作系统版本的SDK,但后来接触了ESP32后发现ESP8266也推出了RTOS版本,一直都没来得及去 ...

  10. .Net Core3.0 WebApi 项目框架搭建 二:API 文档神器 Swagger

    .Net Core3.0 WebApi 项目框架搭建:目录 为什么使用Swagger 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染.后端分离的形态,而且前端技术和后端技 ...