ES6笔记（类class）

1、ES6的类是一种语法糖,本质还是基于原型
基本格式:
class 类名{
constructor(){
}
方法1...
方法2...
...
方法n...
}

1，类的类型是 function
2，类名就是构造函数类名 === 类名.prototype.constructor
3, 实例化也是用 new 类名()
4，类的所有方法都是扩展在类名.prototype上
5, 实例的constructor === 类名.prototype.constructor
6，可以用 Object.assign( 类名.prototype, {
方法1...
方法2...
...
方法n....
} ) 为类扩展方法
7，类的内部所有方法都是不可枚举的
Object.keys( 类名.prototype );
而es5都是可枚举的
8，类的属性名可以用计算表达式
9，constructor方法是类的默认方法，通过new命令生成对象自动调用该方法，一个类
必须有constructor方法，如果没有显示定义，一个空的constructor方法会被默认添加
默认返回值为类的实例(即this)，可以用return显示返回其他对象

10，实例化需要用new，否则报错

//es5面向对象
function CreateObj(uName,uAge){
	this.useName=uName;
	this.useAge=uAge;
}
CreateObj.prototype.showInfo=function(){
	return this.useName
}
var obj=new CreateObj('aaa',20)
console.log(obj.showInfo);

----------------------------------------------------------

//es6面向对象
let age="bbb"
class CreateObj{
	constructor(uName,uAge){
		this.useName=uName;
	    this.useAge=uAge;
	}
	//方法   ，这个方法是加在CreateObj的原型对象prototype上
	showInfo(){
		return this.useName
	}
	//添加方法：（类的属性名、方法计算表达式）
	[age](){
		return this.useAge
	}
}

//通过assign扩展方法
Object.assign(CreateObj.prototype,{
	showAge(){
		return this.useAge
	}
})

var obj=new CreateObj('aaa',20)
console.log(obj.showInfo()); //'aaa'
console.log(obj.showAge()); // 20

console.log(Object.keys(CreateObj.prototype));//类里面的属性或者方法都是不可枚举的，而assign扩展的可以出来
console.log(CreateObj.prototype);
console.log(typeof CreateObj);//类型是函数function
console.log(CreateObj === CreateObj.prototype.constructor);//类名是不是等于他原型对象的constructor的指向

2、新类语法 --》选项卡

<div></div>
<div></div>
<div></div>
<div></div>


class Bg{
	constructor(selector="div"){
		this.ele=document.querySelectorAll(selector);
	}
	setBgColor(){
		this.ele.forEach((cur,i)=>{
			if(i%2 == 0){
				cur.className="even";
			}else{
				cur.className="odd"
			}
		})
	}
	hover(){
		this.ele.forEach((cur)=>{
			cur.onmouseover=this.fnOver;
			cur.onmouseout=this.fnOut;
		})
	}
	fnOver(){
		this.classList.add('active')
	}
	fnOut(){
		this.classList.remove('active')
	}
}
var oBg=new Bg();
oBg.setBgColor();
oBg.hover();

3、新类语法 --》全选、不选、返选

<input type="button" value="全选"> 
<input type="button" value="不选"> 
<input type="button" value="反选"> 
<div id="box">
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
</div>



class Check {
 	constructor(){	
 		this.Btns = document.querySelectorAll( "input[type='button']" );
 		this.aCheck = document.querySelectorAll( "#box>input" );
 	}
 	bind(){
 		//按钮点击的时候，this指向按钮，按钮上没有aCheck，只有check对象上才有
 		this.Btns[0].onclick = this.checkAll.bind( this );
 		this.Btns[1].onclick = this.unCheckAll.bind( this );
 		this.Btns[2].onclick = this.reverseCheckAll.bind( this );		
		
// 		var that=this; //第二种改变this指向方法
// 		this.Btns[0].onclick= function(){
// 			that.checkAll(that)  
// 		}		
 	}
 	checkAll(){
 		this.aCheck.forEach((cur)=>{
 			cur.checked=true;
 		})
 	}
 	unCheckAll(){
 		this.aCheck.forEach((cur)=>{
 			cur.checked=false;
 		})
 	}
 	reverseCheckAll(){
 		this.aCheck.forEach((cur)=>{
 			cur.checked=!cur.checked;
 		})
 	}
 }
 var oCheck=new Check();
 oCheck.bind();

4、新类语法 --》选项卡

<style>
	div{
		width: 200px;
		height: 200px;
		background: #eee;
		display: none;
	}
	.active{
		background: yellow;
	}
</style>

<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />
<input type="button" value="按钮4" />
<div style="display: block;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>

class Tab{
	constructor(){
		this.aBtn=document.querySelectorAll("input");
		this.aDiv=document.querySelectorAll("div");
	}
	bind(){
		var that=this;
		this.aBtn.forEach((cur,index)=>{
			//cur.index=index
			cur.onclick=function(){
				//that.switchTab(this);
				that.switchTab(this,index);//this指的是当前点击的按钮            
			}
		})
	}
	switchTab(oBtn,index){
		this.aDiv.forEach((cur,i)=>{
			cur.style.display='none';
			this.aBtn[i].className=""
		});
		oBtn.className="active";
		//this.aDiv[oBtn.index].style.display="block"
		this.aDiv[index].style.display="block"
	}
}
var oTab=new Tab();
oTab.bind();

5、新类语法 --》时钟

<span>1</span>
<span>1</span>
<em>:</em>
<span>1</span>
<span>1</span>
<em>:</em>
<span>1</span>
<span>1</span>

class Tick{
   constructor(){
   	this.aSpan=document.querySelectorAll("span")
   }
   toDouble(n){
   	return (n<10)?('0'+n):(''+n);
   }
   //获取时间
   getCurTime(){
   	 var oDate=new Date(),
   	     hour=oDate.getHours(),
   	     min=oDate.getMinutes(),
   	     sec=oDate.getSeconds();
   	 return this.toDouble(hour)+this.toDouble(min)+this.toDouble(sec);
   }
   setTime(){
   	//获取当前的系统时间
   	let cTime=this.getCurTime();
   	this.aSpan.forEach((cur,i)=>{
   		//把系统时间一个个放到span里面
   		cur.innerHTML=cTime.charAt(i)
   	})
   }
   //让时间跑起来
   tick(){
   	setInterval(this.setTime.bind(this),1000) //setInterval的this指向window,用bind改变this指向
   }
}
oTick=new Tick();
oTick.setTime();
oTick.tick();

6、类的继承
super指代了整个prototype或者proto指向的对象
super([arguments]); // 访问父对象上的构造函数

super.functionOnParent([arguments]); // 访问父对象上的方法

//继承
function Animal(){
    this.eat=function(){
        console.log('animal eat')
    }
}
function Dog(){
    this.bark=function(){
        console.log('dog dark')
    }
}
Dog.prototype=new Animal()
//哈士奇
var hashiqi=new Dog()
console.log(hashiqi)

//class继承
class Animal{
    constructor(name){
        this.name=name
    }
    eat(){
        console.log(`${this.name} eat`)
    }
}

class Dog extends Animal{//Dog 继承 Aminal
    constructor(name){ 
        super(name)  //Animal的constructor
        this.name=name
    }
    say(){
        console.log(`${this.name} say`)
    }
}

const dog=new Dog('哈士奇')
dog.say()
dog.eat()

ES6笔记（类class）

猜你喜欢