JS引擎是一个大的工厂，
工厂的专家制作出了Object.prototyp产品
在这个产品的基础上又制造出了Function.prototype
在这个原型的基础上制造除了两个非常厉害的机器 Object函数和Function函数
Object函数用来制造队形
Function函数用来制造函数
比如制做一个空的数组[]这么一个对象
在对象身上都有一个proto这么一个属性，用来指明这个对象的原型是谁
在每个对象的原型身上又有constructor这个属性，用来表明它的构造函数是谁
// 在ES5下通常我们会这么写
const Meizi = function(a,b){
this.a = a;
this.b = b;
return this;
}
Meizi.prototype = {
constructor:Meizi,
print: function(){
console.log(this.a+' '+this.b)
}
}
const Meizi = new Meizi ('hello','world').print();
// 用class改写
class Meimei{
constructor(a,b) {
this.a = a,
this.b = b
return this;
}
print() {
console.log(this.a+' ' +this.b)
}
}
const Meizi = new Meimei('hello','world').print();
console.log(typeof Meimei);//function
1.Meizi 中的constructor方法是构造方法，
this关键字则代表实例对象。也就是说，ES5
的构造函数Meizi ，对应ES6的Meizi 这个类的构造方法。
2.Meizi 这个类除了构造方法，还定义了一个print方法。
注意，定义“类”的方法的时候，前面不需要加上function
这个关键字，直接把函数定义放进去就可以了。另外，方法之间
不需要逗号分割，加了会报错。
3.构造函数的prototype属性，在ES6的“类”上面继续存在。而且类的所有方法都
定义在类的prototype属性上面
console.log(Meizi.prototype)
4.定义在类中的方法都是不可以枚举的
console.log(Object.keys(Meizi.prototype))//[]
5 constructor 方法是类的默认方法，通过new命令生成对象的实例时，自动调用该方法。一个类必须有constrctor方法，
如果没有显式定义，一个空的constructor方法会被默认添加。
6.生成类的实例对象的写法，与ES5完全一样，也是使用new命令。
如果忘记加上new，像函数那样调用class，将会报错
class的继承相关知识
- 子类继承父类 使用extends关键字
- 为父类指定静态方法，使用static方法名字
super
- 在构造函数中可以当一个函数来使用，相当于调用父类的构造函数
- 在原型方法中，可以当一个对象来使用，相当于父类的原型对象，并且
会自动绑定到this到子类上
Class的继承
子类继承父类 使用extends关键字
为父类指定静态方法，使用static方法名字
super
- 在构造函数中可以当一个函数来使用，相当于调用父类的构造函数
- 在原型方法中，可以当一个对象来使用，相当于父类的原型对象，并且
会自动绑定this到子类上
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const w = canvas.width = 600;
const y = canvas.height = 400;
class Ball {
constructor(x,y,r) {
this.x = x;
this.y = y;
this.r = r;
this.color = `rgb(${~~Ball.rpFn([55,255])},
${~~Ball.rpFn([55,255])},${~~Ball.rpFn([55,255])})`;//两个波浪线可以看作Math.floor()的偷懒写法
return this;
}
render(ctx){ //接收一个参数：绘图环境
ctx.save();
ctx.translate(this.x,this.y);
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(0,0,this.r,0,2*Math.PI);
ctx.fill();
ctx.restore();
return this;
}
//静态方法
static rpFn(arr) { //Ball.rpFn([1,10])
let max = Math.max(...arr),
min = Math.min(...arr);
return Math.random()*(max - min) + min;
}
}
//const ball = new Ball(100,100,30).render(ctx);
//什么都不写就代表子类完全的继承了父类，但这么写是没有意义的
//class SuperBall extends Ball {}
//继承
class SuperBall extends Ball {
constructor(x,y,r){
super(x,y,r);//super调用完毕就相当于子类已经继承了父类的所有属性
//在没调用super之前，子类是没有自己的this的
//纵向速度
this.vy = SuperBall.rpFn([2,4]);
//重力加速度
this.g = SuperBall.rpFn([0.2,0.4]);
this.a = 0;
return this;
}
//子类的原型方法
move(ctx){
//super(); //报错
this.y += this.vy
this.vy += this.g
let current = this.vy * -0.75
if(this.y+this.r >= ctx.canvas.height) {
this.y = ctx.canvas.height - this.r
if(Math.abs(current - this.a) < 0.01) return false;
//为了让这个小球反弹回去
this.a = this.vy *= -0.75
}
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
//这里的super指向的是父类的原型对象
super.render(ctx);
return true;
}
};
//const ball = new SuperBall(100,100,30).render(ctx);
let ball,timer;
canvas.onclick = function (e){
window.cancelAnimationFrame(timer)
let x = e.offsetX, y = e.offsetY;
let r = ~~Ball.rpFn([25,55]);
//为了点击画布只新建一个小球，绘制之前先清除一下画布
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
ball = new SuperBall(x,y,r).render(ctx);
ballMove();
}
function ballMove() {
timer = window.requestAnimationFrame(ballMove);
if(!ball.move(ctx)){
window.cancelAnimationFrame(timer)
}
}
以下是其他资料笔记
//基本定义和生成实例
class Parent {
constructor(name='mukewang'){
this.name = name;
}
}
let v_parent = new Parent('v');
console.log('构造函数和实例',v_parent)
继承
class Parent {
constructor(name='mukewang'){
this.name = name;
}
}
class Child extends Parent{
}
console.log('继承',new Child())
继承传递参数
class Parent {
constructor(name='mukewang'){
this.name = name;
}
}
class Child extends Parent{
constructor(name='child'){
//覆盖父函数的name
super(name);
//定义自己的属性，一定要放在super之后
this.type = 'child';
}
}
console.log('继承传递参数',new Child('hello'))
gettter setter
class Parent {
constructor(name='mukewang'){
this.name = name;
}
//下面是属性
get longName(){
return 'mk'+this.name
}
set longName(value) {
this.name = value;
}
}
let v = new Parent();
console.log('getter',v.longName);
v.longName='hello';//赋值就是setter操作
console.log('setter',v.longName)
静态方法
class Parent {
constructor(name='mukewang'){
this.name = name;
}
static tell(){
console.log('tell');
}
}
Parent.tell();
静态属性
class Parent {
constructor(name='mukewang'){
this.name = name;
}
static tell(){
console.log('tell');
}
}
Parent.type = 'test'
console.log('静态属性',Parent.type)
网友评论