什么是Class ?
- class 类 的本质是 function 函数；
- ES6 语法糖，让对象原型的写法更加清晰、面向对象编程的语法；
- Class 定义 不会被提升，必须在访问前对类进行定义，否则就会报错。
Ⅰ、类的使用
1、constructor方法
class Person {
constructor(name){
this.name = name;
this.age = 18 ;
}
}
const zhangSan = new Text('张三'); // zhangSan.name => '张三' zhangSan.age => 18
- new 实例化 Class类会 自动调用 该方法；
- 默认返回 实例对象 （ this ），和改造函数一样；
- 可以通过形参，传递实例化时的参数。
2、实例属性
class Person {
constructor(){
this.getName= function(){
console.log('张三') } ;
}
getAge() {
console.log('18') }
}
const zhangSan = new Text();
zhangSan.getName(); //正常执行
zhangSan.getAge(); //正常执行
- 写在 constructor() 内的 ”变量、方法“ 为 实例属性
写在 constructor 函数 内、外的方法都可以执行，那么区别在哪里呢 ？
class Person {
constructor(){
this.getName= function(){
console.log('张三') } ;
}
getName() {
console.log('李四') }
}
const zhangSan = new Text();
zhangSan.getName(); // 张三
- 说明 constructor 外的方法，实例化后是放在 实例的 _proto_ （原型链）上 ；
- 如果自己本身上没有，才会去原型链上去找。
在类里 constructor外 加方法 === Person.prototype 上加
3、静态属性
class Test {
static hello() {
console.log('hello Class');
}
}
Test.hello();
- 通过 static 关键字创建静态方法，该方法不能被实例继承，可被 extends 方式继承。
在类里 static hello() === Test.hello = function(){ … }
Ⅱ、类继承的方式
1、实例继承 与 extends 关键字继承
| 类型 | 内容 |
|---|---|
| extends 继承 | 实例属性√ 原型属性√ 静态属性√ |
| 实例化 继承 | 实例属性√ 原型属性√ 静态属性 × |
①.实例继承
class Text{
constructor(a){
this.a=a;
}
fun(){
/*...*/ }
}
let classA = new Text(1);
- constructor() 内的this都继承到了这个实例化对象中，
- constructor() 外的方法和 类.prototype上的方法 ，同样都继承到__proto__上，如果没有同名属性就去proto 上面去获取。
①.extends继承
class Father{
fun(){
/*...*/ }
}
class Son extends Father{
constructor(age){
super();
this.age = age;
}
}
- 子类 没有定义 constrcutor , 则会默认添加一个 ；
- 在constrcutor中调用super方法 , 相当于调用父类的构造函数；
2、super 方法
class Person {
constructor(x, y, color) {
this.height= '180cm';
this.weight= '60kg';
}
static hello() {
console.log('hello Class'); }
}
class Zhangsan extends Person {
constructor(weight) {
super(x, y);
this.weight= weight;
}
}
Zhangsan.hello() //正常继承
- 调用super函数是为了在子类中获得父类的this，调用之后this指向子类；
- super 方法一定要写到 this 前面 ，不然报错 ；
- 不调用 super 方法，子类就得不到 this对象 ；
- super 方法，如果不写要继承的属性， 默认全部继承。
Ⅲ、类 的 getter和setter
class Test {
constructor() {
/*...*/ }
get prop() {
return 123;
}
set prop(value) {
console.log('set: '+ value);
}
}
let inst = new MyClass();
inst.prop; // 123
inst.prop = 111; // 'set: 111'
- 使用 场景并不多，class的get、set 和 ES5 一样，区别不大；
- 主要对属性设置存值函数和取值函数，
拦截该属性的存取行为