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
加载全部内容