【备战春招】第二天 前端学习笔记

课程信息

课程名称：一天时间高效准备前端技术一面 匹配大厂面试要求
章节名称：第5章 JS基础-原型和原型链
讲师：双越

课程描述

主要包括3个知识点

• class 和继承
• 类型判断 Instanceof
• 原型和原型链

收获

class 实现继承

• 在constructor 添加属性
• 在子类的constructor里利用 super() 继承父类的属性
• 子类继承父类的方法，可直接调用

隐式原型和显式原型

• 每个class都有显式原型 prototype
• 每个实例都有隐式原型 proto
• 实例的__proto__指向原型的prototype
• Object的隐式原型为 null
• instanceof 是基于原型链实现的
• hasOwnProperty 判断是不是当前对象的属性和方法

手写简易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)
		})
	}
}

// 扩展DOM API
// 插件
jQuery.prototype.dialog = function (info) {
	...
}

//“造轮子”
class myJQuery extends jQuery {
	constructor(selector) {
		super(selector)
		...
	}
}