简单介绍

  • 在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. 字典树变形 A - Gaby And Addition Gym - 101466A

    A - Gaby And Addition Gym - 101466A 这个题目是一个字典树的变形,还是很难想到的. 因为这题目每一位都是独立的,不会进位,这个和01字典树求最大的异或和是不是很像. ...

  2. leetCode刷题 | 两数相加

    给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和 ...

  3. Coursera课程笔记----计算导论与C语言基础----Week 9

    C语言中的控制成分(Week 9) 计算机程序的基本结构 任何具有单入口单出口的程序,都可以用顺序结构.分支结构.循环结构来表达 分支语句 在执行if语句前,先对表达式求解 if()内可以是任意的数值 ...

  4. Day_12【集合】扩展案例1_利用集合的知识对长度为10的int数组进行去重,产生新数组,不能改变数组中原来数字的大小顺序

    分析以下需求,并用代码实现 1.定义一个长度为10的int数组,并存入10个int类型的数据,其中有一些数据是重复的 2.利用集合的知识对数组进行去重,产生新数组,不能改变数组中原来数字的大小顺序 3 ...

  5. FAXCOM和FXSCOMEX 传真编程

    需要引用的dl,如下信息,早起使用的是FXSCOM.DLL,现在微软提供了相应的扩展,其程序集为,FXSCOMEX.dll FXSCOMEX.dll 提供跟加健全的方法,可以说所有关于传真的操作都在这 ...

  6. Vue 做的项目在IE下面打开一片空白解决方法

    ie浏览器打开报这个错并且页面空白: 原因:这是因为浏览器对于部分ES6语法识别不出来导致,所以我们要安装一个插件,把ES6语法转换成IE浏览器可以识别的语法. 解决方法: 需要安装 "ba ...

  7. 3D三栅极晶体管(摘抄)

    英特尔的科学家们在2002年发明了三栅极晶体管——这是根据栅极有三面而取名的. 传统“扁平的”2D平面栅极被超级纤薄的.从硅基体垂直竖起的3D硅鳍状物所代替.电流控制是通过在鳍状物三面的每一面安装一个 ...

  8. [csu1392]YY一下

    题意:给定x,求有多少个10^8以内的数满足这个数乘以x以后,最高位到了最低位.设最高位的数字和剩余长度,列等式推理即可. #pragma comment(linker, "/STACK:1 ...

  9. 洛谷P1027题解

    https://www.luogu.org/problem/P1027传送到题目 首先,让我骂一句那没事找事的Car还取一个那么奇怪的名字看到这个题,恕我直言,我们明显可以看出这是一道图的最短路问题. ...

  10. IP协议及其它的小弟 ,我保证没人会看的

    IP协议及其它的小弟 IP协议:127.0.0.1就一个32位的标识符.实际上: 类似这样的: 精神小伙慢慢看吧.我赌一包辣条你是不会认真看完的. IP协议的构成 地址解析协议 ARP 前面的叙述中我 ...