ECMASCRIPT6中实现了class关键字,这样使我们更容易也更形象的进行类的操作

<script type="text/javascript">
class OFunction{
constructor(args){
}
setValue(val){
if(val !== undefined && val != null){
return val;
}else{
return '';
}
}
}
class Box extends OFunction{
constructor(args){
super(args);
this.width = super.setValue(args.width) !== '' ? this.args.width : '120';
this.height = super.setValue(args.height) !== '' ? this.args.height : '60';
}
}
class Popup extends Box{
constructor(args){
super(args);
this.args = super.setValue(args) !=='' ? args : {} ;
this.position = super.setValue(args.position) !== '' ? this.args.position : 'center'; //the position of this popup;
this.backgroundColor = super.setValue(args.bg) !== '' ? this.args.bg : 'rgba(0,0,0,.6)'; //the background-color of this popup;
}
getPosition(){
return this.position;
}
getBackgroundColor(){
return this.backgroundColor + this.more();
}
} var args={'position':'left','bg':'red'};
var p=new Popup(args);
console.log(p.getBackgroundColor())
</script>

上面代码是我用来封装弹出框的一个原型(初级版)

OFunction是用来封装常用方法的方法类,这里面封装了setValue方法,用来判断参数是否为空或未定义

Box类是用来定义盒子模型,因为盒子模型既可以作为popup的父类,也可以被其他类集成。Box继承了OFunction类,这样可以获得OFucntion里面所有的方法和属性(当然是公有的,目前ECMASCRIPT6中static关键字还没有实现,可以借助以前定义私有变量和方法的方法来定义私有属性)。

Popup类继承自Box类,可以继承到Box类的所有属性和方法,同时获得OFunction类的所有方法属性。

constructor方法相当于C++/Java/Python等面向对象语言中的__init__()方法,在类实例化的时候执行

这里面需要注意的是super关键字,在使用extends继承时,需要在construtor中声明super,同时通过super关键字获取到父类中的方法和属性,super关键字需要在constructor方法进入的时候声明,不然会报错。

--------------------------------继续完善此原型中-----------------------------------------------

ECMAScript6 中 类的封装与继承的更多相关文章

  1. java中关于类的封装与继承,this、super关键字的使用

    原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/5454849.html. this关键字: this代表当前对象,它有以下几种用途: 1.本类 ...

  2. Java—类的封装、继承与多态

    一.类和对象 1.类 类是数据以及对数据的一组操作的封装体. 类声明的格式: 类声明 { 成员变量的声明: 成员方法的声明及实现: } 1.1 声明类 [修饰符] class 类<泛型> ...

  3. php函数、类和对象以及类的封装、继承、类的静态方法、静态属性

    1.函数     php内置函数可以直接使用,如果没有安装php扩展即可     自定义函数 //函数function 函数名 function dump($var = null){ //支出默认参数 ...

  4. java类的封装、继承、多态

    一.封装(encapsulation) 封装性就是把类(对象)的属性和行为结合成一个独立的相同单位,并尽可能隐蔽类(对象)的内部细节,对外形成一个边界,只保留有限的对外接口使之与外部发生联系.封装的特 ...

  5. 对Java中多态,封装,继承的认识(重要)

                                                            一.Java面向对象编程有三大特性:封装,继承,多态 在了解多态之前我觉得应该先了解一下 ...

  6. c++的类的封装/继承/多态的简单介绍

    本篇文章仅仅从很表层来介绍一个C++语言中的类,包括什么是类,类的封装性/继承性和多态性.高手直接跳过吧,看了浪费时间,新手或者想温习一下的可以浏览看看. 1. 什么是类? 到底什么是类(class) ...

  7. IT第十八天 - 类的封装、继承、重载、上周总结★★★

    IT第十八天 上午 封装 1.关键字this,是表示该类在实例化时的对象,即this.表示为该对象的属性 2.类的数据保护,set.get方法的写法规则,为了之后的反射机制的读取数据,set方法中对于 ...

  8. Java面向对象 第3节 类的封装和继承

      一.封装 封装的概念:将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的访问和操作. 封装的2个大致原则:1)把尽可能多的东西隐藏起来,对外提供便捷的接口 ...

  9. python第三十一天-----类的封装、继承,多态.....

    封装 封装最好理解了.封装是面向对象的特征之一,是对象和类概念的主要特性. 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. cla ...

随机推荐

  1. Web应用安全十大主动安全措施

    这几天有空参加了360主办的第一届互联网安全大会(ISC 2013),除了现场看到FREEBUF现场微博号发的众多妹子之外,也听到了很多有趣的议题,比如TK分享的通过网络运营商缓存服务器偷渡,只需一台 ...

  2. 面向对象cookie增删查

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. NAND flash sub-pages

    http://www.linux-mtd.infradead.org/doc/ubi.html#L_subpage NAND flash sub-pages As it is said here, a ...

  4. python中引用

    python中的可变类型与不可变类型: 在讲python深浅拷贝之前,我们首先应该明白python中元素的类型:主要分为可变类型和不可变类型. 可变类型,就是值可以改变的类型有两个: 列表:list ...

  5. MySql学习(二) —— where / having / group by / order by / limit 简单查询

    注:该MySql系列博客仅为个人学习笔记. 这篇博客主要记录sql的五种子句查询语法! 一个重要的概念:将字段当做变量看,无论是条件,还是函数,或者查出来的字段. select五种子句 where 条 ...

  6. sql sever读取Excel总结【转】

    主要用到openrowset,opendatasource系统函数,这两个函数任意一个都能完成任务 用这种方法可以实现Excel和sqlserver表之间的相互导入导出. openrowset的写法 ...

  7. 利用dmidecode 查看服务器的信息技巧

    Please refer to the link: http://www.laozuo.org/6682.html

  8. C++调用约定和名字约定

    C++调用约定和名字约定 转自http://www.cppblog.com/mzty/archive/2007/04/20/22349.html 调用约定:__cdecl __fastcall与 __ ...

  9. Leetcode 详解(Valid Number)

    Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...

  10. IOS跳转到设置特定项

    App如何跳转到系统Settings 标签: IOS开发App转到Settings 2015-12-04 15:56 550人阅读 评论(1) 收藏 举报  分类: IOS开发(21)  版权声明:本 ...