js Class 与普通构造函数的区别

Gnaf12345

已于 2022-06-27 17:27:48 修改

阅读量681

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-06-17 11:46:04 首次发布

本文链接：https://blog.csdn.net/Gnaf12345/article/details/125330825

版权

本文介绍了JavaScript中构造函数创建对象及其方法，展示了如何使用原型实现对象的方法，以及类的定义和更新。同时，文章探讨了两种继承方式：构造函数继承和类继承，通过实例详细解释了Animal和Dog类的继承关系，并展示了如何在类继承中使用super关键字。

摘要由CSDN通过智能技术生成

一、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)

三、构造函数形式的继承

//动物
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()

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