类和继承的基本使用

169 阅读2分钟

提起面向对象编程,任何语言都必然会提及类和继承,js也是一样,但在悠悠长长的发展过程中,js一直是使用函数来模拟实现类的,跟其他语言对比,可读性就会差很多。比如java,java里面有专门的关键字class来声明一个类,js没有;java有entends继承一个类,js没有;java有静态关键字static声明自己私有的东西子类不能用的等等,js也没有;

一直到ES6出现,才开启了class及相关关键字的使用。让js的类使用起来更像其他语言的类,可读性更高。 如下:

class Person {
    constructor(name) {
        this.name = name;
    }
    show() {
        console.log(this.name);
    }
    static fn() {
        console.log("私有方法fn")
    }
}
let p = new Person('alice');
typeof(Person)//function
Person.fn();//私有方法fn
console.log(p.name);//alice
p.show();//alice
p.fn();//Uncaught TypeError: p.fn is not a function

由于就是一些语法规则,比较简单,这里小记几点即可:

  1. ES6 的类,完全可以看作构造函数的另一种写法,就是一个语法糖;本质还是一个function
  2. 构造函数的prototype属性,在 ES6 的“类”上面继续存在。即:ES6类上的所有方法(除了用static定义的)都定义在类的prototype属性上面
  3. 使用static定义的属于属性或者方法叫静态属性和静态方法,只能通过类名调用,不会被子类继承
  4. 由于实例方法都是定义在构造函数prototype中,所以使用Object.assign()可以方便的向一个类中添加多个方法
class A{
  constructor(){ }
}
Object.assign(A.prototype, {
  xx(){},
  xxx(){}
});
  1. 通过new生成对象时,自动调用constructor方法,如果没有显式定义该方法,系统会隐式的添加一个空的constructor方法;子类构造函数必须加上super()执行父类的构造constructor函数
  2. 在“类”的内部可以使用get和set关键字,在读取或者设置该属性时可以拦截到,其实这点es5也是一样
  3. 除了class 类名{}的声明方式,还可以使用表达式的形式: const A= class{...},但比较少用
  4. class内部默认是严格模式,且class声明的变量不会有预编译变量提升的东西
  5. 使用entends实现继承,格式:
class A {}

class B extends A {
  constructor() {
    super();
  }
}