- 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");