JavaScript Class介绍以及使用方法(代码说明)

Class
学过Java的小伙伴会发现, 这个class和Java里的class基本语法并没有什么区别… 下面正式开始介绍.

定义类
JavaScript 语言的传统方法是通过构造函数，定义并生成新对象。

//例: 

function Point (x,y) {
        this.x = x;
        this.y = y;        
    }              
    Point.prototype.toString = function () {
        return '(' + this.x + ', ' + this.y + ')';
    }                                      
    var oP = new Point(1,2);
    console.log(oP);

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，
作为对象的模板。通过class关键字，可以定义类。
基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，
新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
上面的代码用ES6的“类”改写，就是下面这样。

class Point {
        constructor(x,y) {
            this.x = x;
            this.y = y;
        }
        toString() {
            return '(' + this.x + ', ' +this.y + ')';
        }
    }    
    var oP = new Point(1,2);
    console.log(oP);    
    console.log(oP.toString());

需要注意一下几个小问题:

1. 代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。

2. 注意，定义“类”的方法的时候，前面不需要加上function这个保留字，直接把函数定义放进去了就可以了。

3. 另外，方法之间不需要逗号分隔，加了会报错。

4. 类的数据类型就是函数，类本身就指向构造函数

5. 构造函数的prototype属性，在ES6的“类”上面继续存在。
事实上，类的所有方法都定义在类的prototype属性上面。

class Point {
        constructor() {
            this.x = 10;            
            alert(0);
        }
        toString() {
            alert('1');
        }
        toValue() {
            alert('2');
        }  
    }
    console.log(Point.prototype);

6. 类的内部所有定义的方法，都是不可枚举的（enumerable）。

//例   

class Point {
        constructor (x,y) {
            console.log(x,y);
        }
        toString() {
            console.log(1);
        }
    }

    function Point1 () {
        this.toString = function () {
            console.log(1);
        }
    }
    Point1.prototype.toValue = function () {
        console.log(2);
    }
    var oP = new Point(1,2);
    var oP1 = new Point1();

    for (var name in oP) {
        console.log(name);// 1 2 
    }
    for (var name in oP1) {
        console.log(name);// toString toValue
    }

7. 类的实例共享一个原型对象
   

class Point {

    }


    var p1 = new Point();
    Point.prototype.say = function () {console.log('YyYy')};

    var p2 = new Point();
    // 实例的__proto__ 指向构造函数的prototype;
    p1.__proto__.printName = function () { console.log('OoOo')};

    var p3 = new Point();

    p1.printName();//OoOo
    p2.printName();//OoOo
    p3.printName();//OoOo

    p1.say();//YyYy
    p2.say();//YyYy
    p3.say();//YyYy

继承(单继承)
跟java没啥区别, 但同ES5是有一个区别的; 先看一个继承实例.//例: 

class Father {
    constructor(){
        this.house = 2;
    }
}

class Child extends Father{
    constructor(){
        super();
        this.age = 10;
    }
}

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6的继承机制完全不同，

实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

Class 静态方法
定义: 类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

    // Foo类的classMethod方法前有static关键字，表明该方法是一个静态方法，
    // 可以直接在Foo类上调用（Foo.classMethod()），而不是在Foo类的实例上调用。
    // 如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。
//例1
   

class Foo {
        static classMethod() {
            console.log('hello');
        }
    }

    Foo.classMethod() // 'hello'

    var foo = new Foo();
    foo.classMethod();//报错: foo.classMethod is not a function


    //父类的静态方法，可以被子类继承
    class Bar extends Foo {

    }
    Bar.classMethod();//hello

//例2: // 静态方法也可以从super对象上调用
   

 class Foo2 {
        static classMethod() {
            return 'Foo2 staic';
        }
    }

    class Bar2 extends Foo2 {
        constructor () {
            super();
        }
        static classMethod() {
            console.log(super.classMethod() + ', too');
        }
        say() {
           console.log(super.classMethod() + ', say');//报错 :(intermediate value).classMethod is not a function
        }
    }

    // 子类调用父类的static方法只能在静态函数中调用
    var oB2 = new Bar2();
    oB2.say();

    Bar2.classMethod();