码迷,mamicode.com
首页 > 其他好文 > 详细

粗看ES6之面向对象写法

时间:2018-01-01 00:27:36      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:meta   utf-8   函数   es6   点击   pos   span   友好   edit   

标签: 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新年快乐!!

粗看ES6之面向对象写法

标签:meta   utf-8   函数   es6   点击   pos   span   友好   edit   

原文地址:https://www.cnblogs.com/xwwin/p/8159338.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!