es6类和对象

一、类的定义

1 2 3 4 5 6 7 8

class Parent{        constructor(name="zhang"){            this.name=name;        }    }      let shi=new Parent("v");//类的实例    console.log("constructor",shi);

二，类的继承

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

//继承 class Parent{        constructor(name="zhang"){            this.name=name;        }    }       class Child extends Parent{  // extends 用于继承父类Child继承 Parent       }       console.log("extend", new Child());   //继承传递参数，child向parent传递参数，改变parent的默认参数 class Parent{        constructor(name="zhang"){            this.name=name;        }    }       class Child extends Parent{          constructor(name="child"){              super(name);             //super必须放在设置改变参数的前面              this.type="child"          }     }       console.log("extend", new Child("hello")); } //extend Child {name: "hello", type: "child"}

class Female extends Person {
    constructor(name){
        super(name); //调用父类的，调用之后，子类才有this
        this.gender = 'female';
    }
    sayHello(){
        return super.sayHello() + ', I am ' + this.gender; 
    }
}

子类必须在父类的构造函数中调用super()，这样才有this对象，因为this对象是从父类继承下来的。而要在子类中调用父类的方法，用super关键词可指代父类。

ES5中类继承的关系是相反的，先有子类的this，然后用父类的方法应用在this上。

ES6类继承子类的this是从父类继承下来的这个特性，使得在ES6中可以构造原生数据结构的子类，这是ES5无法做到的。

三、getter 、setter 方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

class Parent{        constructor(name="zhang"){            this.name=name;        }         get long(){         return "mk"+this.name     //属性在读取时前面加上‘mk’     }     set long(value){         this.name=value;//给long这个属性赋值时会将值付给当前的name     } }   let v=new Parent(); console.log("getter",v.long); v.long="hello" console.log("setter",v.long);

四、静态方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

//静态方法     class Parent{        constructor(name="zhang"){            this.name=name;        }          static tell(){             console.log("tell");         }     }     Parent.tell();//静态方法通过类去调用，而不是类的实例调用。   //静态属性     class Parent{        constructor(name="zhang"){            this.name=name;        }      }       Parent.type="test";//静态属性没有关键词，在类定义后直接定义，类名.属性=“”     console.log("静态属性",Parent.type); } ES6也可以定义类的静态方法和静态属性，静态的意思是这些不会被实例继承，不需要实例化类，就可以直接拿来用。ES6中class内部只能定义方法，不能定义属性。在方法名前加上static就表示这个方式是静态方法，而属性还是按照ES5的方式来实现。 // ES5写法 Person.total = 0; //静态属性 Person.counter = function(){ //静态方法 return this.total ++ ; } // ES6写法 class Person { ... static counter(){ return this.total ++ ; } } Person.total = 0;

es6与es5中类的比较。

举个例子，在ES5中定义一个类：

function Person(name) {
    this.name = name; 
}

Person.prototype.sayHello = function(){
    return 'Hi, I am ' + this.name;
}
1
2
3
4
5
6
7
8

而用ES6的写法重写一下，检测类型发现Person本质上仍然是函数：

class Person {
    constructor(name){
        this.name = name;
    }
    sayHello(){
        return 'Hi, I am ' + this.name;
    } 
}

typeof Person; //'function'
1
2
3
4
5
6
7
8
9
10
11

调用的方式都是一致的：

var me = new Person('Yecao');