js Class 与普通构造函数有何区别

最新推荐文章于 2025-06-29 19:27:32 发布

转载最新推荐文章于 2025-06-29 19:27:32 发布 · 2.3k 阅读

JAVASCRIPT 同时被 2 个专栏收录

83 篇文章

订阅专栏

VUE.JS

62 篇文章

订阅专栏

博客介绍了JS构造函数、class基本语法和继承。继承包括构造函数形式和Class继承。总结指出，class在语法上更贴近面向对象写法，实现继承也更易读易理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、js构造函数

    let myCanvas = this.$refs.myCanvas
    var ctx = myCanvas.getContext('2d')

    function Circle (x, y, r, color) {
        this.x = x
        this.y = y
        this.r = r
        this.color = color
      }

      Circle.prototype.render = function () {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true)
        ctx.fillStyle = this.color
        ctx.fill()
      }

      Circle.prototype.update = function () {
        this.x += 1
      }

      var yuan = new Circle(100, 100, 1, 'red')
      var timer
      clearInterval(timer)
      timer = setInterval(() => {
        // ctx.clearRect(0, 0, 800, 600)
        yuan.update()
        yuan.render()
        if (yuan.x === 800) {
          clearInterval(timer)
        }
      }, 15)

二、class基本语法

    let myCanvas = this.$refs.myCanvas
    var ctx = myCanvas.getContext('2d')
    class Circle {
        constructor (x, y, r, color) {
          this.x = x
          this.y = y
          this.r = r
          this.color = color
        }
        render () {
          ctx.beginPath()
          ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true)
          ctx.fillStyle = this.color
          ctx.fill()
        }
        update () {
          this.x += 1
        }
      }
      const yuan = new Circle(100, 100, 1, 'red')
      var timer
      clearInterval(timer)
      timer = setInterval(() => {
        // ctx.clearRect(0, 0, 800, 600)
        yuan.update()
        yuan.render()
        if (yuan.x === 800) {
          clearInterval(timer)
        }
      }, 15)

三、继承

1、构造函数形式的继承

//动物
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继承

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