前端面试常见手写题

1. 清除浮动 （写在有浮动的元素容器上去除浮动影响，就不用在后面元素上写clear:both;）

.clearfix:after{
  content:'';
  display:table;
  clear:both;
}

2. 手写深拷贝(考察数据类型)

function deepClone (obj = {} ){
	// Obj是null或者非Object类型的话直接返回
	if(obj == null || typeof obj !== 'object'){
		return obj
	}
	// 初始化要返回的结果
	let result
	if(obj instanceof Array){
		result = []
	}else{
		result = {}
	}
	// 循环给初始结果赋值，遇到深层对象
	for(let key in obj){
		// 保证key不是原型的属性
		if(key.hasOwnProperty(key)){
			// 递归
			result[key] = deepClone(obj[key]) 
		}
	}
	// 返回结果
	return result
}

3. 手写jQuery（考察原型原型链）

class jQuery {
	constructor(select){
		const result = document.querySelectorAll(selector)
		const length = result.length
		for(let i = 0; i<length; i++){
			this[i] = rusult[i]
		}
		this.length = length
	}
	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)
		})
	}
}

// 考虑扩展性
// 插件
jQuery.prptotype.dialog = function (info){
	alert(info)
}
// 执行
const $p = new jQuery('p')
$p.dialog()

// 复写（造轮子）
class myJQuery extends jQuery {
	construtor(selector){
		super(selector)
	}
	// 扩展自己的方法
	addClass(className) {
	
	}
	style(data){
	
	}
}

4. 手写bind函数（考察作用域和闭包，必包其实就是作用与的特殊情况，归根结底还是作用域）

Function.prototype.bind1 = function () {
	// 将参数解析伪数组
	const args = Array.prototype.slice.call(arguments)
	// 获取this (取出数组第一项，数组剩余的就是传递的参数)
	const t = args.shift()
	const self = this // 当前调用函数
	// 返回一个函数
	return function () {
		// 执行原函数，并返回结果
		return self.apply(t,args)
	}
}

// 使用,第一个参数是this，后面为参数
fn.bind1({x:100},10,20)

5. 创建10个标签，点击的时候弹出对应的序号（考察作用域）

let a // 注意i不能在此时声明，否则就是全局作用域，每次点开都是10
for(let i=0; i<10; i++){
	a = document.createElement('a')
	a.innerHTML = i + '<br>'
	a.addEventListener('click',function(e){
		e.preventDefault()
		alert(i)
	})
	document.body.appendChild(a)
}

6. 手写用promise加载一张图片（考察异步promise）

function loadImg(src) {
	const p = new Promise(
		(resolve, reject) =>{
			const img - document.createElement('img')
			img.onload = () => {
				resolve(img)
			}
			img.onerror = () => {
				const err = new Error(`图片加载失败 ${src}`)
				reject(err)
			}
			img.sec = src
		}
	)
	return p
}

// 使用
loadImg(url1).then(img1 => {
	console.log(img1.width)
	return img1
}).then(img1 =>{
	console.log(img1.height)
	return loadImg(url2) // promise示例
})