JavaScript的模块化，箭头函数，类的概念

模块化

// type="module"  因为js读取外部文件然后编码进来 需要babel软件来解码 
//按需引入 按需导入
// 按需导出：就是需要什么就导出什么(只导入自己需要的)，导出什么标识符就导入什么标识符，不然会出错
<script type="module">
import x,{num,tool} from "./src/model1.js"
console.log(num)
console.log(tool)
console.log(obj)
var re=tool()
console.log(re)
console.log(x.arr)

// 默认导出的，这边就可以随意写名字，所以默认导出在js文件中只能写一次，不然计算机不知道是默认导出的那一个
import {tool} from "./src/model1.js"
import x from "./src/model1.js"
x.tool
import Hq from './src/model1.js'
console.log(Hq.Photo)
// 就可以将PHP这个标识符改为a
import {Photo as a} from './src/model1.js'
let a=Photo
console.log(Photo.name)
</script>

箭头函数

箭头函数，解构赋值，let，const，类，异步编程，都是es6的重要语法

普通函数的定义式也就是函数表达式和声明式

// 定义式
var fn = function(){
				
}

// 声明式
function fn(){
				
}
			
var obj = {
name:"karen",
// 定义式
	say:function(){
					
	}
}
			
// 定义式的才能自调用
(function fn(){})()

箭头函数 是有作用域的，且只有定义式，没有声明式

语法：
let fn = () => {
	
}

箭头函数的this是离他最近的嵌套的 function/方法 这个函数的调用者，直到顶层都没有就是window

//this是离它最近的嵌套的 function/方法这个函数的调用者  直到顶层都没有就是window
var obj={
	name:"karen",
	say:function(){
		var fn=(a)=>{
			console.log(this,1111)
			return 100
		}
	fn(2)//fn函数是谁调用者 window
	}
}
obj.say()//调用者obj
			
// obj.fn()==>obj
// fn()==window			

我们来试试使用call或这bind，能不能改变箭头函数中this的对象

var fn=()=>{
	console.log(this);
}
var obj = {
	name:"karen"
}
// 不会报错，但是也改变不了内部的this
fn.call(obj);
			
// bind也不能，只有普通function函数可以
var arr = [];
var obj={
	name:"kaen",
	// 普通函数
	fn:function (){
		console.log(this);
	}.bind(arr),
	// 箭头函数	
	fn:()=>{
		console.log(this);
	}.bind(arr)
};
obj.fn();
			

经过代码检验，不可以改变this是，只有普通函数的可以

箭头函数的一些简写形式

// 如果箭头函数的执行体 只有一个表达式 且是返回值，那么可以省略大括号
var fn2 = (a,b) => a*b;
// 返回结果就是10*20的值
fn2(10,20);
			
// 如果箭头函数的形参 只有一个，那么可以省略掉小括号
var fn3 = a => a*a;
fn3(10);

// 当我们形参没有写，或者实参传多了，这时我们就可以用arguments来取，但是箭头函数没有这个，所以不能用，但是可以用 ...rest，表示形参一个或多个，且只能放在最后一个
var fn = (a, ...rest) => {
				
};
			

// 这是es6的新写法，叫方法和function是一样的
var obj = {
	say() {}
}

箭头函数不能出创建对象就是new，那么箭头函数怎么添加成员呢？

let fn = () => {
	this.a = 100 //这是错误的 箭头函数不能拿来创建对象
}

于是就引入了类这个概念

面试题:箭头函数的特点

• 如果函数体只有一个语句，没有{}，此时的返回值不需要return；
• 要有个箭头
• 箭头的前面是小括号，放形参，只有一个形参的时候可以省略小括号；
• 箭头的后面是函数体；
• 箭头函数里面的this总是指向最靠近的function 内部的this；
• 对象里面的方法，尽可能不要使用箭头函数；
• 箭头函数里面没有arguments，可以使用…reset，接收过来就是数组类型，接收的是形参之外的所有的实参；

类

在了解类之前我们应该先来了解一下JavaScript是一门什么语言

JS是一个基于面向对象设计的单线程的静态脚本语言

基于面向对象： 意思就是 不是面向对象的 只是基于，JS不是面向对象 它的使用想跟面向对象的语言用法一样，但是底层机制决定它不可以 他是原型的思想，本质上是没有继承这一概念的，所以es6 为了让语法更像面向对象的语法 于是出了个关键字 类(class)

面向对象：类 实例对象 继承 封装 多态

单线程：代码只能一个业务一个业务的执行

静态：不会提前检查直接运行，哪一行有错运行到哪一行就停下，而动态语言会先检查发现有错就一行都不会运行

脚本语言：嵌入式语言，很灵活

ES6中为了更加好的把JS设计成面向对象的语言的语法特征，所以就有了一个类

类的语法

类名要大写

class Person{

}
var p1=new person()
console.log(p1)

//声明类
class Person{				
}
let p1=new Person()
console.log(p1)			
//匿名类
var fn=class{				
}
var f1=new fn()
console.log(f1)

class Person{
	constructor(a,b,c){
		console.log(666666)
		this.x=a
		this.b=b
	}
	//对象的属性
	life=50
	//对象的原型对象的方法
	say1(){
		console.log(111,this.x)					
	}
	//类的静态属性
	static life=200
	//类的静态方法
	static say2(){
		console.log(222)					
	}
}
var p1=new Person(10,20,30)
//Person类的内部可以写一个constructor方法 用这个类创建对象时 就会运行构造函数,不写构造函数 系统会默认有一个空的构造运行
console.log(p1)
p1.say1()
console.log(Person.life)
console.log(Person.say2)

继承

class Person {
	life = 1
	constructor(name) {
		this.name = name
		this.makeMoney = function() {
			console.log(this.name + "赚钱")
		}
	}
	run() {
		console.log(this.name + "跑步")
	}
		static URL = "www"
}
var p1 = new Person("karen")
var p2 = new Person("jack")
console.log(p1, p2, Person.URL, 11111)

class Student extends Person {
	constructor(name) {
		super(name) //让Person类的构造函数的逻辑去帮我们构建对象空间
		this.age = 20
		this.book = "书名"
	}
}
var s1 = new Student("marry")
console.log(s1, Student.URL, 222)