目录
定义一个 Person 类
class Person{ constructor(name,age){ this.name = name; this.age = age; } showName(){ return `名字为: ${this.name}`; } showAge(){ return `年龄: ${this.age}`; } } let p1 = new Person('Strive', 18); console.log(p1.showName()); // 名字为: Strive
// Person 类也是一个函数
typeof(Person) === "function" // true
constructor 是类默认的方法，这个方法在 new 操作创建实例时自动执行，默认返回一个 this 对象。而 showName 和 showAge 函数是自定义的函数
类也可以写成一个表达式
const Preson = class{ constructor(arg){ // ... } }
取值函数 getter 和 存值函数 setter
class MyClass { constructor() { // ... } get prop() { return 'getter'; } // 取值 set prop(value) { console.log('setter: '+value); } // 存值 } let inst = new MyClass(); inst.prop = 123; // setter: 123 inst.prop // 'getter'
在属性前面有 get 和 set 关键字后，调用该属性时，自动调用隐藏函数 getter/setter，
静态方法
如果在一个方面前面加上 static 关键字，那就表示这个方法是类的 静态方法，静态方法不会被实例继承，而是通过类进行调用
class Person{ constructor(){ } fun1(){ return '这是fun1方法'; } static fun2(){ return '这是静态方法'; } } let p1 = new Person(); console.log(Person.fun2()); // "这是静态方法"
静态方法 和 非静态方法可以重名
静态方法可以继承给子类直接调用，也可以从 super 对象上调用
类的继承
使用关键字 extends。下面的定义了Person1 和 Person 2 两个类，其中 Person2 使用了关键字 extends 继承了 Person1 中的所有属性和方法
class Person1{ constructor(name, age){ this.name = name; this.age = age; } fun1(){ return 1; } } class Person2 extends Person1 { constructor(name, age, hobby){ super(naem, age); // 必须执行super 函数 this.hobby = hobby; } fun2(){ return 2; } }; let p2 = new Person2();
// 调用父类中继承来的方法
console.log(p2.fun1()); // 1
在子类的 constructor 中必须执行 super 函数，代表执行父类的构造函数。如果子类不写 constructor 函数，那么在 new 操作时自动执行 constructor 函数，并在里面执行 super 函数
super 函数只能用在子类的构造函数之中，用在其它地方就会报错
如果子类存在和父类一样的方法，实例调用的该方法时候会直接调用子类的方法，这种情况下想调用父类的方法可以使用 super 对象
// 这是子类中的 fun1 函数 fun1(){ let number = super.fun1(); // 执行 super 对象中的 fun1 函数 return number + 1; }
最后使用 Class 实现一个鼠标拖动的 demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽</title>
<style>
.div {
position: absolute;
top: 100px;
left: 100px;
80px;
height: 80px;
border-radius: 50%;
background: green;
text-align: center;
line-height: 80px;
color: #fff;
}
</style>
</head>
<body>
<div class="div">拖拽</div>
<script>
class Drag {
constructor(id) {
this.oDiv = document.getElementsByClassName(id)[0];
this.disX = 0;
this.disY = 0;
this.init();
}
init() {
this.oDiv.onmousedown = function (ev) {
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
this.oDiv.style.border = '2px solid red';
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
return false;
}.bind(this);
}
fnMove(ev) {
this.oDiv.style.left = ev.clientX - this.disX + 'px';
this.oDiv.style.top = ev.clientY - this.disY + 'px';
}
fnUp() {
document.onmousemove = null;
document.onmouseup = null;
this.oDiv.style.border = '';
}
}
//调用
new Drag('div');
</script>
</body>
</html>