<!DOCTYPE html>
<html>
<head>
<title>ES6类</title>
<script type="text/javascript">
//传统的类
function Person(name='jack',age=18){
this.name = name;
this.age = age;
}
// Person.prototype.show=function(){
// return `名字为:${this.name} 年龄为：${this.age}`;
// }
//一种高级写法
Object.assign(Person.prototype,{
show(){
return `名字为:${this.name} 年龄为：${this.age}`;
}
})
let p1 = new Person();
console.log(p1.show());
//ES6形式
// class Student {
// constructor(name='jack',age=18){
// this.name=name;
// this.age=age;;
// console.log('Student构造方法执行了');
// } //对象中有,而类里面没有,如果有,会报错
// show(){ //ES6类里定义方法就这样定义，不要用function
// return `名字为:${this.name} 年龄为：${this.age}`;
// }
// }
//ES6另一种形式
const Student = class{
constructor(name='jack',age=18){
this.name=name;
this.age=age;;
console.log('Student构造方法执行了');
} //对象中有,而类里面没有,如果有,会报错
show(){ //ES6类里定义方法就这样定义，不要用function
return `名字为:${this.name} 年龄为：${this.age}`;
}
}
let s1=new Student('张三',20);
console.log(s1.show());
//ES6类中的属性和方法名可以用变量表示 对象内一样
let aaa='test';
let bbb='method';
class Man{
constructor(name='jack',age=18){
this.name=name;
this.age=age;;
console.log('Man构造方法执行了');
} //对象中有,而类里面没有,如果有,会报错
[aaa+bbb](){ //ES6类里定义方法就这样定义，不要用function
return `名字为:${this.name} 年龄为：${this.age}`;
}
}
let m1=new Man('张三',20);
// console.log(m1.testmethod());//成功输出 名字为:张三 年龄为：20
console.log(m1[aaa+bbb]());//成功输出 名字为:张三 年龄为：20
//json对象内一样
// 例子：
let json ={
[aaa+bbb]:[aaa,bbb],//别学迷了 属性用变量的话用[] 而值本来就可以直接用变了，而加了[]则为放在数组里了
[aaa]:true,
[bbb]:false,
}
console.log(json);//{testmethod: Array[1], test: true, method: false} 其中Array为：[test,method]
// ============================================================================================
// 1
//注意:js中function是有预解析的功能， 默认函数提升
// let t1 = new Test();
// console.log(t1);
// function Test(name){
// this.name=name ||'jack——fun';
// }
//但是ES6中的类是没有预解析的功能的 没有提升功能
class Test{
constructor(name='jack——ES6'){
this.name=name;
}
}
let t1 = new Test();
console.log(t1);
// 2
// 在类里this要不function中好用很多，
// 如果扣细节，也会发现一些小问题，不过也有解决办法
// 首先介绍ES5中this的几个知识点
// 矫正this:
// (1)fn.call(this指向谁,args1,args2...)
// (2)fn.apply(this指向谁,[args1,args2...])
// (3)fn.bind()
// 例子：
class Dog{
constructor(){
this.name='redDog';
this.showName=this.showName.bind(this);//如果没有这个会showName中会报错原因是解构后找不到this.name
}
showName(){
console.log('this:',this);
return `名字为：${this.name}`;
}
}
let dog = new Dog();
let {showName} = dog;
console.log(showName());
// ============================================================================================
// 类的get和set
class Cat {
constructor(name='defaultCat'){
this.name=name;
}
//虽然是方法，但是get和set方法调用时依然是用属性调用，
// 只能说是这个方法有监控变量的作用
//既然依然是属性，就不能与name 重复
//这里的写法相当于在myname这个属性的监视放在中调用了name这个属性
//相当于myname用的是name的值
get myname(){
return this.name;
}
set myname(val){
this.name=val;
}
}
let cat = new Cat();
cat.myname='RedCat';
console.log(cat.myname);
// ============================================================================================
// 类的静态方法
//静态的东西可以被继承 //同事复习了java内的静态属性和方法也可以继承
class Util {
static getStr(){
return '静态方法返回的字符串'
}
}
console.log(Util.getStr());
// ============================================================================================
//类的继承 //跟多数编程语言的格式类似
// class Person{
// constructor(name='person'){
// this.name=name;
// }
// showName(){
// return `我的名字为：${this.name}`;
// }
// }
// class Student extends Person{
// constructor(name='student',age=18){
// super(name);
// this.age=age;
// }
// }
</script>
<style type="text/css">
.mydiv{
background-color: red;
position: absolute;;
100px;
height: 100px;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
</style>
</head>
<body>
<div id="div1" class="mydiv left">拖拽div</div>
<div id="div2" class="mydiv right">加了限制的拖拽div</div>
</body>
</html>
<script type="text/javascript">
// ============================================================================================
//运用类写一个拖拽
class Drag{
constructor(id){
this.oDiv=document.querySelector(id);
this.disX=0;
this.disY=0;
this.oDiv.onmousedown=this.onDown.bind(this);
}
onDown(ev){
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
console.log('onmousedown被执行',this.disX,this.disY);
document.onmousemove=this.onMove.bind(this);
document.onmouseup=this.onUp.bind(this);
}
onMove(ev){
this.oDiv.style.left = (ev.clientX - this.disX)+'px';
//注意后面加px否则不会有效果的
this.oDiv.style.top = (ev.clientY - this.disY)+'px';
}
onUp(ev){
console.log('onmouseup被执行');
document.onmousemove=null;
document.onmouseup=null;//因为每次只有在div上点击了之后
// 会重现绑定document.onmouseup,所以先在这里释放掉
}
//拖拉时由于 浏览器执行代码需要一点时间，如果鼠标一点的太空，this.oDiv是跟不上的
//鼠标会脱离div，所以应该当在div点击后就监听document的移动
}
new Drag("#div1");
class LimitDrag extends Drag{
constructor(id){
super(id);
}
onMove(ev){ //注意后面加px否则不会有效果的
this.oDiv.style.left = (ev.clientX - this.disX)<0?0:(ev.clientX - this.disX)+'px';
this.oDiv.style.top = (ev.clientY - this.disY)<0?0:(ev.clientY - this.disY)+'px';
// let temDisW=ev.clientX - this.disX;
// let temDisH=ev.clientY - this.disY;
// console.log(window.innerWidth,window.innerHeight);
// if (temDisW<0) {
// this.oDiv.style.left = '0px';
// }else if (temDisW>window.innerWidth) {
// this.oDiv.style.left = window.innerWidth-this.disX+'px';
// }else this.oDiv.style.left = temDisW+'px';
// if (temDisH<0) {
// this.oDiv.style.top = '0px';
// }else if (temDisH>window.innerHeight) {
// this.oDiv.style.top = window.innerHeight-this.disY+'px';
// }else this.oDiv.style.top = temDisH+'px';
}
}
new LimitDrag("#div2");
</script>