Class的使用和继承，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字。
一，Class的基本使用和继承
1. 类的基本使用
1.1 类， 是具有相同属性和行为的一类群体。
示例：
- HTML页面引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
- js页面
// 类声明，类相当于模板
class Student{
// 方法名()
read(){
console.log('Student read()...')
}
}
// 实例化对象
var s1=new Student();
s1.read();
- 效果
2. 类的继承
2.1. Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
示例： - HTML页面引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
- js页面
// 父类
class Fu{
aa(){
console.log('父类');
}
}
// 子类
class Zi extends Fu{
// 重写父类方法
bb(){
console.log('子类');
}
}
var s=new Fu();
s.aa();
- 效果
二，构造方法
1.constructor方法
1.1 constructor方法是类的默认方法,通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor`方法会被默认添加。
示例：
- HTML页面引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
- js页面
里面包含 this和super关键字
this 关键字通常在对象的 构造函数中使用，用来引用对象。
关键字this：总是指向调用该方法的对象
// 父类
class Fu{
// 构造方法，不能被继承
constructor(){
console.log('Fu.......');
this.name='tom';
}
}
// 子类
class Zi extends Fu{
// 构造方法，执行子类构造方法之前，必须先执行父类构造方法
constructor(){
super();//执行父类的构造方法
console.log('Zi......');
this.name='jack';
}
}
var s=new Zi();
console.log(s.name);
- 效果
三，实例属性和实例方法
1.实例
1.1 什么是实例：实例就是具体属于某个对象，哪个对象调用它，它里边的this就指哪个对象
示例：
- HTML页面引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
- js页面
// 类声明，类相当于模板
class Student{
static p=1;
// 构造函数
constructor(name,age,sex){
console.log('构造函数已生成....'+Student.p);
// 实例属性
this.name=name;
this.age=age;
this.sex=sex;
}
// 实例方法()
read(){
console.log('student read()...'+this.name);
}
}
//实例化对象 constructor
var a=new Student('liyi',12,'女');
a.read();
console.log(a.name);
console.log(a.age);
console.log(a.sex);
console.log(Student.p)
- 效果
四，静态方法和静态属性
1.静态方法
1.1 类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
示例：
- HTML页面引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
- js页面
class Foo {
static classMethod() {
return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function
注： 上面代码中，Foo类的classMethod方法前有static关键字，表明该方法是一个静态方法，可以直接在Foo类上调用（Foo.classMethod()），而不是在Foo类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。
2.静态属性
2.1 静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。
class Foo {
}
Foo.prop = 1;
Foo.prop // 1
上面的写法为Foo类定义了一个静态属性prop。
目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。
示例：新写法
class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myStaticProp); // 42
}
}
注：这个新写法大大方便了静态属性的表达。