ES6相关(二)

Class

对象:对一种抽象事物的具体表现

:对一个对象的抽象描述

类是对象的抽象体现

对象是类的具象表现

继承:在原本类别的基础上实现扩展形成另一个类别

子类:给予一个类别的扩展而实现的新类别,原类别相对这个新类别叫做父类

最起始的类别叫做基类,子类的直系父类称为超类

    //类名首字母大写,驼峰式命名
    //如果不继承任何类别,则默认继承Object
    //Object为JS中所有类别的基类;"JS中万事万物皆对象"由此而来
class Box{
    a=1; //描述该对象的属性值,在新版浏览器支持该写法;
 
    //构造函数,通过该类创建对象的唯一入口
    //如果不写constructor构造函数,类别会自动添加这个函数默认该函数没有内容或者执行超类的构造函数
    constructor(){
        
    }
    play(){//该方法为动态方法,只能由该类的实例化对象来调用
        console.log(this) // 调用该方法对象就是this,this指向实例化对象
    }
}

let a = new Box(); //将Box类实例化为对象

    

继承

class Box{
    constructor(){
       
    }
    fn(){
        
    }
}

class Box1 extends Box{
    constructor(){
        super();//执行父类的constructor
    }
    fn(){ //子类中与父类中方法同名时,则会覆盖父类的方法(不执行父类中的同名方法,不影响父类本身)
        super.fn()//若想重新执行父类中的重名方法,则需要通过super来调用;后在下面继续追加该方法的内容
    }
    static fn2(){ // 在方法名前面加static 则该方法变为静态方法,在外部可以直接Box1.fn2()来调用,在静态方法中最好不要使用this,静态方法中的this就是该类名
        
        
    }
}

动/静 态方法

  • 动态方法:动态方法和属性,直接在类中写的属性和方法,这些方法和属性属于创建出来的实例化对象,没有对象则不能调用
  • 静态方法 : 静态属性和方法,使用static 写的,这种方法是属于类的方法,不需要实例化就可以直接调用

模块化开发

将每一个类(功能)单独放在一个文件内,当需要使用时直接引入使用;

  • 为什么会有模块化
    • 命名冲突:当项目团队进行协作开发的时候,不同开发人员的变量和函数名可能相同;即使是一个开发,当开发周期比较长时,也有可能会忘记之前引入了什么变量,从而导致重复命名,导致命名冲突。
    • 文件依赖:代码重用时,引入JS文件的数目可能少了,或者引入顺序不对,比如使用bootstrap的时候,需要引入jQuery,并且jQuery的文件必须要比bootstrap的JS文件先引入;
    • 代码耦合度过高:如今讲的是效率与速度,特别是在进行混合式APP开发时,如果代码重复率过高,则会导致本地资源包过大,从而无限降低了资源包的大小,也会影响代码的执行效率等;
  • 模块化开发有什么好处
    • 提升开发效率:代码方便重复使用,别人开发的模块直接拿过来就可以使用,不需要重复开发类似的功能;
    • 方便后期维护:在后期维护出现问题可以根据模块去找出问题点所在,针对相应的模块去修改,更加快捷方便;
    • 高内聚,低耦合:这是开发代码好坏的标准,模块化开发更加有利于我们做到,这样开发的好处不言而喻。
  • 如何进行模块化开发
    • require方式(AMD模式)
    • SeaJs(CMD模式)
    • ES6 中使用 import 和 export
//假如这是一个单独的模块(文件)
//当该模块只有一个类时,只需要如下形式(export default)即可导出使用
export default class Box{
    
}

class Rect{
    
}

//如果该模块中有两个或者以上类都需要导出使用时
//需要以下的方式导出
//该文件中只有被导出的类才对其他文件可见,未导出的其他文件不可用
export{Box,Rect}


//假如下面是另一个文件
//当我们需要导入一个模块(只有一个类的模块)时
import Box from "./lastFile/Box.js"

//当我们需要导入多个类时 需要以对象的形式接收
import{Box,Rect} from "./lastFile/Box.js"

//在此处的导入导出即为解构赋值 我们再导入时可以直接更改名字,使用新名字就可以调用
//也可以在导出时使用同样的方法改变名字,这样的话在导入时需要导入新名字
import{Box :Box1,Rect :Rect1} from "./lastFile/Box.js"



©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 226,780评论 6 526
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 97,642评论 3 411
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 174,427评论 0 373
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 62,220评论 1 306
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,026评论 6 405
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,544评论 1 319
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,643评论 3 433
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 41,796评论 0 283
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,300评论 1 329
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,281评论 3 352
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,426评论 1 364
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,988评论 5 354
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,684评论 3 342
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,090评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,311评论 1 280
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,002评论 3 385
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,409评论 2 370

推荐阅读更多精彩内容