ES6中的class详解及拓展
需求
最近项目中,需要针对项目封装一些常用的class类,由于ES6提供了class,肯定再用模拟类写法就不太好了,所以尝鲜,对class类进行学习和研究
基本概念讲解
1 class理解
1 在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类
2 class 的本质是 function
3 它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法
需要弄清楚的几个常见概念,这里我就不一一列举了,都很简单
1 类定义(显隐两种声明方法)
2 类属性,类方法(注意静态方法,基本用不到吧)
3 constructor 方法,说白了,就是构造方法,实例化时调用
eg
class test{
constructor (){}
add(){
console.log("hehe")
}
}
new test().add();
差不多就是这样用咯;
4 还有就是一些私有方法,共有方法的研究
class test{
#count=0;
static val=1;
pin=2;
constructor(){
console.log(test.val);
}
}
console.log(a.val);
let a = new test();
// console.log(a.#count); //私有方法,会报错
console.log(a.val);
console.log(a.pin);
建议自己跑一下,会有深刻的理解
5 关于静态方法的时候,
class test_father{
static a = 10;
static hello(){
console.log("hello world")
}
constructor(){
console.log(test_father.a);
}
}
class test1 extends test_father{
}
new test_father();
其实还是有很多不是很规范,建议自己跑一下,很多跟自己想像的不是一样的
写一些小demo测试吧,主要是对属性,私有属性,静态属性,方法,私有方法,静态方法的测试,总结以下几点
1 属性可以直接在顶层定义,有常规属性,私有属性(#name),静态属性(static name),静态私有属性(static #name)
2 对于这些属性的增删改差
3 方法类比属性
高级概念讲解
1 extends理解
extends相当于Java中的继承,也就是说,子类从父类那里继承得到一些属性和方法
class test_father{
static a = 10; //静态属性
b=3; //常规属性
#c =7;//私有属性
static hello(){
console.log("hello world")
}
hello1(){
console.log("11111")
}
constructor(){
console.log(test_father.a);
console.log(this.b);
}
}
class test1 extends test_father{
constructor(){
// super();
// console.log(super.a);
}
exptr(){
console.log();
}
}
new test1();
当我们不调用super的时候,发现报错了;所以,在子类中,是需要调用super来指定this的,具体的本质原因,这里我摘录阮一峰大神的话:
子类必须在constructor方法中调用super方法,
否则新建实例时会报错。这是因为子类自己的this对象,
必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,
然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象
class test_father{
static a = 10; //静态属性
b=3; //常规属性
#c =7;//私有属性
static hello(){
console.log("hello world")
}
hello1(){
console.log("11111")
}
constructor(){
console.log(test_father.a);
console.log(this.b);
}
}
class test1 extends test_father{
b=4;
constructor(){
super();
console.log(this.b);
console.log(super.b);
console.log(super.a);
super.hello1();
}
exptr(){
console.log();
}
}
let tt = new test1();
console.log(tt);
然后分析下结构,发现最后还是转到了prototype上面;
下面我们看下super的作用
class test_father{
static a = 10; //静态属性
b=3; //常规属性
#c =7;//私有属性
static hello(){
console.log("hello world")
}
hello1(){
console.log("11111")
}
constructor(){
console.log(new.target.name);
}
}
class test1 extends test_father{
b=4;
constructor(){
super();
console.log(new.target.name);
}
exptr(){
console.log();
}
}
new test_father();
let tt = new test1();
可以看到啊,通过super调用父类的构造方法后,this指向的对象其实是子类
然后就是super当对象使用时,在子类里调用父类的属性和方法,调用父类属性的时候只有在prototype上才可以调到;
暂时先这样吧,基本可以用了.推荐看下阮一峰的讲解
https://es6.ruanyifeng.com/#docs/class-extends
跟着练习几遍就OK了;后期还是需要理解下prototype的本质实现,以后在写一篇博文记录下难点
下一篇: ES6中Class的继承关系