ES6面向对象
constructor 构造函数
// 构造函数就是new 类名 实例化对象时执行的函数
// 所有类中的构造函数都叫constructor
// 当我们new 类名()就是执行了constructor这个函数
// let b=new Box(5,10);
// 对象中构造函数与当前对象的类是相同
// console.log(b.constructor===Box);
代码演示
// var arr=[1,2,3];
// console.log(arr.constructor===Array);
// var date=new Date();
// console.log(date.constructor===Date);
// var str="aaaa";
// console.log(str.constructor===String);
// var bool=true;
// console.log(bool.constructor===Boolean);
// var ul=document.querySelector("ul");
// ul.addEventListener("click",clickHandler);
function clickHandler(e){
// if(e.target.nodeName!=="LI") return;
// if(e.target.constructor!==HTMLLIElement) return;
// if(e.target.constructor===HTMLUListElement) return;
// HTMLDivElement div
// var div=new HTMLDivElement();//不可以 因为这是接口
// HTMLUListElement ul
// HTMLTableElement table
// HTMLTableRowElement tr
// HTMLTableColElement td
// HTMLBodyElement body
// HTMLDocument document
// HTMLElement 所有元素
}
构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。特别的一个类可以有多个构造函数 ，可根据其参数个数的不同或参数类型的不同来区分它们 即构造函数的重载。
// let arr=new Array();
// let date=new Date();
// let str=new String();
// 对于语言来说，其他语言的构造函数比较丰富，可以有多个，并且传参可以不同
// 但是对于js来说，构造函数有且仅有一个，并且任何构造函数的名字固定是constructor
// 可以认为constructor与类名相等
// class Box{
// a=1;
// // 如果不需要执行任何内容，类中构造函数可以默认不填写
// play(){
// console.log(this.a);
// }
// }
// let b=new Box();
// b.play();
class Box{
// 这种属性叫做对象属性,相对于static来说他就是动态属性
a=1;
// static 静态的
// 通过static设置的静态属性和静态方法，都只能使用类调用这种方式
static a=2;
constructor(_a){
// 构造函数执行时,this就是创建的对象
this.a=_a;
}
play(){
console.log(this.a);
// this是什么 this就是执行当前函数的对象
}
// 静态方法
static run(){
//虽然也可以在这里写this,但是我禁止大家在这里使用this
// 禁止在静态方法中写this
console.log(Box.a);
}
}
// let b=new Box();
// console.log(b.a);
// console.log(Box.a);
// 类当中的属性，在实例化时会设置给实例化的对象
// Box类中的属性a，因为实例化生成了o1和o2两个对象,因此,o1和o2两个对象都拥有了a属性
// 这个对象的属性现在就属于这两个各自的对象了,他们没有任何关系
// 他们都有这个a属性,属性值是各自的
// var o1=new Box(5);
// var o2=new Box(6);
// o1.a=100;
// o2.a=1000;
// o1.play();
// o2.play();
// console.log(o1,o2);
ES6面向对象的继承
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("aaaaa");
}
}
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的方法了，如果这样写，就相当于将这个sum的方法重写覆盖
// 不会再执行超类的sum方法，而只执行当前sum方法
sum(){
this.a+=2;
this.b+=2;
console.log(this.a+this.b);
}
// 既可以执行超类中原有的run方法，又可以在这个基础上增加自己新内容
run(){
super.run();//执行了超类的run方法
console.log("bbbb");
}
}
let o1=new A(3,5);
// o1.sum();
// o1.run();
let o2=new B(6,7,10);
// o2.sum();
// o2.count();
// console.log(B.abc);
o2.run();
// 继承后的类,方法有三种处理
// 1\完全继承 不需要重写这个方法,自动就有,超类的方法执行什么,这个类就会执行什么
// 2\重写覆盖 只需要在这个类中重写这个方法就可以覆盖继承过来的内容
// 3\在原方法中增加新的内容 重新该方法,并且执行super.方法名这样就可以执行超类方法,后面可以自己添加
