ES6-Class

1. 基本使用

（1）Class，类，一构造函数

a. 原生JS，例子

<script>
	//=================JS构造函数用法
	function Point1(x,y){
		this.x = x;//定义将来实例的属性
		this.y = y;
	}
	//给构造函数添加方法
	Point1.prototype.toString1 = function(){
		return this.x + ','+this.y;//取到上面两个属性值
	}
	let p1 =new Point1(100,"JS你好");
	console.log(p1.toString1());

</script>

b. Class方法：

<script>
	//================Class用法
	class Point{
		constructor(x,y){//构造函数，为类的一部分
			//定义将来实例的属性
			this.x = x;
			this.y = y;

		}
		//给类添加方法
		toString(){
			return this.x + ','+this.y;//取到上面两个属性值
		}
	}

	let p = new Point(90,"Class你好");
	console.log(p.toString());//输出90,Class你好

</script>

2. constructor、实例化和this的指向

(1). Class 的特点

a. Class的里面必须包含constructor，属性必须添加到constructor中

b. class可以使用new 实例化

c. class本质仍然是构造函数，是一种语法糖

d. this的指向是class将来的实例

3. 静态方法

<script>
	class User{
		constructor(){

		}
		getInfo(){

		}
		//静态方法：不用通过对象let p = new User()l调用，直接通过User调用
		static getName(){
			console.log("静态方法调用");
		}
	}

	let p = new User();
	p.getInfo();

	//静态方法调用
	User.getName();//输出静态方法调用

</script>

4.Class继承

(1)特点：

a. 使用extends 关键字

b. 子类会继承父类的属性和方法

c. 子类中的属性和方法会覆盖父类的（如果同名）

<script>
	class Point{
		constructor(){
			this.name = "Jack";
			this.age = 20;
		}
		getName(){
			console.log(this.name);
		}
		getAge(){
			console.log(this.age);
		}
	}

	//ColorPoint继承了Point的属性和方法，ColorPoint是子类，Point是父类
	class ColorPoint extends Point{
		getInfo(){
			console.log("ColorPoint")
		}

		//与父类方法同名，会覆盖父类
		getAge(){
			console.log("替换父类getAge()")
		}
	}

	let cp = new ColorPoint();
	cp.getName();//Jack
	cp.getAge();//20
	cp.getInfo();//ColorPoint


</script>

（2）. super关键字：

子类中声明constructor时，里面必须调用super();

super作为函数，必须在constructor中使用，代表父类的constructor再执行一遍；

<script>
	class Point{
		constructor(){
			this.name = "Jack";
			this.age = 20;
		}
	
	}

	//ColorPoint继承了Point的属性和方法，ColorPoint是子类，Point是父类
	class ColorPoint extends Point{
		constructor(){
			super();//把父类的constructor再执行一遍
			this.age ="H5";
		}

	}

	let cp = new ColorPoint();
	console.log(cp.age);//

</script>

super作为对象，可以再普通子类方法中使用，表示父类的原型对象；

<script>
	class Point{
		constructor(){
			this.name = "Jack";
			this.age = 20;
		}
		getName(){
			console.log(this.name);
		}
		getAge(){
			console.log(this.age);
		}
	}

	//ColorPoint继承了Point的属性和方法，ColorPoint是子类，Point是父类
	class ColorPoint extends Point{
		getInfo(){
			// this.getAge();//this调用继承过来的方法，不能调用本身的方法
			// 同样的写法
			super.getAge();//super表示父类的原型对象
			console.log("ColorPoint")
		}
	}

	let cp = new ColorPoint();
	cp.getInfo();//ColorPoint

</script>

（3）继承原生的构造函数

<script>
	class myArray extends Array{

	}

	let arr = new myArray();
	arr[0] = "Jack";
	arr[1] = "Bob";
	arr[2] = "Mak";
	console.log(arr);//Array(3) [ "Jack", "Bob", "Mak" ]
	console.log(arr.length);//3
	console.log(arr.push("Hello"));
	console.log(arr);//Array(4) [ "Jack", "Bob", "Mak", "Hello" ]
</script>

(4) Object.getPrototypeOf()可以获取一个雷的父类

<script>
	class myArray extends Array{
	}
	let arr = new myArray();

	console.log(Object.getPrototypeOf(myArray));//function Array()
	console.log(Object.getPrototypeOf(myArray) === Array);//true

</script>

猜你喜欢