你好javascript day18
1）ES6面向对象
class Box{
a=1;
constructor(a,b){
console.log(a,b);
}
play(){
}
}
constrctor 构造函数
构造函数就是new 类名 实例化对象执行的函数
所有类中的构造函数都叫constructor
当我们new 类名（）就是执行了constructor这个函数
let b=new Box(5,12);//打印了 5 12
对象中构造函数与当前对象的类相同
console.log(b.constructor===Box);
对于语言来说，其他语言的构造函数比较丰富，可以多个，并且传参可以不同
但是对于js来说，构造函数有且仅有一个，并且任何构造函数的名字固定式constructor
可以认为constructor与类名相等
class Box{
a=1;
//如果不需要执行任何内容，类中的构造函数可以默认不填写
play(){
console.log(this.a);
}
}
let b=new Box();
b.play();//执行父类的方法
当需要在实例化对象时就需要初始化一些内容或者执行一些内容或者执行一些内容时就需要设置constructor函数
如果实例化时不需要执行任何内容，可以默认不写
class Box{
a=1;
static a=2;
constructor(_a){
this.a=_a;
}
play(){
console.log(this.a);
}
static run(){
console.log(Box.a);
}
}
let b=new Box();
console.log(b.a);//undfined
console.log(Box.a);//2
类当中的属性，在实例化时会设置给实例化的对象
Box类中的属性a,因为实例化生成了01和02两个各自的对象了，他们没有任何关系
他们都有这个a属性，属性值是各自的
let o1=new Box(5);
let o2=new Box(6);
o1.a=100;
o2.a=1000;
o1.play();//100
o2.play();//1000
console.log(o1,o2);//值不一样的两个类
所有的·静态属性和静态方法都不能通过实例化的对象调用
所有的静态属性和静态方法和实例化对象没有任何关系，是类的专属属性和方法
Box.run();//2
Box.a=10;
因此对于类来说这个属于独立的属性和方法
一般静态的方法是用来解决一系列该类型的方法
解决具体类型的方法，不是解决某一个具体对象的方法
静态属性，一般用于储存该类型的一系列通用的属性变量
这种储存，在类创建的时候就已经变成全局的了，可以在任意地方调用，并且不会被自动销毁
class Utils{
static ce(type,style){
let elem=document.createElement(type);
Object.assign(elem.style,style);
return elem;
}
}
let div=Utils.ce("div",{width:"100px",height:"100px",height:"100px",backgroundColor:"red"});
document.body.appendChild(div);
需求
创建一个对象，有求和，不能有求积
创建一个对象，有求和，求积
class A{
a=0;
b=0;
static abc=10;
constructor(_a,_b){
this.a=_a;
this.b=_b;
}
sum(){
this.a++;
this.b++;
console.log(this.a+this.b);
}
run(){
console.log("aaa");
}
}
//传统写法
class B{
a=3;
b=4;
constructor(){
}
sum(){
if(this.a>5) this.a=5;
if(this.b>10) this.b=10;
console.log(this.a+this.b);
}
count(){
console.log(this.a*this.b);
}
}
//继承写法
class B extends A{
//js中静态属性和方法也可以继承
c=0;
constructor(_a,_b,_c){
super(_a,_b);
this.c=_c;
}
count(){
console.log(this.a*this.b);
}
sum(){
this.a+=2;
this.b+=2;
console.log(this.a+this.b);
}
run (){
super.run();//执行超类的run方法
console.log("bbbb");
}
}
继承后的类，方法有三种处理
1/完全继承 不需要重写这个方法，自动就有，超类的方法执行什么，这个类就会执行什么
2/重写覆盖 只需要在这个类中重写这个方法就可以覆盖继承过来的内容
3/在原方法中增加新的内容 重新该方法，并且执行super，方法名这样就可以执行超类方法
modle 开发模式
<script type="module"></script>
自动开启严格模式
如果要写模块化，必须以服务器打开
导入 导入后的变量 from 从什么文件夹导入什么文件
这个默认到处内容导入后，名字可以自己起，我建议大家还是原来类名
import Rect from "./js/Rect.js";
如果导入的文件导出时没有写默认导出，那么就相当于导出了一个对象，对象下导出的所有内容
这里叫解构赋值，所以这里名字必须和导出的时的名字一样才能结构出来
import Main from "./js/Main.js";
Main.init();
