亲宝软件园·资讯

展开

JavaScript ES6中类与模块化管理超详细讲解

秃头小宋s 人气:0

前言

在学习类之前我们先来了解一下面向对象和面向过程

面向对象:是一种开发思想,一切皆为对象。对象是属性和行为的结合体

面向过程:也是一种开发思想。开发中的每个细节,开发者都需要考虑到。

面向对象的三大特性

(1)封装性:对象是属性和行为的封装体——数据安全

(2)继承性:子类可以继承父类父类的属性和方法——代码复用

(3)多态性:同一个消息传递给不同对象,出现的效果不同——应用灵活,可以适应不同的需求

定义:具有相同属性和行为的集合

ES5中实现类的方法:构造函数,在构造函数中封装了属性和方法。缺陷是构造函数和普通函数的定义方式是一样的,容易混淆。

ES6中类的定义方式:语义性更强、语法更简洁

class 类名{

属性

行为

}

class是关键字,专门用来定义类

// 用class定义Student类
    class Student{
        constructor(id,name,sex){ //构造函数 id,name,sex是属性
            this.id = id,
            this.name = name,
            this.sex = sex
        }
        display(){
            console.log('学号',this.id)
            console.log('姓名',this.name)
            console.log('性别',this.sex)
        }
   }
// 使用Student类创建对象:创建对象时,不能显式的使用constructor 必须用类名创建 默认调用constructor函数
let stu1 = new Student(01,'孙悟空','男');
let stu2 = new Student(02,'白骨精','女');
let stu3 = new Student(03,'紫霞仙子','女');
// 使用对象
stu1.display();
console.log('---------------')
stu2.display();
console.log('---------------')
stu3.display();

ES6中支持getter/setter方法来获取属性值、设置属性值

(1)定义get()方法、set()方法的目的是:用于隐藏对象的属性名

(2)在使用get()方法、set()方法时不用带'()'

类定义时需要注意的问题:

(1)类的属性和函数:类可以由属性也可以没有属性,可以由方法也可以没有方法

(2)类的属性是放在构造方法中初始化的,若类没有属性,可以不显式定义构造方法,此时,系统会自动生成一个无参的控的构造方法

类属性的setter/getter函数

1、作用:在面向对象开发中,对象是属性和行为的结合体(封装性),不能在对象的外部直接访问属性,若需要访问对象的属性,通过getter/setter方法来进行,就相当于在对象的外部屏蔽了对象的属性

2、用法:下面代码定义了Location类 并且使用get set函数

// 定义类
 class Location{
    constructor(){
        this._row = 0,
        this._column = 0,
        this._maxValue = 0
    }
    get row(){
        return this._row;
    }
    set row(row){
        this._row = row;
    }
    get column(){
        return this._column;
    }
    set column(column){
        this._column = column;
    }
    get maxValue(){
        return this._maxValue
    }
    set maxValue(max){
        this._maxValue = max;
    }
}

类的继承

1、基本概念

(1)基类(父类):可以派生子类的类

(2)派生类(子类):由父类派生而来的类

2、继承的实现

(1)ES5中的继承实现,没有类的概念

a、构造函数:构造函数就是类名,在ES5中类的继承实际就是构造函数的继承

b、实现:通过call、apply、bind

// 定义构造函数:基类
function Father(name){
    this.name = name,
    this.age = 45
    this.disp = function(){
        console.log('姓名',this.name);
        console.log('年龄',this.age);
    }
}
// 定义构造函数:
function Son(name){
    Father.call(this,name);
    this.height = '189cm';
    this.show = function(){
        this.disp();
        console.log('身高',this.height);
    }
}
let son = new Son('赵四')
son.show();

(2)ES6中的继承实现 extends实现继承

a、super:指向父类,super(参数)表示调用父类的构造函数

b、如果在子类的构造函数中调用父类的构造函数,那么super()必须作为子类构造函数中的第一条语句(在执行子类的构造函数之前,必须先执行父类的构造函数(先有父,再有子))

c、方法覆盖(方法重写OverWrite):在继承过程中,若父类的某个方法与子类的某个方法同名,则子类方法覆盖父类的同名方法

d、在子类的方法中可以使用super调用父类中的某个方法

e、不允许多继承,只能单继承

多继承:类的直接父类有多个

单继承:类的直接父类只有一个

// 定义父类
class Father{
    constructor(name,age){
        this.name = name,
        this.age = age
    }
    fun(){
        console.log('我是父类中的方法');
    }
    show(){
        console.log('姓名',this.name);
        console.log('年龄',this.age);
    }
}
    class Mother{
        constructor(a,b){
            this.a = a,
            this.b = b
        }
    }
// 定义子类 继承Father类
class Son extends Father{
    constructor(name,age,height){
         super(name,age);//调用父类的构造函数
         this.height = height;
    }
    hobby(){
          console.log('我喜欢羽毛球~');
    }
    show(){
          super.show();
          console.log('身高',this.height);
    }
}
let s1 = new Son('小王同学',22,'187cm');
s1.hobby();
s1.show();
s1.fun();

继承的好处

在父类中定义好的属性和方法,子类继承后可直接使用

类继承过程中的向上转型

子类对象的类型一定是父类的类型,反之父类对象的类型不能是子类的类型。

注:

(1)typeof:用于判断变量的数据类型(基本数据类型)

typeof 变量名 == ‘数据类型’

(2)instanceof:用于判断变量的数据类型(类类型)

ES6的模块化管理

1、Node.js简介

(1)Node是什么

a、浏览器内核有两个引擎:渲染引擎(渲染html/css)、JavaScript引擎()运行JavaScript代码

b、Node是独立于浏览器的JavaScript的运行环境,通常将Node称为JavaScript的服务器运行环境

(1)Node相当于运行JavaScript程序的虚拟机

(2)是JavaScript的工具库 Node.js内部采用Google公司的V8引擎

(2)使用Node的原因:有了Node后JavaScript就正式成为一个工程化的语言。

2、安装Node.js

(1)环境变量的设置的目的:在自定义的目录下运行程序时,操作系统可以找到相应的指令

3、ES6中的模块化管理

1、ES6的方式:

(1)一个.js文件就是一个模块采用“module”方式管理。即用exports导出,用import...from导入、

文件名:主文件名.扩展名

.扩展名作用:指定文件类型 例如: .mp3:音频文件 .mp4:视频文件 .jpg .png 图片文件

(2)Node的方式:采用“CommonJS”方式。即export.module=‘变量名’导出,用require导入

2、在VSCode中配置ES6的模块管理环境

(1):初始化环境,在存放js文件的文件夹下执行:npm init -y(生成package.json文件)

(2):在package.json文件中加入:"type":module(表示采用的是ES6的模块化)

(3)导出/导入变量

(4)导入/导出整个模块:使用“通配符”,表示导入所有

(5)默认导出(export default)

1.一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致

2、混合导出

3、重命名export和import

加载全部内容

相关教程
猜你喜欢
用户评论