ES6面向对象

最新推荐文章于 2021-12-04 09:53:56 发布

骤雨f

最新推荐文章于 2021-12-04 09:53:56 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript es6

本文链接：https://blog.csdn.net/Brycee/article/details/120657924

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了ES6中的class语法，指出其作为ES5构造函数和原型链的糖语法，强调了构造函数、成员属性、成员方法、静态方法和静态属性的使用方式，并通过示例展示了继承的概念。此外，还提到了静态代码块和初始化静态属性的方法。

摘要由CSDN通过智能技术生成

类

ES6中的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class的写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已

function Point(x,y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '('+this.x+','+this.y+')';
};
var p = new Point(1,2);

等价于

class Point {
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  toString() {
    return '('+this.x+','+this.y+')';
  }
}

构造函数

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

成员属性

成员属性市直接定义在类中的属性，我们可以为其赋默认值，如果没有指定默认值，默认值为undefined

class Foo(){
  name = 'bry';
}

成员方法

成员方法是直接定义在类中的方法，从ES5的角度理解，成员方法就是定义在构造函数原型中的方法，供所有实例共享的方法

class Foo{
  name = 'bry';
  sayName(){
    console.log(this.name);
  }
}

静态方法

静态方法就是定义在类上的方法，可以通过类名直接调用的方法

class Foo{
  static sayName(){
    console.log('my name is bryce');
  }
}
Foo.sayName()

静态属性

静态属性是定义在类上的属性，可以通过类名直接调用的属性

class Foo{
  static name = 'bry'
}
Foo.name

静态代码块

用于初始化静态属性的代码区域

class Foo{
  static name;
  static {
    this.name = 10;
  }
}
Foo.name

继承

class可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清楚和方便很多，如果子类提供了constructor，那么必须在constructor方法中调用super方法，否则新建实例时会报错。父类的静态方法，也会被子类继承

class Animal {
  name ;    // 成员属性   - 声明在实例中
  age ;
  static num =999; // 静态属性
  constructor(name,age){  // 构造函数
    this.name = name;
    this.age = age;
  }
  sayName(){  // 成员方法 - 声明在原型中
    console.log('my name is',this.name);
  }
  static sayNum(){  // 静态方法
    console.log(this.num);
  }
}
let a1 = new Animal('terry',12);
console.log(a1);
a1.sayName();
let a2 = new Animal('tom',12);
console.log(a2);
a2.sayName();
Animal.sayNum();

class Dog extends Animal {
  gender;
  constructor(name,age,gender){
    super(name,age);
    this.gender = gender;
  }
  sayGender(){
    console.log('my gender is',this.gender);
  }
}
let d1 = new Dog('tom',1,'male');
console.log(d1)
Dog.sayNum()