类的由来
JavaScript 语言中,生成实例对象的传统方法是通过构造函数
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);
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class
关键字,可以定义类
基本上,ES6 的class
可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已
class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } }
constructor 方法
constructor()
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。一个类必须有constructor()
方法,如果没有显式定义,一个空的constructor()
方法会被默认添加
class Point { } // 等同于 class Point { constructor() {} }
类的实例
生成类的实例的写法,与 ES5 完全一样,也是使用new
命令
class Point { // ... } // 报错 var point = Point(2, 3); // 正确 var point = new Point(2, 3);
注意点
不存在提升
类不存在变量提升(hoist),这一点与 ES5 完全不同
Class属性与方法
### 实例方法
通过类的实例对象调用方法
```js
class People{
say(){
console.log("Hello");
}
}
var p = new People();
p.say()
```
### 实例属性
实例属性指的是类的实例对象可调用的属性
```js
class People{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log(this.name,this.age);
}
}
var p = new People("iwen",20);
p.say()
console.log(p.name,p.age);
```
### 静态方法
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上`static`关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”
```js
class Person {
static classMethod() {
console.log("Hello");
}
}
Person.classMethod() // Hello
var p = new Person();
p.classMethod() // p.classMethod is not a function
```
> **温馨提示**
>
> 注意,如果静态方法包含`this`关键字,这个`this`指的是类,而不是实例。
```js
class People {
static getSay() {
this.say();
}
static say() {
console.log('hello');
}
say() {
console.log('world');
}
}
People.getSay() // hello
```
### 静态属性
静态属性指的是 Class 本身的属性,即`Class.propName`
```js
class People{}
People.status = "等待"
console.log(People.status);
class People {
static getSay() {
this.say();
}
static say() {
console.log('hello');
}
say() {
console.log('world');
}
}
People.getSay()
结果:// hello
Class 的继承
### 基础用法
Class 可以通过`extends`关键字实现继承,让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承,要清晰和方便很多
```js
class Point {
}
class ColorPoint extends Point {
}
```
ES6 规定,子类必须在`constructor()`方法中调用`super()`,否则就会报错,这是因为子类自己的`this`对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用`super()`方法,子类就得不到自己的`this`对象
```js
class Point {
constructor(x,y){
this.x = x;
this.y = y;
}
getPoint(){
console.log(this.x,this.y);
}
}
class ColorPoint extends Point {
constructor(x,y,z){
super(x,y)
this.z = z;
}
}
let cp = new ColorPoint(10,20,30)
cp.getPoint();
```