黑马程序员技术交流社区

标题: [上海前端] js Class与普通构造函数有何区别 [打印本页]

---

作者: 叶夜葉    时间: 2019-8-23 09:07
标题: [上海前端] js Class与普通构造函数有何区别
js Class与普通构造函数有何区别
转载：https://www.jianshu.com/p/2aaaacd8bad3

[JavaScript] 纯文本查看 复制代码

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基本语法

[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())

三、语法糖

[JavaScript] 纯文本查看 复制代码

console.log(typeof MathHandle) // 'function'

console.log(MathHandle.prototype.constructor === MathHandle) //true

console.log(m.__proto__ === MathHandle.prototype) //true

运行结果一致。我认为，class是构造函数的语法糖。四、 继承
1、构造函数形式的继承

[JavaScript] 纯文本查看 复制代码

//动物

function Animal(){

    this.eat = function (){

        console.log('Animal eat')

    }

}



//狗

function Dog() {

    this.bark = function (){

        console.log('Dog bark')

    }

}



Dog.prototype = new Animal()



var hashiqi = new Dog()

hashiqi.bark()

hashiqi.eat()

2、class继承

[JavaScript] 纯文本查看 复制代码

class Animal {

    constructor(name){

        this.name = name

    }

    eat(){

        alert(this.name + ' eat')

    }

}



class Dog extends Animal {

    constructor(name){

        super(name) //super就是被继承的对象的constructer

    }

    say(){

        alert(this.name + ' say')

    }

}



const dog = new Dog('哈士奇')

dog.say()

dog.eat()

四、总结
1、class在语法上更贴近面向对象的写法。
2、class实现继承更加易读易理解。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2