欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6中的class详解及拓展

程序员文章站 2022-07-13 09:12:59
...

需求

最近项目中,需要针对项目封装一些常用的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();

ES6中的class详解及拓展差不多就是这样用咯;
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);

ES6中的class详解及拓展建议自己跑一下,会有深刻的理解
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();

ES6中的class详解及拓展当我们不调用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);

ES6中的class详解及拓展然后分析下结构,发现最后还是转到了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();

ES6中的class详解及拓展
可以看到啊,通过super调用父类的构造方法后,this指向的对象其实是子类
然后就是super当对象使用时,在子类里调用父类的属性和方法,调用父类属性的时候只有在prototype上才可以调到;

ES6中的class详解及拓展ES6中的class详解及拓展暂时先这样吧,基本可以用了.推荐看下阮一峰的讲解
https://es6.ruanyifeng.com/#docs/class-extends
跟着练习几遍就OK了;后期还是需要理解下prototype的本质实现,以后在写一篇博文记录下难点