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的本质实现,以后在写一篇博文记录下难点