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"

ES6相关（二）

Class

继承

动/静 态方法

模块化开发

推荐阅读更多精彩内容

动/静态方法