Class的基本语法（笔记）

js与es6对比

1.js中没有类（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);

2.es6中，引入类这个概念。

• constructor方法，就是构造方法。（对应上面js代码中的构造函数Point）。
• this指向实例化对象。
• toString是类原型对象上的方法。
• 类不存在变量提升。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
 //注意定义方法的时候，这里不用function关键字哦
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

实例化的时候，也是使用new。跟构造函数的用法一样。

var p = new Point(1, 2);

类的方法

1.类所有的方法都是定义在原型对象prototype上的，包括constructor也是类原型对象上的方法。

class Point {
  constructor() {
    // ...
  }
  toValue() {
    // ...
  }
}
// 等同于
Point.prototype = {
  constructor() {},
  toValue() {},
};

2.在类的实例上面调用方法，其实就是调用原型上的方法。

class B {}
let b = new B();
//实例化对象的constructor 是在__proto__的，不过原型链中，
//在自身上找不到的方法或者属性时，会原型上找。
//即b.constructor==b.__proto__.constructor
b.constructor === B.prototype.constructor // true

3.类的内部所有定义的方法，都是不可枚举的。
4.属性可以使用表达式，例如下面的类的方法名就叫做“sayHello”

let methodName = 'sayHello';
class Square {
  constructor() {
  }
  [methodName]() {
    // ...
  }
}

constructor 方法

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

class Point {
}

// 等同于
class Point {
  constructor() {}
}

2.constructor方法,直接指向“类”的本身。(与es5中一致）

console.log(Point===Point.prototype.constructor) //true

类的实例

1.通过new来实例化对象，不加会报错。

// 报错
var point = Point(2, 3);

// 正确
var point = new Point(2, 3);

2.实例化的时候，在类的constructor中通过this定义的属性，是实例对象自身的方法。而在类中定义的方法（例如上面的toString方法），则会挂在实例对象原型__proto__上。

image.png

get和set

get取值函数，set存值函数。（一般用不到，懒得写，知道有这么回事得了~~）

静态方法

在方法上加static关键字，就是“静态方法”。

• 可以直接通过类调用。
• 静态方法中的this指向的是类，而不是实例，所以不会被实例继承。

class Foo {
  static classMethod() { //静态方法
    return 'hello';
  }
}
Foo.classMethod() // 'hello'

• 父类的静态方法，可以被子类继承。
• 静态方法也是可以从super对象上调用的。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod();
  }
}

Bar.classMethod() // "hello"

实例属性的新写法

实例属性一般在constructor的通过this定义，也可以定义在类的最顶层。

class Par{
   bb="hello"; //实例的属性可以在顶层定义，不用加this
   constructor (){
       this.aa=1;
  }
}

var p=new Par();
console.log(p.bb) // hello

静态属性

静态属性就是类自身的属性。

class Par{
    constructor (){
     //....
    }
}
Par.aa="haha"; //aa是静态属性
console.log(Par.aa) //"haha"

目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。

class Par{
    // 新写法
    static  aa="haha"; 
}