有不少刚入行的同学跟我说：“JavaScript 很多 API 记不清楚怎么办？数组的这方法、那方法总是傻傻分不清楚，该如何是好？操作 DOM 的方式今天记、明天忘，真让人奔溃！”甚至有的开发者在讨论面试时，总向我抱怨：“面试官总爱纠结 API 的使用，甚至 jQuery 某些方法的参数顺序都需要让我说清楚！”
我认为，对于反复使用的方法，所有人都要做到“机械记忆”，能够反手写出。一些貌似永远记不清的 API 只是因为用得不够多而已。
在做面试官时，我从来不强求开发者准确无误地“背诵” API。相反，我喜欢从另外一个角度来考察面试者：“ 既然记不清使用方法，那么我告诉你它的使用方法，你来实现一个吧！ ”实现一个 API，除了可以考察面试者对这个 API 的理解，更能体现开发者的编程思维和代码能力。对于积极上进的前端工程师，模仿并实现一些经典方法，应该是“家常便饭”，这是比较基本的要求。
if (!Array.prototype.reduce) {
Object.defineProperty(Array.prototype, 'reduce', {
value: function(callback /*, initialValue*/) {
if (this === null) {
throw new TypeError( 'Array.prototype.reduce ' +
'called on null or undefined' )
}
if (typeof callback !== 'function') {
throw new TypeError( callback +
' is not a function')
}
var o = Object(this)
var len = o.length >>> 0
var k = 0
var value
if (arguments.length >= 2) {
value = arguments[1]
} else {
while (k < len && !(k in o)) {
k++
}
if (k >= len) {
throw new TypeError( 'Reduce of empty array ' +
'with no initial value' )
}
value = o[k++]
}
while (k < len) {
if (k in o) {
value = callback(value, o[k], k, o)
}
k++
}
return value
}
})
}
上述代码中使用了 value 作为初始值，并通过 while 循环，依次累加计算出 value 结果并输出。但是相比 MDN 上述实现，我个人更喜欢的实现方案是：
Array.prototype.reduce =Array.prototype.reduce ||function(func, initialValue) {var arr =thisvar base =typeof initialValue ==='undefined'? arr[0] : initialValuevar startPoint =typeof initialValue ==='undefined'?1:0arr.slice(startPoint).forEach(function(val, index) { base =func(base, val, index + startPoint, arr) })return base}
const compose = function(...args) {
let length = args.length
let count = length - 1
let result
return function f1 (...arg1) {
result = args[count].apply(this, arg1)
if (count <= 0) {
count = length - 1
return result
}
count--
return f1.call(null, result)
}
}
这里的关键是用到了 闭包 ，使用闭包变量储存结果 result 和函数数组长度以及遍历索引，并利用递归思想，进行结果的累加计算。整体实现符合正常的面向过程思维，不难理解。
// lodash 版本
var compose = function(funcs) {
var length = funcs.length
var index = length
while (index--) {
if (typeof funcs[index] !== 'function') {
throw new TypeError('Expected a function');
}
}
return function(...args) {
var index = 0
var result = length ? funcs.reverse()[index].apply(this, args) : args[0]
while (++index < length) {
result = funcs[index].call(this, result)
}
return result
}
}
lodash 版本更像我们的第一种实现方式，理解起来也更容易。
Redux 版本
// Redux 版本
function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
Function.prototype.bind = Function.prototype.bind || function (context) {
var me = this;
var argsArray = Array.prototype.slice.call(arguments);
return function () {
return me.apply(context, argsArray.slice(1))
}
}
这是一般合格开发者提供的答案，如果面试者能写到这里，给他 60 分。
先简要解读一下：
基本原理是使用 apply 进行模拟 bind。函数体内的 this 就是需要绑定 this 的函数，或者说是原函数。最后使用 apply 来进行参数（context）绑定，并返回。
Function.prototype.bind = Function.prototype.bind || function (context) {
var me = this;
var args = Array.prototype.slice.call(arguments, 1);
return function () {
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return me.apply(context, finalArgs);
}
}
但继续探究，我们注意 bind 方法中：bind 返回的函数如果作为构造函数，搭配 new 关键字出现的话，我们的绑定 this 就需要“被忽略”，this 要绑定在实例上。也就是说，new 的操作符要高于 bind 绑定，兼容这种情况的实现：
Function.prototype.bind = Function.prototype.bind || function (context) {
var me = this;
var args = Array.prototype.slice.call(arguments, 1);
var F = function () {};
F.prototype = this.prototype;
var bound = function () {
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return me.apply(this instanceof F ? this : context || this, finalArgs);
}
bound.prototype = new F();
return bound;
}
这些 API 的实现并不算复杂，却能恰如其分地考验开发者的 JavaScript 基础。基础是地基，是探究更深入内容的钥匙，是进阶之路上最重要的一环，需要每个开发者重视。在前端技术快速发展迭代的今天，在“前端市场是否饱和”，“前端求职火爆异常”，“前端入门简单，钱多人傻”等众说纷纭的浮躁环境下，对基础内功的修炼就显得尤为重要。这也是你在前端路上能走多远、走多久的关键。