前言

本文是面试系列篇的实现篇。笔者整理了面试过程中可能会遇到的手写实现，以及它的原理。这可以帮助面试者在笔试环节获得良好的加分。

其他文章系列，欢迎关注我文末的公众号

正文

apply和call

apply和call的实现中，主要是利用了两个点：

根据传入的thisArgs去创建对象

在新创建的对象上定义当前函数，然后进行调用

apply和call的区别：

apply在指定对象后只接受一个参数

call在指定对象后可以接受多个参数

代码实现如下：

/**

* apply模拟实现

*/

Function.prototype.myApply = function(thisArg, arrArg) {

//#1 类型检测

if (typeof this !== 'function') {

throw new TypeError(`${this}.apply is not a function`);

}

//#2 arrArg和thisArg参数判断

if (arrArg === undefined || arrArg === null) {

arrArg = [];

}

if (thisArg === undefined || thisArg === null) {

thisArg = _self;

}

​

//#3 创建对象，函数赋值，调用对象方法

const obj = new Object(thisArg);

obj['_fn_'] = this;

var result = obj['_fn_'](...arrArg);

delete obj['_fn_'];

return result;

}

​

/**

* call模拟实现

*/

Function.prototype.myCall = function(thisArg) {

//#1 类型检测

if (typeof this !== 'function') {

throw new TypeError(`${this}.call is not a function`);

}

​

//#2 参数调整

const argumentsArr = [];

for (let i = 1; i < arguments.length; i++) {

argumentsArr.push(arguments[i]);

}

if (thisArg === undefined || thisArg === null) {

thisArg = _self;

}

​

//#3 创建对象，函数赋值，调用对象函数

const obj = new Object(thisArg);

var _fn = '_fn_';

obj[_fn] = this;

var result = obj[_fn](...argumentsArr);

delete obj[_fn];

return result;

}

复制代码

bind和softBind实现

bind和softBind的区别：

bind的绑定对象是固定的，softBind相当于是一种软绑定【如果this为空，或者指向全局对象时，才改变函数的绑定】

bind和apply & call的区别：

bind返回一个函数；apply和call是调用时执行的

代码实现如下：

/**

* bind实现

*/

Function.prototype.myBind = function(obj) {

//#1 类型校验

if (typeof this === 'function') {

throw new TypeError(`${this}.bind is not a function`);

}

​

//#2 取参

const args = Array.prototype.shift.call(arguments) || [];

const fn = this;

​

//#3 定义函数，调用apply改变this指向，同时改变新函数的原型

var bindFn = function() {

return this.apply(obj, [].concat(args, arguments));

}

bindFn.prototype = fn.prototype;

return bindFn;

}

​

/**

* softBind的实现

*/

Function.prototype.softBind = function(obj) {

//#1 类型校验

if (typeof this === 'function') {

throw new TypeError(`${this}.softBind is not a function`);

}

​

//#2 取参

const args = Array.prototype.shift.call(arguments) || [];

const fn = this;

​

//#3 定义函数，调用apply，此处注意对this的判断，改变新函数的原型

var softBindFn = function() {

return fn.apply((!this || this === (window || global) ? obj : this), [].concat(args, arguments));

}

softBindFn.prototype = fn.prototype;

return softBindFn;

}

复制代码

new的实现

new实现的过程：

创建一个新的对象

将新对象的隐式引用(proto)指向构造函数的原型

通过apply调用构造函数，给这个对象赋值

最后判断返回的对象是否是一个对象，然后结果

代码实现如下：

/**

* new模拟实现

*/

function myNew() {

//#1 创建一个空对象

let obj = Object.create({});

//#2 取出构造函数

let Constructor = Array.prototype.unshift.call(arguments);

​

//#3 改变新对象的隐式指向

obj._proto_ = Constructor.prototype;

​

//#4 调用构造函数，返回结果

ret = Constructor.apply(obj, arguments);

​

//#5 对结果进行判断

return ret instanceof Object ? ret : obj;

}

复制代码

instanceof的实现

instance的实现：

取出隐式引用(proto)，然后和原型进行比较

依次往上循环，直到__proto__为null时

代码实现如下：

/**

* 实现instanceof

*/

function instanceFn(L, R) {

//#1 取出R的原型

const O = R.prototype;

​

//#2 取L的隐式指向，依次在原型链上判断

L = L._proto_;

while(true) {

if (L === null) {

//#3 当L为空时，返回false

return false;

} else {

//#4 当O与L相等是，说明继承于R

if (O === L) {

return true;

}

L = L._proto_;

}

}

}

复制代码

ES6的extend实现

ES6中的extend实现的原理：

将子构造函数的原型指向父构造函数的实例

然后改变原型中的构造函数(constructor)指向子构造函数

然后将子构造函数的隐式指向(proto)指向父构造函数

代码实现如下：

/**

* extend模拟实现

*/

function _inherits(subType, superType) {

//#1 创建对象，增强对象，指定对象

subType.prototype = Object.create(superType && superType.prototype, {

constructor: {

value: subType,

writable: true,

configurable: true,

enumerable: false

}

});

​

//#2 给子构造函数的隐式指向父构造函数

if (superType) {

Object.setPrototypeOf ? Object.setPrototypeOf(subType, superType) : subType._proto_ = superType;

}

}

复制代码

深拷贝和浅拷贝的实现

浅拷贝，就是只进行一层拷贝：

把对象的key取出来，然通过hasOwnProperty判断，赋值

深拷贝，就是无限层级的拷贝：

通过Map的形式，解决循环引用，如果对象存在，则直接返回

通过getOwnPropertySymbols的方法，解决Symbol值的拷贝

循环递归，拷贝对象属性

代码实现如下：

/**

* 浅拷贝

*/

function shallowCopy(obj) {

//#1 类型校验

if (obj !== 'object') return obj;

​

const target = {};

​

//#2 遍历对象的key

for (let key in obj) {

//#3 判断key是否在对象上

if (obj.hasOwnProperty(key)) {

target[key] === obj[key];

}

}

return target;

}

/**

* 深拷贝

*/

function isObject(obj) {

return typeof obj === 'object' && obj !== null;

}

function deepCopy(source, hash = new WeakMap()) {

//#1 类型校验

if (!isObject(source)) return source;

//#2 解决循环引用

if (hash.get(source)) return hash.get(source);

//#3 创建新对象，存入hash中

const target = Array.isArray(source) ? [] : {};

hash.set(source, target);

​

//#4 Symbol拷贝

const symbolArr = Object.getOwnPropertySymbols(source);

if (symbolArr.length) {

symbolArr.forEach(key => {

if (isObject(source[key])) {

target[key] = deepCopy(source[key], hash);

} else {

target[key] = source[key]

}

})

}

//#5 遍历对象key值

for (let key in source) {

//#6 判断是否是对象的key

if (source.hasOwnProperty(key)) {

//#7 判断属性类型

if (isObject(source[key])) {

target[key] = deepCopy(source[key], hash);

} else {

target[key] = source[key];

}

}

}

return target;

}

复制代码

防抖和节流的实现

节流：事件在一段时间内只会被触发一次，多次触发，只有一次生效

防抖：在事件触发n秒后再被调用，如果在这n秒内又被触发，则重新计时

代码实现如下：

/**

* 节流

*/

function throttle(fn, delay) {

//#1 定义上次触发时间

let last = 0;

return function() {

//#2 取参

const args = arguments;

const now = +new Date();

​

//#3 判断是否超过之前的时间

if (now < last + delay) {

last = now;

fn.apply(this, args);

}

};

}

/**

* 防抖

*/

function debounce(fn, delay) {

let timer;

return function(...args) {

//#1 判断定时器是否存在，清除定时器

if (timer) clearTimeout(timer);

​

//#2 重新调用setTimeout

timer = setTimeout(() => {

fn.apply(this, args);

}, delay);

};

}

复制代码

Promise的all和race实现

Promise.all：谁跑得慢，以谁为准，如果有一个失败，就返回失败结果

Promise.race：谁跑得快，以谁为准

代码实现如下：

/**

* all模拟实现

*/

Promise1.all = function (promises) {

//#1 计时器 & 结果数组

let count = 0;

const res = [];

​

//#2 传值函数，将结果放入结果数组

function processData (index, data, resolve) {

res[index] = data;

count++;

if (count === promises.length) {

resolve(res);

}

}

​

//#3 返回一个Promise

return new Promise((resolve, reject) => {

for (let j = 0; j < promises.length; j++) {

//#4 遍历promises数组，调用每个promise，将结果放入结果数组

promises[j].then(data => {

processData(j, data, resolve);

}, reject);

}

});

}

/**

* race模拟实现

*/

Promise1.race = function (promises) {

//#1 返回一个Promise

return new Promise((resolve, reject) => {

//#2 遍历promises数组，谁先返回，就用谁

for (let i = 0; i < promises.length; i++) {

promises[i].then(resolve, reject);

}

});

}

复制代码欢迎关注博主的微信公众号，我们一起做沟通和交流