导读：
- 以前ES5的时候也有构造函数和继承这一说法，但是实现起来又要借助原型又要改this指向，就会显得很麻烦，而ES6出来了这个主流的类这么个概念，几乎就跟Java里面的类与继承实现一模一样，看代码。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// ES5的构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function() {
return `名字是： ${this.name}`;
}
Person.prototype.showAge = function() {
return `年龄是： ${this.age}`;
}
// ES6语法模拟
/*Object.assign(Person.prototype, {
showName() {
return `名字是： ${this.name}`
},
showAge() {
return `年龄是： ${this.age}`
}
})*/
let p1 = new Person('Verin', 18);
console.log(p1.showName());
// ES6的类（构造函数）
class Person {
constructor(name, age) {
// 构造函数，用法同java的构造函数就行了
this.name = name;
this.age = age;
}
showName() {
return `名字是： ${this.name}`
}
showAge() {
return `年龄是： ${this.age}`
}
}
let p1 = new Person('Verin', 18);
console.log(p1.showName(), p1.showAge())
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// ES5继承
function Person(name) {
this.name = name
}
Person.prototype.showName = function() {
return `我的名字是： ${this.name}`;
}
function Student(name, skill) {
Person.call(this, name) // 继承属性
this.skill = skill;
}
Student.prototype = new Person();
let s1 = new Student('Verin', '逃学');
console.log(s1.name, s1.skill); // Verin, 逃学
// ES6继承
class Person2 {
constructor(name) {
this.name = name
}
showName() {
return `我的名字是： ${this.name}`;
}
}
class Student2 extends Person2 {
constructor(name, skill) {
super(name);
this.skill = skill;
}
showSkill() {
return `哥们的技能是： ${this.skill}`
}
}
let s2 = new Student2('Verin', '逃学');
console.log(s2.name, s2.showSkill()); // Verin, 哥们的技能是： 逃学
</script>
</body>
</html>
- 子类可以在继承父类的所有属性方法外，新增自己的属性方法，若要在已有方法上新增功能，则需先执行
super() || super.方法()后再写入自己定义的功能，如下简单实现拖拽，子类新增限制拖拽范围功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class="box left">box1</div>
<div class="box right">box2</div>
<script type="text/javascript">
class Drag {
constructor(id) {
this.oDiv = document.querySelector(id);
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;
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;
}
}
// 子类 —— 限制距离
class LimitDrag extends Drag {
fnMove(ev) {
super.fnMove(ev);
// 限制范围
if(this.oDiv.offsetLeft <= 0) this.oDiv.style.left = 0;
}
}
new Drag('.left');
new LimitDrag('.right');
</script>
</body>
</html>
总结：
- 如果有Java或者其他主流编程语言的基础，一般都知道类与继承，这里理解就会很容易，否则需多花时间弄明白，这个是很重要的！
网友评论