# ES6的Class和普通构造函数对比

https://zhuanlan.zhihu.com/p/42409367

**JS构造函数**

```js
function MathHandle(x,y) {
    this.x = x;
    this.y = y;
}

MathHandle.prototype.add = function() {
    return this.x + this.y;
}
var m = new MathHandle(1,2);
console.log(m.add());
```

**Class**

```js
//ES6的语法糖，本质还是JavaScript面向对象那套东西。最终还是会转换成上面的代码
//形式上强行模仿了java,c#,有点失去了JavaScript的个性
class MathHandle {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }

    add() {
        return this.x + this.y;
    }
}
const m = new MathHandle(1,2);
console.log(m.add());

console.log(typeof MathHandle) // 'function'
console.log(MathHandle.prototype.constructor === MathHandle) //true
//构造函数的显式原型对象等于实例的隐式原型对象
console.log(m.__proto__ === MathHandle.prototype) // true
```

**原生继承**

```js
function Animal() {
    this.eat = function() {
        console.log('animal eat')
    }
}
function Dog() {
    this.break = function() {
        console.log('dog bark');
    }
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
hashiqi.bark();
hashiqi.eat();
```

**Class继承**

```js
class Animal {
    constructor(name) {
        this.name = name;
    }
    eat() {
        console.log(this.name + 'eat');
    }
}
class Dog extends Animal {
    constructor(name) {
        super(name);
    }
    say() {
        console.log(this.name + 'say');
    }
}
const dog = new Dog('哈士奇');
dog.say();
dog.eat();
```