简单介绍

  • 在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. 02_Java语法

    1.注释 2.关键字 3.标识符 4.常量 5.变量 6.数据类型 7.数据类型转换 8.表达式 9.运算符 9.1算数运算符 9.2赋值运算符 9.3比较运算符 9.4逻辑运算符 9.5三元运算符 ...

  2. PHP导出excel文件，第一步先实现PHP模板导出不带数据

    今天继续研究PHP导出excel文件,把复杂的事情简单化,一步步实现功能,首先实现模板文件的导出,随后再实现写入数据后导出,最终实现功能,这是基本思路.中间可以加一步,先自己写入数据导出试试,随后再数 ...

  3. [hdu5392 Infoplane in Tina Town]置换的最小循环长度，最小公倍数取模，输入挂

    题意:给一个置换,求最小循环长度对p取模的结果 思路:一个置换可以写成若干循环的乘积,最小循环长度为每个循环长度的最小公倍数.求最小公倍数对p取模的结果可以对每个数因式分解,将最小公倍数表示成质数幂的 ...

  4. Spring整合Durid数据源

    Spring整合Durid数据源 一.导入依赖 <!-- Druid数据源 --> <dependency> <groupId>com.alibaba</gr ...

  5. lsof 命令用法：查看已删除空间却没有释放的进程

    查看已经删除的文件,空间有没有释放,没有的话kill掉pid lsof -n |grep deleted lsof简介lsof(list open files)是一个列出当前系统打开文件的工具. 问题 ...

  6. android 动态设置TextView值，例：金额增加

    一说到动态递增设置TextView值,很多人应该马上就想到起个线程,让后在线程中睡眠指定时间,使用handler发送消息更新TextView值! 这样是实现了动态递增设置TextView值但是效率不咋 ...

  7. 黑马程序员_毕向东_Java基础视频教程——逻辑运算符（随笔）

    逻辑运算符 逻辑运算符用于连接 boolean 型的表达式 & : 只要两边都是 boolean 表达结果,有一个为 false ,则结果就是 false 只要两边都为 true 则结果就为 ...

  8. MFC带参数启动指令发送与接收

    MFC带参数启动指令发送与接收 发送 使用ShellExecute函数打开文件或执行程序. 函数原型: HINSTANCE ShellExecute( _In_opt_ HWND hwnd,//父窗口 ...

  9. Problem 2232 炉石传说

    Problem 2232 炉石传说 不知道fzu的账号在哪里弄,想要做题的可以到vj上面去做 https://vjudge.net/problem/FZU-2232 #include <iost ...

  10. Java基础之数据类型

    一.数据类型 基本数据类型介绍 byte 1字节 char 2字节 short 2字节 int 4字节 long 8字节 float 4字节 double 8字节 以上有Java中八大基本类型的7种, ...