专栏首页张培跃es6中class类的全方面理解(二)------继承

es6中class类的全方面理解(二)------继承

继承是面向对象中一个比较核心的概念。ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过extends关键字继承。相较于ES5当中通过原型链继承要清晰和方便许多。先上代码:

class Cucurbit{
    constructor(name,color){
        console.log("farther")
        this.name=name;
        this.color=color;
    }
    say(){
        console.log("我的名字叫"+this.name+"我是"+this.color+"颜色的");
    }
}
class First extends Cucurbit{
    constructor(name,color){
        super(name,color);// 调用父类的constructor(name,color)
    }
    say(){
        console.log("我是child");
        super.say();
    }
}
var wa=new First("大娃","红色");
wa.say();

输出:

farther
我是child
我的名字叫大娃我是红色颜色的

上面代码中,子类的constructor方法和say方法中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。 子类必须在constructor方法中调用super方法,之后才能使用this关键字,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象。如果不调用super方法,子类就得不到this对象。在这一点上ES5的继承与ES6正好相反,ES5先创建自己的this对象然后再将父类的属性方法添加到自己的this当中。 如果子类First没有显式的定义constructor,那么下面的代码将被默认添加(不信可以尝试下,哈)。换言之,如果constructor函数中只有super的话,该constructor函数可以省略。

constructor(name,color){
        super(name,color);// 调用父类的constructor(name,color)
}

总结super在子类中一般有三种作用

 1.作为父类的构造函数调用(已说明)
 2.在普通方法中,作为父类的实例调用(已说明)
 3.在静态方法中,作为父类调用(下篇文章会做介绍)

实例

创建一个tab切换,页面中有三个按钮内容分别为“中”,“日”,“韩”。要求点击按钮,按钮以及切换的内容的背景颜色分别会变为红,黄,绿。

首先创建一个tab.html页面,内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换</title>
    <style>
        #country input{
            margin:10px;
            padding:10px;
        }
        #country div{
           width:300px;
            height:300px;
        }
    </style>
</head>
<body>
<div id="country">
    <input type="button" value="中">
    <input type="button" value="日">
    <input type="button" value="韩">
    <div>中国</div>
    <div>日本</div>
    <div>韩国</div>
</div>
</body>
<script src="tag.js"></script>
<script>
    new Tag("#country");
</script>
</html>

然后创建一个tag.js,内容为:

class Tag{
    constructor(id){
        this.id=document.querySelector(id);
        this.btn=this.id.querySelectorAll("input");
        this.div=this.id.querySelectorAll("div");
        this.colorArr=["red","yellow","green"];
        this.index=0;//显示元素的下标。
        this.init();
    }
    init(){//初始化
        this.hide();
        this.show();
        //给按钮增加事件
        for(let i=0;i<this.btn.length;i++){
            this.btn[i].onclick=function(){
                this.index=i;
                this.hide();
                this.show();
            }.bind(this)
        }
    }
    hide(){//隐藏DIV,去除按钮背景色
        for(var i=0;i<this.btn.length;i++){
            this.btn[i].style.background=null;
            this.div[i].style.display="none";
        }
    }
    show(){//显示指定的DIV,按钮与DIV的背景颜色进行设置
        this.div[this.index].style.display="block";//将DIV进行显示
       //按钮与DIV的背景颜色进行设置
        this.div[this.index].style.background=this.btn[this.index].style.background=this.colorArr[this.index];
    }
}

示例到现在还没有用到ES6的继承啊,别急!咱们再加个需求,在上面的切换示例基础上,再加一个内容为“娱乐”,“体育","财经"的切换。该切换需要在原来可点击的基础上实现自动切换功能,以及点击页面空白区域也可实现切换。

将tag.html页面修改为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换</title>
    <style>
        #country input,#news input{
            margin:10px;
            padding:10px;
        }
        #country div,#news div{
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
<div id="country">
    <input type="button" value="中">
    <input type="button" value="日">
    <input type="button" value="韩">
    <div>中国</div>
    <div>日本</div>
    <div>韩国</div>
</div>
<div id="news">
    <input type="button" value="娱乐">
    <input type="button" value="财经">
    <input type="button" value="体育">
    <div>娱乐</div>
    <div>财经</div>
    <div>体育</div>
</div>
</body>
<script src="tag.js"></script>
<script>
    new Tag({
        id:"#country",
        index:1,
        colorArr:["red","green","blue"]
    });
    new autoTag({
        id:"#news",
        index:2,
        colorArr:["black","pink","purple"]
    });
</script>
</html>

将tag.js修改为:

class Tag{
    constructor(obj){
        this.id=document.querySelector(obj.id);
        this.btn=this.id.querySelectorAll("input");
        this.div=this.id.querySelectorAll("div");
        this.colorArr=obj.colorArr;
        this.index=obj.index;//显示元素的下标。
        this.init();
    }
    init(){//初始化
        this.hide();
        this.show();
        var that=this;
        //给按钮增加事件
        for(let i=0;i<this.btn.length;i++){
            this.btn[i].onclick=function(ev){
                this.index=i;
                this.hide();
                this.show();
                ev.cancelBubble=true;
            }.bind(this)
        }
    }
    hide(){//隐藏DIV,去除按钮背景色
        for(var i=0;i<this.btn.length;i++){
            this.btn[i].style.background=null;
            this.div[i].style.display="none";
        }
    }
    show(){//显示指定的DIV,按钮与DIV的背景颜色进行设置
        this.div[this.index].style.display="block";//将DIV进行显示
        //按钮与DIV的背景颜色进行设置
        this.div[this.index].style.background=this.btn[this.index].style.background=this.colorArr[this.index];
    }
}
class autoTag extends Tag{
    constructor(id){
        super(id);
        this.autoInit();
    }
    autoInit(){
        document.body.onclick=this.change.bind(this);
        setInterval(this.change.bind(this),5000)
    }
    change(){
        this.index+=1;
        if(this.index>=this.btn.length)
            this.index=0;
        this.hide();
        this.show();
    }
}

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React如何处理事件

    以上示例在点击链接时,会报错:Uncaught TypeError: Cannot read property 'setState' of undefined。...

    用户1272076
  • 最易理解的VUE双向绑定原理不足70行代码搞定,逐行注释!

    用户1272076
  • vue归纳笔记:对vue中nextTick()的理解及应用场景说明

    请记住:vue是依靠数据驱动视图更新的,该更新的过程是异步的。即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新队列)。视图...

    用户1272076
  • TRTC学习之旅(三)-- 使用vue+ts集成互动直播

    上次我们已经用vue+ts实现了多人会议室的搭建,这次我们继续在上次项目的基础上,实现互动直播功能。

    黑眼圈云豆
  • tcplayer 源码改造第二弹 -> 加入倍速播放

    由腾讯视频的官方文档可以知道,currentTime方法是暴露给用户,用于获取/设置当前时间的方法,同理,加入获取当前倍速的方法currentRate:

    大洼X
  • Java基础:五、this关键字、static含义(4)

    如果只有一个peel()方法,如何知道是被a还是b所调用的呢?因为编译器会把“所操作对象的引用”作为第一次参数传递给peel()。所以上述两个方法的调用就变成了...

    桑鱼
  • Flutter 入门指北之基础部件

    原文:https://www.jianshu.com/p/8ddb16902ce6

    陈宇明
  • VUE+WebPack游戏设计:欲望都市城市图层的设计

    望月从良
  • HTML5 Canvas炫酷的火焰风暴动画

    越陌度阡
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl

扫码关注云+社区

领取腾讯云代金券