JavaScript面向对象
为什么JavaScript面向对象，因为我最近在写前端，基于canvas写一套控件。
既然是控件那就要封装起来，内部完成渲染，事件处理等功能。
- 类的声明
- 对象创建
- 继承
- 多态
类的声明
废话不多说，直接上代码
export default class View {
/*构造方法*/
constructor(ctx) {
this.ctx = ctx;
}
/*属性*/
width = -1;
height = -1;
/*方法*/
onDraw(canvas) {
console.log('绘制...');
}
setWidth(width) {
this.width = width;
}
setHeight(height) {
this.height = height;
}
getWidth() {
return this.width;
}
getHeight() {
return this.height;
}
}
写到这里，突然有一个想法，把android的那套View写到前端上。
以上是ES6的声明
在ES5中，我们通过构造函数的方式去声明，比如说：
export default function View(ctx) {
this.ctx = ctx;
this.width = -1;
this.height = -1;
this.getHeight = () => {
return this.height;
};
this.getWidth = () => {
return this.width;
};
this.setWidth = (width) => {
this.width = width;
};
this.setHeight = (height) => {
this.height = height;
};
this.onDraw = (canvas) => {
console.log('绘制...');
}
}
但是这种方式声明内部函数，会浪费内存，可以换成原型(prototype)对象的方式来声明函数
export default function View(ctx) {
this.ctx = ctx;
this.width = -1;
this.height = -1;
}
View.prototype.getWidth = () => {
return this.width
};
View.prototype.getHeight = () => {
return this.height
};
View.prototype.setWidth = (width) => {
this.width = width;
};
View.prototype.setHeight = (height) => {
this.height = height;
};
View.prototype.onDraw = (canvas) => {
console.log('绘制...');
};
对象创建
跟java差不多，毕竟叫javascript
let view = new View(this.ctx);
console.log(view);
这样子就有对象了
继承
子类如何继承父类呢？
import View from "./View";
export default class ViewGroup extends View {
layout(l, t, r, b) {
console.log('摆放孩子...');
}
}
我写了一个ViewGroup，继承自View
创建对象：
let viewGroup = new ViewGroup(this.ctx);
viewGroup.onDraw(this.canvas);
然后调用了你类的onDraw方法，当然也可以使用父类的属性
你有java基础的话，一看就懂了，就是这么简单。
调用父类的构造方法
这个熟悉不过了吧，在java是不是用super来调用呀
在javascript里也是这么玩的。
比如说：
import View from "./View";
export default class ViewGroup extends View {
constructor(ctx) {
super(ctx);
}
layout(l, t, r, b) {
console.log('摆放孩子...');
}
}
使用父类的属性
也是很简单的，java怎么用，javascript一样的
比如说：
import View from "./View";
export default class ViewGroup extends View {
constructor(ctx) {
super(ctx);
}
layout(l, t, r, b) {
console.log(super.width);
console.log('摆放孩子...');
}
}
以上是ES6的写法，在ES5里是通过构造函数和原型对象进行模拟继承的关系的，俗称组合继承。
call方法，类似于java里的反射,invoke
语法：
function.call(thisArgs,args...);
以前面的例子，组合继承：
import View from "./View";
export default function ViewGroup(ctx, name) {
View.call(this, ctx);
this.name = name;
}
ViewGroup.prototype.layout = (l, t, r, b) => {
console.log('摆放孩子...');
};
这样子，调用父类的构造了，并且替换了父类的this，为当前的View的this.
但是方法怎么继承呢？
export default function ViewGroup(ctx, name) {
//方法继承,这样就可以调用View里的方法了
ViewGroup.prototype = new View(ctx);
ViewGroup.prototype.constructor = ViewGroup;
this.name = name;
}
ViewGroup.prototype.layout = (l, t, r, b) => {
console.log('摆放孩子...');
};
我们可以通过原型链的控制，也就是指向父类，这样子就可以掉调用父类中的方法了。
多态
多态给我的感觉就是在javascript中，这语言太弱了，你调用就行，要么有，要么没有。因为没有类型限制呀。
所以，你传入的类中，只要有一样的方法，就可以调用，这不就可以多态了？
比如说：
狗
export default class Dog {
hello() {
console.log('狗：汪汪');
}
}
人类
export default class Human {
hello() {
console.log('人：你好');
}
}
麦克风
export default class Mic {
voice(animal) {
animal.hello();
}
}
调用
let human = new Human();
let dog = new Dog();
let mic = new Mic();
mic.voice(dog);
mic.voice(human);
没有什么类型限制，所以你传进去任意的对象，有这个方法就调用，没有就报错，就是酱紫。
