es6笔记(Class)

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
//类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

类的实例对象

//定义类
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();// 调用父类的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本身的属性，即Class.propname，而不是定义在实例对象（this）上的属性。
class Foo {
}
Foo.prop = 1;

Foo.prop // 1
//目前，只有这种写法可行，因为ES6明确规定，Class内部只有静态方法，没有静态属性。

// 以下两种写法都无效

class Foo {

// 写法一

prop: 2
// 写法二

static prop: 2

}
Foo.prop // undefined

相关推荐