ecma6学习知识点(十)类和继承

最新推荐文章于 2024-03-08 00:15:00 发布

原创最新推荐文章于 2024-03-08 00:15:00 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了ES6中类的定义方法及其实例化过程，包括构造函数、成员方法、getter/setter等特性，并详细讲解了类的继承方式及其应用案例。

es6之前写一个类是这样写的
如下代码

function Person(name,age) {
	this.name = name;
	this.age = age;
}
Person.prototype.showName = function(){
	return `名字为${this.name}`;
}

let p1 = new Person("yangrui",18);
console.log(p1.showName());

2.在es6中可以这样写

class Person{
	constructor(name,age) { //只要用了new 就能执行构造函数
		this.name = name;
		this.age = age;
		console.log(`构造函数执行了，${name},${age}`);
	}
	showName() {
		console.log(this.name);
}
}
let p1 = new Person（"strive",18）

也可以这样写：
let Person = class{
	constructor(name,age) { //只要用了new 就能执行构造函数
		this.name = name;
		this.age = age;
		console.log(`构造函数执行了，${name},${age}`);
	}
	showName() {
		console.log(this.name);
}
}
let p1 = new Person（"strive",18）

还可以 这样给函数明明
如
let aaa = “test”
let bbb = "judge"
则可以在构造函数中这样写
[aaa] () {
	return "测试一下"
}
则调用的时候要这样调用
console.log(p1.test()) 或
console.log（p1[aaa]()）;
也可以console.log（p1[aaa+bbb]()）
或console.log(p1.testjudge())

在es6中class没有提升 import和函数都有提升。
矫正this的方式
1.fn.call(this指向谁，args1，args2…)
2.fn.apply(this指向谁，[args1,args2…])
3.fn.bind();

3.class中的取值函数getter和赋值函数setter

class Person{
	constructor(){
	}
	get aaa() {
		return "sdfdsfdsf"
	}
	set aaa(val) {
		conosole.log(val)
	}
	static test() { //这是类的静态方法可以通过 Person直接调用。
		console.log("zhefhdsfd")
	}
}
let p1 = new Person();
p1.aaa="dsfdsfd";
console.log(p1.aaa);

4.类的继承
之前的写法：

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 stu1 = new Student("strive", "逃学")；
console.log(stu1.showName());

在es6中可以这样写来继承

class Person {
	constructor(name) {
		this.name = name;
	}
	showName(){
		console.log("这是父类的showname")		
		return this.name
	}
}
class Student extends Person {
	constructor(name,skill) {
		super(name);
		this.skill = skill
	}
	showName(){ //重写父类的方法
		//为了保证父类的方法不被覆盖可以使用		super.showName();来执行父类的方法
		*console.log("这是子类的showname")*		
	}
	showSkill() {
		return this.skill
	}
}
let stu1 = new Student("Strive","逃学");
console.log(stu1.showSkill());

5.下面这是一个小小的例子，一个拖拽的插件
html部分代码

<div id="div1" class="box left" > div1</div>
<div id="div2" class="box right" > div2</div>

css部分代码

.box {
	width : 100px;
	height: 100px;
	background: red;
	position:absolute;
	top:0;
}
.left {
	left:0;
}
.right{
	right:0;
}

js代码

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.clentY - 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("#div1");
new LimitDrag("#div2");