前言
手写其实在前端的面试过程中必不可少，因为手写是考验你了解某一原理的最可观的体现。下面我汇总了一些，我在面试复习过程中遇到的手写题。我将实现思路写出来与大家共享，而实现只是一个参考，有兴趣的可以点击参考答案，有问题请指正。
原理实现
实现一个new操作符
首先我们需要了解new操作符干了哪些事情
- new操作符返回的是一个对象。
- 对象的原型，指向的是构造函数的原型
- 如果构造函数有return的话，需要对return的进行判断，如果是对象，那么用函数return的，如果不是对象，那么直接返回新创建的对象
参考答案
function myNew(fn, ...args) {
let obj = Object.create(fn.prototype);
let res = fn.apply(obj, args);
return res instanceof Object ? res : obj;
}
实现一个instanceof操作符
首先我们需要知道instanceof是通过原型链来进行判断的
参考答案
instanceof操作符是判断原型链来生效的，所以只要你将左边的_proto_和右边的prototype做对比
function myInstance(left, right) {
// 当left是基础类型的时候直接返回false
if(typeof left !== 'object' || left === null) return false;
let proto = Object.getPrototypeOf(left);
while(true) {
if(proto === null) return false;
if(proto === right.prototype) return true;
proto = Object.getPrototypeOf(proto);
}
}
实现一个apply
实现apply主要是要注意以下几个方面：
1、参数不能取第一个，因为第一个是上下文。
2、赋值到对象上的方法需要进行删除，不能影响原对象。
3、对于上下文为undefined的情况需要把上下文指向window对象
参考答案
Function.prototype.myApply = function(context, [...args]) {
// 先判断context是否为空，如果为空则指向window对象
context = context || window;
context.fn = this;
context.fn(...args);
delete context.fn;
}
实现一个call
call的实现和apply的实现类似，但是参数处理层面会略有不同。
参考答案
Function.prototype.myCall = function(context) {
// 先判断context是否为空，如果为空则指向window对象
context = context || window;
let args = [...arguments].slice(1);
context.fn = this;
context.fn(args);
delete context.fn;
}
实现一个bind
bind的实现需要注意的是函数柯里化的情况。
参考答案
Function.prototype.myBind = function(context) {
const self = this;
let args = [...arguments].slice(1);
return function() {
// 考虑函数柯里化的情况
let newArgs = [...arguments];
this.apply(context, newArgs.concat(args))
}
}
实现一个promise
promise的实现有必要着重看一下，我自己划分几个步骤来看：
1、先处理同步的逻辑，比如状态值变化之后，将不在发生改变，以及有哪些属性值等。
2、再处理异步逻辑，用回调的形式，以及存放的列表。
3、再处理链式调用的逻辑，链式调用比较复杂，多注意thenable的对象。
4、在处理promise的其他方法。
最后我在这里给大家推荐一篇文章，写的很不错！！promise文章
参考答案
class Promise(exector) {
constructor() {
this.value = undefined;
this.reason = '';
this.state = 'pending';
this.onResolveList = [];
this.onRejectList = [];
const resolve = (value) => {
if(this.state === 'fulfilled') {
this.value = value
this.state = 'fulfilled';
this.onResolveList.forEach((fn) => {
fn();
})
}
};
const reject = (reason) => {
if(this.state === 'rejected') {
this.reason = reason
this.state = 'rejected';
this.onRejectList.forEach((fn) => {
fn();
})
}
}
try {
exector(resolve, reject);
} catch(err) {
reject(err)
}
}
then(onFulfilled, onRejected) {
const promise2 = new Promise((reslove, reject) => {
if(this.state === 'fulfilled') {
let x = onFulfilled(this.value);
resolvePromise(promise2, x, reslove, reject);
}
if(this.state === 'rejected') {
onRejected(this.reason);
resolvePromise(promise2, x, reslove, reject);
}
if(this.state === 'pending') {
onResolveList.push(() => {
let x = onFulfilled(this.value);
resolvePromise(promise2, x, reslove, reject);
});
onRejectList.push(() => {
let x = onRejected(this.reason);
resolvePromise(promise2, x, reslove, reject);
});
}
});
return promise2;
}
race(promises) {
return new Promise((resolve, reject) => {
for(let i = 0; i < promises.length; i++) {
promises[i].then(resolve, reject);
}
})
}
all(promises) {
let arr = [];
let i = 0;
function processData(index, data) {
arr[index] = data;
i++;
if(i === promises.length) {
resolve(data);
}
}
return new Promise((resolve, reject) => {
for(let i = 0; i < promises.length; i++) {
promises[i].then((val) => {
processData(i, val);
}, reject)
}
})
}
resolve(val) {
return new Promise((resovle, reject) => {
resovle(val);
})
}
reject(val) {
return new Promise((resovle, reject) => {
reject(val);
})
}
}
// 这边要处理的情况有以下几种：1、循环引用， 2、thenable对象，3、promise对象
resolvePromise(promise2, x, reslove, reject) {
if(promise2 === x) {
reject('循环引用');
return;
}
// 防止多次调用
let called;
// 检测x的值的类型，如果不是对象或者函数，直接返回resolve
if(x !== null && (typeof x === 'object' || typeof x === 'function')) {
// 规范中then逻辑报错也会进入catch
try {
if(called) return;
let then = x.then;
if(typeof then === 'function') {
then.call(x, (y) => {
if(called) return;
called = true;
resolvePromise(promise2, y ,reslove, reject)
}, (err) => {
if(called) return;
reject(err);
called = true;
})
} else {
resolve(x);
}
} catch(err) {
if(called) return;
reject(err);
called = true;
}
} else {
resolve(x);
}
}
实现一个寄生组合继承
寄生组合继承其实需要注意的是子构造函数constructor的指向问题。以及继承的弊病：超集会调用两次。
参考答案
function Super() {}
function Sub() {
Super.call(this)
}
Sub.prototype = new Super();
Sub.constructor = Sub;
业务题实现
如何实现一个防抖函数
对于防抖的理解，最好结合业务场景记忆：防抖一般用于输入框场景。所以在实现层面会有以下两个方面：
1、当一定时间内事件再次触发时，定时器应该重置。
2、执行完毕后定时器重置。
参考答案
function debounce(cb, delay, ...args) {
let time = null;
return function() {
if(time) {
clearTimeout(time);
}
time = setTimeout(() => {
cb.apply(this, ...args);
clearTimeout(time);
}, delay);
}
}
如何实现一个节流函数
对于节流函数，也需要结合场景来记忆。一般用于滚动事件中，一定时间内只会触发一次。实现层面也会有两个需要注意的点：
1、用一个锁变量来保证一定时间内只会触发一次。
2、执行完毕之后，解开锁即可
参考答案
function tr(fn, time, ...args) {
let lock = false;
return function() {
if(lock) return;
lock = true;
setTimeout(() => {
fn.apply(this, ...args);
lock = false;
}, time)
}
}
实现一个中划线与驼峰的互相转换
这个其实主要考的是正则和replace方法。
参考答案
function camelize(str) {
return (str + '').replace(/-\D/g, function(match) {
return match.charAt(1).toUpperCase()
})
}
function hyphenate(str) {
return (str + '').replace(/[A-Z]/g, function(match) {
return '-' + match.toLowerCase();
})
}
实现一个sleep函数
sleep函数实现的途径有很多，promise，async/await等等。我在这里就将一些最普通的。
参考答案
function sleep(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(true);
}, time)
})
}
实现一个柯里化函数
实现柯里化其实就是把多个参数长度很分开来调用的意思，好处在于可以观测你参数调用的一个中间的过程，或者中间的变量。面试中常考的add(1, 2, 3)和add(1)(2)(3)就是这个问题
参考答案
function curry(fn) {
const finalLen = fn.length
let args = [].slice.call(this,1)
return function currying () {
args = args.concat(Array.from(arguments))
const len = args.length
return len >= fn.length ? fn.apply(this, args) : currying
}
}
实现一个ajax
实现一个ajax其实主要是一个XMLHttpRequest对象以及其API方法的一个使用的问题。而在这里我建议尽量封装成promise的形式，方便使用。
参考答案
function ajax({url, methods, body, headers}) {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.open(url, methods);
for(let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value);
}
request.onreadystatechange = () => {
if(request.readyState === 4) {
if(request.status >= '200' && request.status < 300) {
resolve(request.responeText);
} else {
reject(request)
}
}
}
request.send(body)
})
}
实现一个深拷贝
深拷贝也是面试中的一个高频考点，一般的方法，JSON的序列化和反序列化，但是这种方法的弊病有两个：
1、undefined、null和symbol类型的值会被删除
2、碰见循环引用的时候会报错。
那么我们在实现深拷贝的时候，也要时刻关注循环引用这个问题。
下列方法中，我主要是通过数组的形式去解决循环引用的问题。那为什么要有两个数组呢？
主要是一个数组维护的是原来对象的引用，一个数组维护的是新对象的引用。
参考答案
function deepClone(obj) {
const parents = [];
const children = [];
function helper(obj) {
if(obj === null) return null;
if(typeof obj !== 'object') return obj;
let child, proto;
if(Array.isArray(obj)) {
child = [];
} else {
proto = Object.getPrototypeOf(obj);
child = Object.create(proto);
}
// 处理循环引用
let index = parents.indexOf(obj)
if(index === -1) {
parents.push(obj);
children.push(child)
} else {
return children[index];
}
// for in迭代
for(let i in obj) {
child[i] = helper(obj[i]);
}
}
}
内推
疫情当下，唯有进入大公司，应届生才能有很好的保障。小公司如果活不下去，裁员或者无法转正，被迫社招会很被动。
笔者就职于阿里零售通。想要内推的同学，可以发邮箱1445509994@qq.com。海量HC！！！也可以加q群：912253914。空闲时间帮改简历哦。
