002-ES6Class和普通构造函数的区别

ES5之前的构造函数

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)


typeof MathHandle // 'function'
MathHandle.prototype.constructor === MathHandle // true
m.__proto__ === MathHandle.prototype // true

 

ES6  class重写

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(typeof MathHandle)  // 'function'
console.log(MathHandle.prototype.constructor === MathHandle)  // true
console.log(m.__proto__ === MathHandle.prototype)  // true

从以上可以看出ES6的class只是ES5构造函数的语法糖


ES5简单继承实现

// 动物
function Animal() {
    this.eat = function () {
        alert('Animal eat')
    }
}

//
function Dog() {
    this.bark = function () {
        alert('Dog bark')
    }
}

// 绑定原型,实现继承
Dog.prototype = new Animal()

var hashiqi = new Dog()
hashiqi.bark()
hashiqi.eat()

ES6继承的实现

class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        alert(this.name + ' eat')
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name)   // 注意 !!!
        this.name = name
    }
    say() {
        alert(this.name + ' say')
    }
}

const dog = new Dog('哈士奇')
dog.say()//哈士奇say
dog.eat()//哈士奇eat

Class 在语法上更加贴合面向对象的写法
Class 实现继承更加易读、易理解
更易于写 java 等后端语言的使用
本质还是语法糖,使用 prototype

 2019-05-09

转载于:https://www.cnblogs.com/ccbest/p/10838988.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值