简单介绍

  • 在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. Java——TCP/IP超详细总结

    网络的基础知识 一.协议 1.简介: 在计算机网络与信息通信领域里,人们经常提及“协议”一词.互联网中常用的具有代表性的协议有IP.TCP.HTTP等.而LAN(局域网)中常用的协议有IPX/SPX” ...

  2. 网络流 + 欧拉回路 = B - Sightseeing tour POJ - 1637

    B - Sightseeing tour POJ - 1637 https://blog.csdn.net/qq_36551189/article/details/80905345 首先要了解一下欧拉 ...

  3. c#一些常用知识点

    UID自动生成随机数 UID.Text = Guid.NewGuid().ToString(); GridView中常用格式化公式 <asp:BoundField DataField=" ...

  4. NEON中的vshr vshl vext中的位移参数必须为编译时字面常量

    NEON中的vshr指令中位移数量参数必须为compile time literal constant,因为该参数是被encoded as part pf ARM instruction itself ...

  5. 谈谈Spring bean的生命周期（一）

    简介 本片文章主要讲Spring IOC容器中 bean 的生命周期 Spring bean 生命周期 Spring 中bean的声明周期 可以分为如下4个阶段: 实例化阶段--Instantiati ...

  6. spark是怎么从RDD升级到DataFrame的？

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是spark专题的第五篇,我们来看看DataFrame. 用过Python做过机器学习的同学对Python当中pandas当中的Data ...

  7. 74LS 系列 名称解释

    摘自:http://blog.sina.com.cn/s/blog_502ffce50100j9db.html -------------------------------------------- ...

  8. 【比赛随笔】2020.4.25NOIonline2

    之前许多比赛没有统一记录,可能从这次开始会认真打比赛的博客了. p.s.这里的数据是洛谷上的民间数据. T1 涂色游戏 这题据说是cf的原题,不过作为蒟蒻的我,没有打过. 题目链接在这里 题意分析 这 ...

  9. 最近关于pc 组装总结

    1. 平台之争 amd 还是intel 这个时代,intel 的cpu已经领先amd 太多了.工艺上门,虽然amd 的u 一般都不锁倍频,但是oc的代价是要有一块堆料的主板,然后散热要牛逼,好的散热至 ...

  10. 如何使用Postman生成不同格式测试的报告

    Postman还可以生成测试报告,还是多种格式报告? Postman团队开源Newman作为Postman运营工具,该开源库使用命令行方式执行Postman 脚本,并且生成多种格式报告,还支持Post ...