ES6中定义类 和 继承

目录

1、ES5中定义类

2、ES6中定义类

3、继承

super关键字

---

1、ES5中定义类

通过构造函数实现：

	   function Student(name,age){ //构造函数,建议首字母大写,Student可以看作类
			this.name = name;
			this.age = age;
		}

		var s1 = new Student('刘备',32); //s1就是对象
		var s2 = new Student('小乔',18);

2、ES6中定义类

 class 类名{
             constructor([参数]){ //构造方法:用来初始化对象的成员
                方法体;
             }
         }

（1）创建对象

var 对象名 = new 类名([参数])
          
        强调：在ES6中constructor构造方法不能显式调用 

例如：

 class Student{ //使用class关键字定义类
				constructor(na,a){ //构造方法：用来初始化对象的成员
					this.name = na;
					this.age = a;
				}
			}

‘this.name’中的name是对象的属性

(2) 对象成员(包括属性和方法)的访问
        
           对象名.属性名
           
           对象名.方法名([参数])

//Es6 中定义
class Student {
    constructor(name, age) {//用来初始化对象的成员
        this.name = name;
        this.age = age;
    }
    study() {//成员方法，对象的行为
        console.log('学生' + this.name + '在学习');

    }
    sleep() {
        console.log('学生' + this.name + '在休息');

    }
}
var s1 = new Student('关羽', 21);
var s2 = new Student('诸葛亮', 24);

console.log(s1.name);
s2.study();
s1.sleep();

 

 

3、继承

继承：在JavaScript中，继承用来表示两个类之间的关系，子类可以继承父类的一些属性和方法，在继承以后还可以增加自己独有的属性和方法。

（1）定义父类和子类

// 先准备一个父类
class Father {
  constructor() {}
  money() {console.log(100);}
}
// 子类继承父类
class Son extends Father {}

（2）调用父类中的方法

// 创建子类对象
var son = new Son();
son.money();	// 输出结果：100

super关键字

super关键字用于访问和调用对象在父类上的方法，可以调用父类的构造方法，也可以调用父类的普通方法。

（1）定义父类和子类

class Father {
  constructor(x, y) {this.x = x; this.y = y;}
  sum() {console.log(this.x + this.y);}
}
class Son extends Father {
  constructor(x, y) {super(x, y); }
}

（2）调用父类中的方法

var son = new Son(1, 2);
son.sum(); // 输出结果：3

继承的应用实例：计算圆的面积以及圆柱表面积和体积

class Point {   //点
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    show() {
        return "(" + this.x + "," + this.y + ")";
    }
}

class Circle extends Point {  //圆
    constructor(point, radius) {
        super(point.x, point.y);
        this.radius = radius;
    }
    area() {
        let s = Math.PI * Math.pow(this.radius, 2);
        return s;
    }
    show() {
        console.log('圆心：', super.show());
        console.log('半径：', this.radius);
        console.log('圆的面积为：', this.area());
    }
}
class Cylinder extends Circle {   //圆柱体
    constructor(point, radius, height) {
        super(point, radius);
        this.height = height;
    }
    vol() {    //圆柱体积
        let v = super.area() * this.height;
        return v;
    }
    cylinder_area() {   //圆柱表面积
        let a = 2 * super.area() + 2 * Math.PI * this.radius * this.height;
        return a;
    }
    show() {
        super.show();
        console.log('高：', this.height);
        console.log('圆柱表面积：' + this.cylinder_area());
        console.log('圆柱的体积为：' + this.vol());
    }
}
var point = new Point(50, 30);
var circle = new Circle(point, 5);
var cylinder = new Cylinder(point, 5, 9)
circle.show();
cylinder.show();

结果如下：