Class的基本语法
//es5
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 Point {
constructor(x,y){
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ',' + this.y + ')';
}
}
var p = new Point('hi','hello');
console.log(p.toString());//(hi,hello)
console.log(typeof Point);//function
console.log(Point === Point.prototype.constructor);//true
//上面代码表明，类的数据类型就是函数，类本身就指向构造函数。
constructor
//一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
//constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
class Foo {
constructor() {
return Object.create(null);
}
}
new Foo() instanceof Foo
// false
类的实例对象
//定义类
class Point {
constructor(x,y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ',' + this.y + ')';
}
}
var point = new Point(2,3);
point.toString() // (2,3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.proto.hasOwnProperty('toString') // true
//上面代码中，x和y都是实例对象point自身的属性（因为定义在this变量上）
//所以hasOwnProperty方法返回true，而toString是原型对象的属性（因为定义在Point类上），
//所以hasOwnProperty方法返回false。这些都与ES5的行为保持一致。
Class的继承
//Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。
class ColorPoint extends Point {
constructor(x,y,color){
super(x,y); //调用父类的constructor(x,y);
this.color = color;
}
toString() {
return this.color + ' ' + super.toString();// <a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a><a href="/tag/fulei/" target="_blank" class="keywords">父类</a>的toString()
}
}
var c = new ColorPoint('hi','hello','yellow');
console.log(c.toString());
//子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象
Object.getPrototypeOf()方法可以用来从上获取父类;
console.log(Object.getPrototypeOf(ColorPoint) === Point)//ture
//ES6允许继承原生构造函数定义子类，因为ES6是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。下面是一个继承Array的例子。
class MyArray extends Array {
constructor(...args) {
super(...args);
}
}
var arr = new MyArray();
arr[0] = 12;
arr.length // 1
arr.length = 0;
arr[0] // undefined
//这意味着，ES6可以自定义原生数据结构（比如Array、String等）的子类，这是ES5无法做到的。
Class的取值函数（getter)和存值函数（setter)
class MyClass {
constructor(){
this.value = ''
}
get prop() {
return this.value;
}
set prop(value) {
this.value = value;
}
}
let inst = new MyClass();
inst.prop = 'hello is me';
console.log(inst.prop)
Class的Generator方法
//如果某个方法之前加上星号（*），就表示该方法是一个Generator函数。
class Foo {
constructor(...args) {
this.args = args;
}
- [Symbol.iterator]() {
for (let arg of this.args) {
yield arg;
}
}
}
for (let x of new Foo('hello','world')) {
console.log(x);
}
// hello
// world
Class的静态方法
//如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
class Foo {
static classMethod() {
return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()// TypeError: foo.classMethod is not a function
//父类的静态方法，可以被子类继承。
//静态属性指的是Class本身的属性，即Class.propname，而不是定义在实例对象（this）上的属性。
class Foo {
}
Foo.prop = 1;
Foo.prop // 1
//目前，只有这种写法可行，因为ES6明确规定，Class内部只有静态方法，没有静态属性。
// 以下两种写法都无效
class Foo {
// 写法一
prop: 2
// 写法二
static prop: 2
}
Foo.prop // undefined
