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>