ES6总结及使用（3）

class类

ES6提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点:
1) class 声明类
2)constructor 定义构造函数初始化
3)extends 继承父类
4)super 调用父级构造方法
5) static 定义静态方法和属性
6)父类方法可以重写

es5通过构造函数实例化对象

//手机类
function Phone(brand,price){
	this.brand = brand;
	this.price = price;
					
}
//添加方法
Phone.prototype.call = function(){
	console.log("我可以打电话！");
}
//实例化对象
let Huawei = new Phone('华为',5999);
Huawei.call();//我可以打电话！
console.log(Huawei); //Phone {brand: "1+", price: 1999}

es6（class语法实现上面的功能）

class Phone{
	//构造方法 名字不能修改
	constructor(brand,price) {
		this.brand = brand;
		this.price = price;
	}
					
	//方法必须使用该语法，不能使用es5的对象完整形式
	call(){
		console.log("我可以打电话！");
	}
}
				
let onePlus = new Phone("1+",1999);
console.log(onePlus);//Phone {brand: "1+", price: 1999} */

es6静态成员

class Phone{
	static name = '手机';
	static change(){
		console.log("我可以改变世界！");
	}
}
let nokia = new Phone();
console.log(Phone.name);//手机
console.log(nokia.name);//undifined */
// static属于类而不属于实例对象

对象继承

es5构造函数实现

function Phone(brand,price){
	this.brand = brand;
	this.price = price;
}
Phone.prototype.call = function(){
console.log("我可以打电话！");
}
//智能手机
function SmartPhone(brand,price,color,size){
	Phone.call(this,brand,price);
	this.color = color;
	this.size = size;
}
//设置子级构造函数的原型
SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;//做一个校正
//声明子类的方法
SmartPhone.prototype.photo = function(){
	console.log("我可以拍照");
}
SmartPhone.prototype.playGame = function(){
	console.log("我可以玩游戏");
}
					
const Huawei = new SmartPhone('华为',2499,'black','5.5inch');
					
console.log(Huawei);
//SmartPhone {brand: "华为", price: 2499, color: "black", size: "5.5inch"} 

es6构造函数

class Phone{
	//构造方法
	constructor(brand,price) {
		this.brand = brand;
		this.price = price;
	}
	//父类的成员属性
	call(){
		console.log("我可以打电话");
	}
}
					
class SmartPhone extends Phone{
	//构造方法
	constructor(brand,price,color,size) {
		super(brand,price);//Phone.call(this,brand,price)一样
		this.color = color;
		this.size = size;
	}
	photo(){
		console.log("我可以拍照");
	}
	playGame(){
		console.log("我可以打游戏");
	}
	//子类重写call方法，但是需要注意的是这里的子类是不可直接调用父类的同名call方法的
	call(){
		console.log("我可以进行视频通话");
	}
}
					
const xiaomi = new SmartPhone('小米',1499,'white','4.7inch');
console.log(xiaomi);
//SmartPhone {brand: "小米", price: 1499, color: "white", size: "4.7inch"}
xiaomi.call();
//我可以打电话 如果子类对call方法进行了重写那么调用的就是子类的call方法，此时输出的内容为“我可以进行视频通话”
xiaomi.photo();//我可以拍照
xiaomi.playGame();//我可以打游戏

class的get（属性的获取）和set（属性的设置）

class Phone{
	get price(){
		console.log("价格被读取了");
		return 'i love it';//函数的返回值就是属性的值
	}
					
	set price(newVal){
		console.log('价格属性被修改了');
	}
}
//实例化对象
let s = new Phone();
// console.log(s.price);//价格被读取了 i love it
s.price = 'free';//价格属性被修改了 

数值扩展

0、Number.EPSILON是JavaScript表示的最小精度
EPSILON 属性的值接近于2.2204460492503130808472633361816E-16

console.log(0.1+0.2);//0.3000000000000000
console.log(0.1+0.2 == 0.3);//false
function equal(a,b){
	if(Math.abs(a-b) < Number.EPSILON){
		return true;
	}else{
		return false;
	}
}
console.log(equal(0.1+0.2,0.3));//true 

1、二进制到十六进制

let b = 0b1010;//二进制
let o = 0o777;//八进制
let d = 100;//十进制
let x = 0xff;//十六进制

2、 Number.isFinite 检测一个数值是否为有限数

console.log(Number.isFinite(100));//true
console.log(Number.isFinite(100/0));//false
console.log(Number.isFinite(Infinity));//false

3、Number.isNaN 检测一个数值是否为NaN

 console.log(Number.isNaN(123));//false

4、 Number.parseInt Number.parseFloat 字符串转整数
/* console.log(Number.parseInt(‘5211314love’));//5211314
console.log(Number.parseFloat(‘3.1415926love’));//3.1415926 */

5、Number.isInteger 判断一个数是否为整数

console.log(Number.isInteger(5));//true
console.log(Number.isInteger(2.5));//false

6、Math.trunc 将数字的小数部分抹掉

console.log(Math.trunc(3.5));//3

7、Math.sign 判断一个数到底为正数负数还是零

console.log(Math.sign(100));//1
console.log(Math.sign(0));//0
console.log(Math.sign(-200));//-1 

对象的方法扩展

1、object.is 判断两个值是否完全相等

console.log(Object.is(120,110));//false
console.log(Object.is(120,120));//true
//和===很像，但又有不同，比如NaN
console.log(Object.is(NaN,NaN));//true
console.log(NaN === NaN);//false 

2、object.assign对象的合并

const config1 = {
	host:'locahost',
	port:8080,
	name:'root',
	pass:'root',
	test:'test'
}
const config2 = {
	host:'http://buxian.com',
	port:8086,
	name:'buxian.com',
	pass:'buxina',
	test2:'test2'
} 
console.log(Object.assign(config1,config2));
//{host: "http://buxian.com", port: 8086, name: "buxian.com", pass: "buxina"} 后面的覆盖前面的
	/* host: "http://buxian.com"
	name: "buxian.com"
	pass: "buxina"
	port: 8086
	test: "test"
	test2: "test2"  如果是一方没有的将不会覆盖*/

3、object.setPrototypeOf 设置原型对象 object.getPrototypeof 获取原型

const person = {
	name:'buxian'
}
const cities = {
	like:['成都','杭州','深圳']
}
Object.setPrototypeOf(person,cities);
console.log(person);
/* {name: "buxian"}
	name: "buxian"
	__proto__:
	like: (3) ["成都", "杭州", "深圳"]
	__proto__: Object */
console.log(Object.getPrototypeOf(person));
/* {like: Array(3)}
	like: (3) ["成都", "杭州", "深圳"]
	__proto__: Object */

模块化

模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。

1、模块化的好处

模块化的优势有以下几点:
1)防止命名冲突
2)代码复用
3)高维护性

2、模块功能主要由两个命令构成:export和 import。

export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能

模块数据使用（暴露）

将下面的代码单独放到一个m1.js文件中
分别暴露

export let person = 'buxian';
export function like(){
	console.log("喜欢的颜色有很多！");
} 

将下面的代码单独放到一个m2.js文件中
统一暴露

person = 'buxian';
export function like(){
	console.log("喜欢的颜色有很多！");
}
export {person,like}; 

将下面的代码单独放到一个m3.js文件中
默认暴露

export default{
	name:'buxian',
	change: function(){
		console.log("我可以改变！");
	}
} 

<script type = "module">
	//1、通用导入方式
		//引入m1.js模块内容
		import * as m1 from 'm1.js';
		//引入m2.js模块内容
		import * as m2 from 'm2.js';
		//引入m3.js模块内容
		import * as m3 from 'm3.js';
		m3.default.change();//可以改变！
		
	//2、结构赋值形式
		import{person,like} from "m1.js";
		console.log(person);//buxian
		console.log(like);
		f like() {
			console.log("喜欢的颜色有很多！");
		} 
	
		import{person as person1,like as like1} from "m2.js";//重名报错，此处使用别名
		import {default as m3} from 'm3.js';
		console.log(m3);//{name:"buxian",change:f}
		
	//3、简便形式 针对默认暴露
		import m3 from "m3.js";
</script>

es6模块化代码在项目中的使用方式
1．安装工具 babel-cli babel-preset-env browserify(webpack)
2. npx babel src/js -d dist/js
3．打包 npx browserify dist/js/app.js -o dist/bundle.js

文件引入

<script src="dist/bundle,js" type="text/javascript" charset="utf-8"></script> 

入口文件引入 将上述所有引用放入app.js

<script src="app.js" type="module"></script>