javascript基础知识强化篇---类，extends,super

最新推荐文章于 2023-09-04 09:56:03 发布

努力学习前端的77

最新推荐文章于 2023-09-04 09:56:03 发布

阅读量351

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_36545813/article/details/106404146

版权

JavaScript 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

以下内容来自博主视频学习后的整理。

通过class创建类，通过new创建实例。并通过构造函数给实例对象返回某些属性。

类名首字母注意大写
类的公共属性可以放在构造函数中。这样每创建一个类的实例对象，每个对象都会自动去调用构造函数并获取到对象的公共属性。
在类中添加公共方法，直接方法名(){}就可以，不需要加function
多个方法之间不需要加逗号分隔开

class Star {//创建类，类名首字母注意大写
   constructor(name,age) {//类的默认构造函数  即使不写，new对象的时候也会自动去调用，
     this.name = name;//this指向new的类实例对象  构造函数会将属性返回给对象
     this.age = age;
   }
   sing(song){
		console.log(this.name+'唱'+song);
	}
}
//利用类创建对象
var ldh= new Star('刘德华',28);
var zwj = new Star('张卫健',18);
ldh.sing('《老鼠爱大米》');

类的继承 extends

子类继承父类，查找属性/方法，会采用就近原则，先查找子类中是否有该属性/方法，如果有就调用，如果没有再去父类中查找是否存在。父类中的方法要通过super调用才能访问到

class Father{
	constructor() {

	}
	money() {
		console.log('父亲的财产');
	}
}

class Son extends Father {//子类继承父类，会同时继承父类的所有属性和方法

}
var son = new Son();
son.money();//父类的属性和方法在继承类中可以调用

实现子类向父类中传递参数 super
super关键字，用于访问和调用对象的父类上的函数【包括普通函数和构造函数】。

先看一个会报错的demo

class Father {
	constructor(x,y) {
		this.x = x;
		this.y = y;
	}
	sum() {
		console.log(this.x+this.y);//父类中的函数必须使用父类中的属性  this指向的是父类中的属性
	}
}
class Son extends Father {
	constructor(x,y) {
		this.x = x;
		this.y = y;
	}
}
var son = new Son(1,2);
son.sum();//子类对象在这里直接调用父类方法会报错。因为子类实例创建后直接调用子类的构造函数，数值1，2直接被赋给了子类的属性x,y 而父类的x,y属性并没有被复制。所以当调用父类的sum()方法时，去请求父类的x,y属性值发现并无赋值。所以将报错。

出现以上这种情况，js提供了super关键字，可以用来调用父类的方法。

demo优化后，子类可以向父类中传递参数

使用super关键字调用父类的构造函数

class Father {
	constructor(x,y) {
		this.x = x;
		this.y = y;
	}
	sum() {
		console.log(this.x+this.y);
	}
}
class Son extends Father {
	constructor(x,y) {
		super(x,y);//调用父类的构造函数，将子类的参数传递给了父类
	}
}
var son = new Son(1,2);//new后调用子类的构造函数，在子类构造函数中又调用了父类的构造函数，让父类构造函数中也获取到了属性的值
son.sum();//正确输出结果3

使用super关键字调用父类中的普通函数

class Father {
	say() {
		return '我是爸爸'
	}
}
class Son extends Father {
	say() {
		console.log(super.say() + '的儿子');
	}
}
var son = new Son();
son.say();//子类实例会先去子类中查找是否有say()，有就执行，没有就再去父类中查找有没有say()。就近原则。
//最后输出结果是：我是爸爸的儿子

super必须在子类的this使用之前调用

class Father {
	constructor(x,y) {
		this.x = x;
		this.y = y;
	}
	sum() {
		console.log(this.x+this.y);
	}
}
class Son extends Father {
	constructor(x,y) {
		super(x,y);//super必须在子类的this使用之前调用
		this.x = x;
		this.y = y;
		super(x,y)//写在这里报错 super必须在子类的this使用之前调用 
	}
	subtract() {
		console.log(this.x - this.y);
	}
}
var son = new Son(5,3);
son.subtract();//子类有自己特有的函数，需要用到子类自己的x,y
son.sum();//如果子类要调用父类的sum()，就必须要给父类的属性x,y传递值，所以必须在子类的构造函数中使用super调用父类的constructor()。而super必须在子类的this使用之前调用。

使用类的注意事项

类中调用公共属性或者公共方法必须全部 + this
创建类的一个实例对象，获取到类的btn属性，当对象的按钮发生点击事件后，再调用对象的sing方法。
注意这里调用sing千万不要加括号。如果加括号就是创建实例后立即调用。不加括号就是，创建实例后，点击按钮后，才调用。
类中this的指向问题，谁调用的，this就指向谁。所以构造函数中的this指向的是实例对象，方法中的this指向的是函数的调用者。

<body>
	<button>点击</button>
	<script>
		class Star {
			constructor(name,age) {
				this.name = name;
				this.age = age;
				this.btn = document.querySelector('button');
				this.btn.onclick = this.sing;//注意这里调用sing千万不要加括号。如果加括号就是创建实例后立即调用。不加括号就是，创建实例后，点击按钮后，才调用。
			}
			sing() {
				console.log(this.name);
			}
		}
		var zxc = new Star('周星驰');