持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

🎈大家好，我是橙橙子，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

在js中生成一个新对象的方法就是通过构造函数。ES6中给我们提供了Class，很容易生成对象，我们一起看看吧。\

来看一个传统构造函数的例子

function Person (name,age) {
   this.name = name;
   this.age = age;
}

Person.prototype.showName = function () {
   console.log("我叫"+this.name+",今年"+this.age+"岁")
};

let person = new Person("Sara",18);
console.log(person);
person.showName();
console.log(person.name);

打印如下

这个例子同样用Class来实现

class Person {
   constructor (name,age){  // 构造方法
      this.name = name;
      this.age = age;
   }
   showName(){
      console.log("我叫"+this.name+"，今年"+this.age+"岁(通过class创建)")
   }
}

let person = new Person("Sara",18);
console.log(person);
person.showName()

打印如下

可以看到，效果是一样的。ES6的Class的概念，更接近传统语言，对象原型的写法更加清晰、更像面向对象编程的语法。this关键字代表实例对象。Person类除了构造方法，还定义了一个showName方法。定义“类”的方法的时候，不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

类的继承, 传统方法

function Person(name) {
   this.name = name;
}
Person.prototype.showName = function () {
   console.log("我的名字字是" + this.name);
};

function Student(name,study) {
   Person.call(this,name);//继承属性
   this.study = study
}
Student.prototype = new Person();

let person = new Person("Eva");
person.showName();

let student = new Student("Leo","es6");
student.showName();

打印如下

es6 类的继承

通过extends关键字实现继承

class Person{
   constructor(name){
      this.name = name
   }
   showName(){
      console.log("我的名字是"+this.name);
   }
}
let person = new Person("Eva")
person.showName();

class Student extends Person{
   constructor(name){
      super(name);
   }
}
let student = new Student("Leo","ES6");
student.showName()

用super继承父类的方法

class Person{
   constructor(name){
      this.name = name
   }
   showName(){
      console.log("我的名字是"+this.name);
   }
}
let person = new Person("Eva")
person.showName();

class Student extends Person{
   constructor(name,study){
      super(name);
      this.study = study
   }
   showName(){
      super.showName(); // 定义了跟父类一样的方法名  用super继承父类的方法
      console.log("我的名字是" + this.name + "我学习的是" + this.study);
      console.log("子类的showNAme")
   }
}
let student = new Student("Sara","ES6");
student.showName()

运动的小球

// 小球运动画布
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 定义画布宽高颜色
canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = "#000"

// 定义小球
class Ball{
   // 小球的坐标、颜色
   constructor(x,y,color){
      this.x = x;
      this.y = y;
      this.color = color;
      this.r = 40;
   }
   // 绘制单个小球
   render(){
      ctx.save();
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0 ,Math.PI * 2);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.restore();
   }
}

类的继承 定义运动的小球继承基础小球

class MoveBall extends Ball{
   constructor(x,y,color){
      super(x,y,color);
      this.dx = parseInt(Math.random()*(10-(-10)+1)+(-10),10);//Math.random(-10,10);
      this.dy =  parseInt(Math.random()*(10-(-10)+1)+(-10),10) //Math.random(-10,10);
      this.dr =  parseInt(Math.random()*(3-1+1)+1,3)//Math.random(5,10);
   }
   // 小球运动轨迹
   update(){
      this.x += this.dx;
      this.y += this.dy;
      this.r -= this.dr;
      if(this.r < 0 ){
         this.r = 0;
      }
   }
}

let ball = new Ball(60,60,"red"); // 定义初始小球
ball.render();
let ballArr = [];// 小球数组
let colorArr = ["red","blue","yellow","pink","orange"];// 小球颜色数组

canvas.addEventListener("mousemove",function (e) {// 定义鼠标移动的时候，添加新的小球进来
   ballArr.push(new MoveBall(e.offsetX,e.offsetY,colorArr[Math.round(Math.random()*5)]));
})

// 50毫秒后小球消失
setInterval(function () {
   ctx.clearRect(0,0,canvas.width,canvas.height)
   for(let i=0;i<ballArr.length;i++){
      ballArr[i].render();
      ballArr[i].update();
   }
},50)

效果如下：
这就是用Es6的Class实现小球的方法了，谢谢观看！