js基础复习2,class和原型

定义一个class

// 定义class
class Student{
	constructor(name,number){
		// this指向当前构建的实例
		this.name=name
		this.number=number
		// this.gender='male'
	}
	sayHi(){
		// 在方法中可以使用this.获取某些属性
		console.log(
			`姓名 ${this.name},学号${this.number}`
		)
		// console.log(
		// 	'姓名'+this.name+',学号' + this.number
		// )
	}
}
继承:


// 通过类 new对象/实例
const dd=new Student('东东',100)
// console.log(ycd.name)
// console.log(ycd.number)
dd.sayHi();

继承父类class

// 父类
class People{
	constructor(name){
		this.name=name
	}
	eat(){
		console.log(`${this.name} eat something`)
	}
}
// 子类
class Student extends People{
	constructor(name,number){
		super(name);
		this.number=number
	}
	sayHi(){
		console.log(`姓名:${this.name},学号${this.number}`)
	}
}
// 子类
class Teacher extends People{
	constructor(name,marjor){
		super(name)
		this.marjor=marjor
	}
	teach(){
		console.log(`${this.name} 教授 ${this.marjor}`)
	}
}
const dd=new Student('东东',100);

const Wanglaoshi=new Teacher('王老师','语文')

dd.sayHi();
Wanglaoshi.teach();


// 类型判断 - instanceof
// instanceof 可以判断是否是引用类型

console.log(dd instanceof Student);  //true  这个实例Student不继承于object而是先继承的people
console.log(dd instanceof People);	 //true
console.log(dd instanceof Object); //true,object可以认为是任何一个class的父类
console.log(Wanglaoshi instanceof Student) //false
//[] instanceof Array  true
//[] instanceof Object true
//{} instanceof Object true

//class实际上是函数，可见是语法糖
console.log(typeof People) // 'function'
console.log(typeof Student) // 'funciton'

// 隐式原型：
console.log(dd.__proto__)
// 显示原型：
console.log(Student.prototype)
// 引用通同一个内存地址:
console.log(dd.__proto__ === Student.prototype);

// 总结：
// 1.每个class都有显示原型prototype
// 2.每个实例都有隐式原型__proto__
// 3.实例的__proto__指向对应class的prototype


// 基于原型的执行规则

// 获取属性dd.name或者执行方法dd.sayHi()时，
// 1.现在自身属性和方法中寻找
// 2.找不到就自动去隐式原型(__proto__)上查找

案例：实现一个简单jquery

class jQuery{
	constructor(selector){
		const result = document.querySelectorAll(selector)
		const length=result.length
		for(let i=0;i<length;i++){
			this[i]=result[i]
		}
		this.length=length;
		this.selector=selector;
		// 类数组形式，其实是个对象
	}
	get(index){
		return this[index]
	}
	each(fn){
		for(let i=0;i<this.length;i++){
			const elem=this[i]
			fn(elem)
		}
	}
	on(type,fn){
		return this.each(elem=>{
			elem.addEventListener(type,fn,false)
		})
	}
	//扩展其他api
}

//插件机制,直接往原型里添加方法
jQuery.prototype.dialog=function(info){
	alert(info);
}

// 复写机制(造轮子，继承)
class myJQuery extends jQuery {
	constructor(selector){
		// 继承父类的属性：
		super(selector)
	}
	//扩展自己方法...
	addClass(className){

	}
	style(data){

	}
}

调用方法：

<script src="./easy-jquery.js"></script>
<script>
	const $p=new jQuery('p');
	console.log($p)

	console.log($p.get(1));

	$p.each((elem)=>{
		console.log(elem)
	});

	$p.on('click',()=>{
		alert('clicked')
	});


	$p.dialog('调用插件方法');
</script>