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();
    }

}

原文地址:https://www.cnblogs.com/catbrother/p/9397175.html

时间: 2024-09-29 23:35:43

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

关于java同步包中ConcurrentLinkedQueue类的深入分析与理解

一,官方描述 一个基于连接节点的无界线程安全队列.这个队列的顺序是先进先出.队列头部的元素是留在队列中时间最长的,队列尾部的元素是留在队列中时间最短的.新元素被插入到元素的尾部,队列从队列的头部检索元素.当许多线程共享访问同一个集合时,这个类是不二选择.这个队列不允许有null元素. 这个实现基于一种被描述为简单,快速,实用的非阻塞和阻塞公布队列算法而提供的一种有效的空闲等待算法. 注意,不像大多数集合,size方法的操作不是常量时间的,由于是异步队列,决定了元素的数量需要遍历真个元素集. 这个

ES6中的类

前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中引入了类的特性.本文将详细介绍ES6中的类 ES5近似结构 在ES5中没有类的概念,最相近的思路是创建一个自定义类型:首先创建一个构造函数,然后定义另一个方法并赋值给构造函数的原型 function PersonType(name) { this.name = name; } Person

重学ES6(二):ES5和ES6中Class类的相同与不同

ES5和ES6中Class类的相同与不同 先说结论,简而言之ES5用function定义类,ES6用class定义类,class的本质是function,ES6中的类只是语法糖,它并没有改变ES5下类实现的本质. 类的定义 ES5 // ES5函数来描写类 // 声明类 let Animal = function (type) { this.type = type // 定义实例方法 this.drink = function () { console.log('drink') } } // 定

ES6中class类用法

之前想要通过javascript来实现类,通常会采用如下构造函数的模式: 1 function Person(name,age,job){ 2 this.name = name; 3 this.age = age; 4 this.job = job; 5 this.friends = ['Shelby','Court']; 6 } 7 Person.prototype = { 8 constructor:Person, 9 sayName: function(){ 10 document.wri

es6中class类的使用

在es5中我们是使用构造函数实例化出来一个对象,那么构造函数与普通的函数有什么区别呢?其实没有区别,无非就是函数名称用首字母大写来加以区分,这个不用对说对es5有了解的朋友都应该知道. 但是es5的这种方式给人的感觉还是不够严谨,于是在es6中就换成了class,就是把es5中的function换成了class,有这个单词就代表是个构造函数,然后呢对象还是new出来的,这一点并没有变化.    类的使用 从里面的代码我们可以看到除了function变成了class以外,其它的跟es5一样 cla

关于var和ES6中的let,const的理解

var的作用就不多说了,下面说说var的缺点: 1.var可以重复声明 var a = 1; var a = 5; console.log(a); //5 不会报错 在像这些这些严谨的语言来说,一般是不允许重复声明的. 2.无法限制修改 var a = 5; a = 6; console.log(a); //6 不会报错 3.没有块级作用域 if(true){ var a = 5; } console.log(a) // 5 以上几个就是我个人对var的看法 ES6中,多了两个声明let 和 c

OOP3(继承中的类作用域/构造函数与拷贝控制/继承与容器)

当存在继承关系时,派生类的作用域嵌套在其基类的作用域之内.如果一个名字在派生类的作用域内无法正确解析,则编译器将继续在外层的基类作用域中寻找该名字的定义 在编译时进行名字查找: 一个对象.引用或指针的静态类型决定了该对象的哪些成员是可见的,即使静态类型与动态类型不一致: 1 #include <iostream> 2 using namespace std; 3 4 class A{ 5 public: 6 // A(); 7 // ~A(); 8 ostream& print(ost

JDK中String类的源码分析(二)

1.startsWith(String prefix, int toffset)方法 包括startsWith(*),endsWith(*)方法,都是调用上述一个方法 1 public boolean startsWith(String prefix, int toffset) { 2 char ta[] = value; 3 int to = toffset; 4 char pa[] = prefix.value; 5 int po = 0; 6 int pc = prefix.value.l

js中对类和对象的理解

类 :对一群具有相同特征的对象的集合的描述:对象:真实存在的对象个体: **面向对象,而不是面向类. 1.一切皆对象,继承靠原型链,多态靠弱类型,封装--虽然可以靠闭包,但我个人更推崇和python一样的,下划线代表私有的风格 2.比如人类,指的是一个范围: 对象:比如某个人,指的是这个范围中具体的对象 3.Javascript中的function作为构造函数时,就是一个类,搭配上new操作符,可以返回一个对象.当然,要生成一个对象,也可以用字面量的形式,例如var obj = {x: 1, y