在JS中，生成实例对象的传统方法是通过构造函数，这样的写法和传统的面向对象语言差异很大，在ES6中提供了更接近传统语言的写法，引入了class（类）的概念，作为对象的模板，通过class关键字可以定义类
基本上class可以看作是一个语法糖，它的绝大部分功能，es5都可以做到，新的写法只是为了让对象的原型写法更加清晰，更像面向对象变成的语法而已
//es6
class Point{
constructor(x,y){
this.x=x;
this.y=y;
}
toString(){
return '('+this.x+','+this.y+')';
}
}
//es5
function Point(x,y) {
this.x=x;
this.y=y;
}
Point.prototype.toString=function () {
return '('this.x+','+this.y+')';
}
在使用class时，constructor方法就是构造方法，而this关键字则代表实例对象，可以这么理解，就是说我们在es6中在函数体内写的代码在es6的class语法中都移植到constructor中
在上面的代码中除了构造类的方法，还定义了一个toString方法，注意，在定义类的方法时不需要加上function这个关键字，直接把函数定义放进去就可以了，另外，方法之间不要加逗号分隔，否则会报错
在使用的时候也是直接对类使用new命令，和构造函数的用法一致
class Point{
constructor(name){
this.name=name;
}
sayName(){
console.log(this.name);
}
}
var point=new Point('tom');
point.sayName();
事实上，类的所有方法都是定义在类的prototype属性上面，在类的实例上调用方法，其实就是在调用原型上的方法
class B {}
let b = new B();
b.constructor === B.prototype.constructor // true
所以如果我们想要为一个类添加方法，只需要在该类的prototype上添加即可，或者使用Object.assign会更加方便
class Point{
constructor(name){
this.name=name;
}
}
Point.prototype.sayName=function(){
console.log(this.name);
}
var point=new Point('tom');
point.sayName();
//使用Object.assign();
Object.assign(Point.prototype,{
toString(){},
toValue(){}
})
注意一个与es5写法的区别，在class中定义的方法都是不可枚举的，类的属性名可以使用表达式
class Square {
constructor(length) {
// ...
}
[methodName]() {
// ...
}
}
constructor
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法，一个类必须有constructor方法，如果没有显示定义，一个空的constructor会被默认添加
class Point {
}
var point = new Point();
console.log(point);
/*
Point {}
__proto__:
constructor:class Point
*/
constructor方法默认返回实例对象，完全可以指定返回另一个对象
//es6
class Foo {
constructor(name) {
this.name = name;
return {}
}
}
var foo = new Foo('tom');
console.log(foo.name); //undefined
console.log(foo instanceof Foo) //false
//es5
function Foo(name) {
this.name=name;
return {}
}
var foo = new Foo('tom');
console.log(foo.name); //undefined
console.log(foo instanceof Foo); //false
和函数一样，类也可以使用表达式的形式，并且在定义完成后可以立即执行
let person = new class {
constructor(name) {
this.name = name;
}
sayName() {
console.log(person.name);
}
}('张三');
person.sayName(); // "张三"
在上面的代码中person只在Class内部有定义，表示当前类，在外部使用会报错
不存在变量提升
类不存在变量提升，这一点与es5不同，必须保证子类在父类之后定义
new Foo(); // ReferenceError
class Foo {}
私有方法
es6不提供私有方法，只能变相模拟，例如在定义时在名字上做区别，如将私有方法都定义以_开头，我个人觉的比较好的是利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值
const bar = Symbol('bar');
const snaf = Symbol('snaf');
export default class myClass {
//公有方法
foo(baz) {
this[bar](baz)
}
//私有方法
[baz](baz) {
return this[sanf] = baz
}
}
由Symbol定义的都是Symbol值，导致第三方无法获取，因此达到了私有方法和私有属性的效果
this的指向
类的方法内部包含有this，默认指向类的实例，但是如果在外部带调用时需要格外注意，在不同环境下，this的指向发生改变，可能会报错，推荐使用箭头函数
静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承，如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为"静态方法"，静态方法不能在实例上调用，否则会报错
class Foo{
static classMethod(){
return 'hello'
}
}
Foo.classMethod() //hello
var foo=new Foo();
foo.classMethod(); //foo.classMethod is not a function
Class的getter和setter
和es5一样，在类的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为
class MyClass{
constructor(){}
get prop(){
return 'getter'
}
set prop(value){
console.log('setter'+value)
}
}
let init=new MyClass();
init.prop=123;
console.log(init.prop);
继承
class可以通过extends关键字实现继承，这笔es5的通过修改原型链实现继承要更加方便
class Point{}
class ColorPoint extends Point{ }
父类的静态方法也会被子类继承，在子类的构造函数中，只有调用了super之后，才可以使用this关键字，否则会报错，因为子类实例的构建是基于父类实例的加工，只有super方法才能返回父类的实例
super关键字
super是es6新增加的关键字，指向当前对象的原型对象
super既可以当作函数使用，也可以当作对象使用，在这两种情况下，用法完全不同
第一种情况，super作为函数调用时，代表父类的构造函数，es6要求，子类的构造函数必须执行一次super函数
class A{
constructor(){
console.log(new.target.name);
}
}
class B extends A{
constructor(){
super()
}
}
new A() //A
new B() //B
new.target指向当前正在执行的函数，可以看到在super执行的时候，它指向的是子类B的构造函数，而不是父类A的构造函数，也就是说，虽然super代表了父类A的构造函数，但是返回的是子类B的实例，super内部的this指向的是B，调用super()相当于
A.prototype.constructor.call(this)
作为函数时，super()只能用在子类的constructor中，用在其他地方就会报错
第二种情况，super作为对象时，在普通方法中，指向父类的原型对象，在静态方法中，指向父类
class A{
p(){
return 2;
}
}
class B extends A{
constructor(){
super();
console.log(super.p());
}
}
var b=new B(); //2
console.log(b.p()); //2
上面的代码中，子类B当中的super.p()，就是将super当作一个对象使用，super在普通方法之中，此时指向的是A.prototype，所以super.p()就相当于A.prototype.p();
es6规定，通过super调用父类方法时，方法内部的this指向子类
class A{
constructor(){
this.x=1;
}
print(){
console.log(this.x);
}
}
class B extends A{
constructor(){
super();
this.x=2;
}
m(){
super.print();
}
}
let b=new B();
b.m(); //2
在上面的代码中，虽然我们使用了super作为对象，可以直接使用到父类A的prototype的方法print，但是在print方法中使用了this，而在子类B中调用print方法时，此时的this指向是指向B，所以获取的是子类B本身的x属性
如果作为对象，用在静态方法中时，此时super将指向父类，而不是父类的原型对象
class Parent{
static myMethod(msg){
console.log('static',msg);
}
myMethod(msg){
console.log('instance',msg);
}
}
class Child extends Parent{
static myMethod(msg){
super.myMethod(msg);
}
myMethod(msg){
super.myMethod(msg);
}
}
Child.myMethod(1) //static 1
var child=new Child();
child.myMethod(2); //instance 2
注意，使用super的时候，必须显式指定是作为函数、还是作为对象使用，否则会报错。也就是说必须是对象或方法的格式，不能是直接写一个super
网友评论