简单介绍

  • 在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. P2765 魔术球问题 网络流二十四题重温

    P2765 魔术球问题 知识点::最小点覆盖 这个题目要拆点,这个不是因为每一个球只能用一次,而是因为我们要求最小点覆盖,所以要拆点来写. 思路: 首先拆点,然后就是开始建边,因为建边的条件是要求他们 ...

  2. HTTP头部信息和错误代码详解-《HTTP权威指南》

    最近在调试 前后端分离的请求测试,遇到了一个405错误, 无法接受,于是开始了人肉搜索405. 最后 还是HTTP头部信息里的Accept:application/json 这个Accept 导致的, ...

  3. 12_JavaScript基础入门(2)

    运算符 运算符(Operators,也翻译为操作符),是发起运算的最简单形式. 运算符的分类见仁见智,我们的课程对运算符进行如下分类: 数学运算符(Arithmetic operators)      ...

  4. 【漫画】JAVA并发编程 J.U.C Lock包之ReentrantLock互斥锁

    在如何解决原子性问题的最后,我们卖了个关子,互斥锁不仅仅只有synchronized关键字,还可以用什么来实现呢? J.U.C包中还提供了一个叫做Locks的包,我好歹英语过了四级,听名字我就能马上大 ...

  5. CSS：必须要掌握的重要基础知识点

    目录 1. 盒子 2. 常用选择器 3. 优先级 4. CSS继承 5. 伪元素(pseudo-element)和伪类(pseudo-class) 6. CSS:元素定位机制(positioning ...

  6. Universalimageloader 原图片大小获取

    Universalimageloader1.9.5上还没有对外提供获取图片的原大小功能,如果需要获取图片的源大小,可参考stackoverflow上的解决办法 stackoverflow地址 主要实现 ...

  7. Js调用Android回调处理

    通常在混合app中经常会使用js调用native的方法,一般是: window.nativeApp.call(XXX); 直接调用native方法,对于简单的处理倒是可以,如果需要回调呢?期待的方式是 ...

  8. android 自定义Dialog去除黑色边框

    在自定义Dialog时显示的界面中老是有黑色的边框,下面就介绍使用style去除黑色边框方法. 首先在values/styles定义自定义样式: <style name="MyDial ...

  9. 基于Redis的Nginx服务器集群session共享

    原料:jdk1.8,tomcat7,nginx1.16,Redis3.2.100,Redis-Tomcat需要的jar包,基于windows7. Redis3.2.100与Redis-Tomcat需要 ...

  10. 我们为什么推荐在Json中使用string表示Number属性值？

    在这篇简短的文章中,我将解释在使用JSON传输数据时,为什么浮点数或大十进制值应表示为字符串 . long类型引发的诡异情况 长话短说,同事在利用swagger对接后端API时,诡异的发现swagge ...