zoukankan      html  css  js  c++  java
  • 粗看ES6之面向对象写法

    标签: es6


    在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好。
    es6引入class constructor extends super等关键字简化了JS面向对象写法,以后可以跟后端说JS也终于是有类的一门语言了,哈哈。
    ES6的面向对象写法如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>es6面向对象写法</title>
    </head>
    <body>
        <script>
            //js类写法
            class Test{
              constructor(a,b){
                this.attr0 = a;
                this.attr1 = b;
              }
              fn(){
                console.log(this.attr0,this.attr1)
              }
            }
            //初始化方法和以前构造函数原型方式一样,都是通过new关键字
            var testFn = new Test(1,2);
            testFn.fn();
        </script>
    </body>
    </html>
    

    在线测试


    es6通过extends super实现继承
    示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>es6面向对象继承写法</title>
    </head>
    <body>
        <script>
            //js类写法,Test类
            class Parent{
              constructor(a,b){
                this.attr0 = a;
                this.attr1 = b;
              }
              fn(){
                console.log(this.attr0,this.attr1);
              }
            }
    
            //写一个继承自Parent的类
            class Child extends Parent{
                constructor(a,b,c){
                  super(a,b);//实现继承parent上的方法&属性
                  this.attr2 = c;
                }
                fn0(){
                  console.log(this.attr2);
                }
            }
    
            //初始化方法和以前构造函数原型方式一样,都是通过new关键字
            var testFn = new Child(1,2,3);
            testFn.fn();
            testFn.fn0();
        </script>
    </body>
    </html>
    

    在线测试

    个人觉得自此jser真的可以愉快的进行面向对象编程了,666666,同时祝all新年快乐!!

  • 相关阅读:
    C#泛型学习
    C#事件复习
    C#学习笔记之接口
    C#委托复习
    C#图解教程学习笔记(二)
    C#图解教程学习笔记
    Linq学习2
    Linq学习
    转载 协变与逆变的概念
    SqlServer在关联的情况下的增删改查
  • 原文地址:https://www.cnblogs.com/xwwin/p/8159338.html
Copyright © 2011-2022 走看看