什么是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 一样,区别不大;
- 主要对属性设置存值函数和取值函数,
拦截
该属性的存取行为