JavaScript手写call函数实现与原理详解-迪斯科星球

1. 为什么需要手写call函数？

在JavaScript面试中，手写call函数几乎是必考题。这不仅仅是为了考察你对this指向的理解，更是检验你对JavaScript函数执行机制掌握程度的重要指标。我见过太多候选人因为对call的实现原理一知半解而错失offer。

call函数的核心作用在于改变函数执行时的this指向。举个例子，当我们需要借用数组的slice方法处理类数组对象时：

function list() { return Array.prototype.slice.call(arguments) } list(1, 2, 3) // [1, 2, 3]

2. call函数的原生用法解析

在实现自己的call之前，我们先看看原生call的几种典型用法：

2.1 基本用法：改变this指向

const obj = { value: 1 } function fn() { console.log(this.value) } fn.call(obj) // 输出1

2.2 传递参数

function add(a, b) { return a + b + this.c } const context = { c: 3 } add.call(context, 1, 2) // 6

2.3 构造函数调用

function Person(name) { this.name = name } const obj = {} Person.call(obj, '张三') console.log(obj.name) // '张三'

3. 手写call函数的实现步骤

现在我们来一步步实现自己的call函数。我将这个过程分解为五个关键步骤：

3.1 基础框架搭建

首先在Function原型上添加我们的myCall方法：

Function.prototype.myCall = function(context) { // 实现代码将放在这里 }

3.2 处理context参数

context参数表示要绑定的this对象，需要处理几种特殊情况：

Function.prototype.myCall = function(context) { // 如果context为null或undefined，默认指向window（非严格模式） context = context || window // 如果是原始值，转换为对象 if (typeof context !== 'object') { context = new context.constructor(context) } }

3.3 绑定函数到context

我们需要将当前函数临时添加到context对象上：

Function.prototype.myCall = function(context) { context = context || window if (typeof context !== 'object') { context = new context.constructor(context) } // 生成唯一属性名，避免覆盖原有属性 const fnKey = Symbol('fn') context[fnKey] = this // this指向调用myCall的函数 }

3.4 处理参数并执行函数

收集传入的参数并执行函数：

Function.prototype.myCall = function(context, ...args) { context = context || window if (typeof context !== 'object') { context = new context.constructor(context) } const fnKey = Symbol('fn') context[fnKey] = this // 执行函数并保存结果 const result = context[fnKey](...args) // 删除临时属性 delete context[fnKey] return result }

3.5 完整实现代码

综合以上步骤，这是完整的实现：

Function.prototype.myCall = function(context, ...args) { // 处理context context = context || window if (typeof context !== 'object') { context = new context.constructor(context) } // 创建唯一属性名 const fnKey = Symbol('fn') context[fnKey] = this // 执行函数 const result = context[fnKey](...args) // 清理 delete context[fnKey] return result }

4. 实现原理深度解析

4.1 this绑定的本质

JavaScript中函数的this是在调用时确定的。call方法的本质是"隐式绑定"的一种显式实现方式。当我们使用obj.method()调用时，method内部的this会自动绑定到obj。call方法让我们可以手动指定这个绑定关系。

4.2 原型链与属性访问

我们将函数临时添加到context对象上，然后通过context.fn()的方式调用，这样函数内部的this自然就指向了context。使用Symbol作为属性名可以避免覆盖对象原有属性。

4.3 参数传递机制

使用ES6的rest参数(...args)收集所有传入的参数，再通过展开运算符(...args)传递给函数。这比传统的arguments对象处理更加简洁。

5. 边界情况处理

在实际使用中，我们需要考虑各种边界情况：

5.1 原始值作为context

当context是原始值（数字、字符串等）时：

function fn() { console.log(this) } fn.myCall(123) // Number {123}

5.2 null和undefined处理

在非严格模式下，null和undefined会被替换为全局对象：

function fn() { console.log(this === window) // true } fn.myCall(null)

5.3 函数没有返回值

当被调用的函数没有return语句时，我们的实现也能正确处理：

function log() { console.log('called') } const result = log.myCall({}) console.log(result) // undefined

6. 性能优化与替代方案

6.1 避免使用Symbol的替代方案

在不支持Symbol的环境下，可以使用时间戳作为属性名：

const fnKey = `__fn__${Date.now()}__`

6.2 严格模式下的处理

在严格模式下，context为null/undefined时不会转换为window：

Function.prototype.myCall = function(context, ...args) { 'use strict' if (context == null) { context = undefined } // ...其余代码相同 }

7. 常见面试问题与回答技巧

7.1 "call和apply有什么区别？"

标准回答： "call和apply都能改变函数执行时的this指向，区别在于参数传递方式：call接受参数列表，apply接受参数数组。性能上在现代JavaScript引擎中差异不大。"

加分回答： "从ES6开始，我们可以用扩展运算符(...)来统一两者的使用方式。实际上，apply可以用call来实现：Function.prototype.apply = function(context, args) { return this.call(context, ...args) }"

7.2 "为什么需要在context上添加临时属性？"

核心要点： "这是实现this绑定的关键。JavaScript中函数的this由调用方式决定，通过context.fn()的方式调用，函数内部的this自然指向context对象。"

7.3 "如何实现bind函数？"

可以这样引导回答： "bind的实现基于call/apply，它返回一个新函数，这个新函数在被调用时会用指定的this值和预设参数调用原函数。我可以展示一个简单的实现..."

8. 实际应用场景

8.1 类数组转换

将arguments或DOM集合转换为数组：

const divs = document.querySelectorAll('div') const divArray = Array.prototype.slice.myCall(divs)

8.2 继承实现

在ES5中实现继承：

function Parent(name) { this.name = name } function Child(name, age) { Parent.myCall(this, name) this.age = age }

8.3 高阶函数

创建具有特定this绑定的函数：

const obj = { count: 0 } function increment() { this.count++ } const incrementForObj = increment.myCall.bind(increment, obj) incrementForObj() // obj.count变为1

9. 测试用例与验证

为了确保我们的实现正确，应该编写全面的测试用例：

// 基本功能测试 const obj = { a: 1 } function test() { return this.a } console.assert(test.myCall(obj) === 1, '基本功能测试失败') // 参数传递测试 function sum(b, c) { return this.a + b + c } console.assert(sum.myCall(obj, 2, 3) === 6, '参数传递测试失败') // 原始值测试 function logThis() { return this } console.assert(logThis.myCall('abc').toString() === 'abc', '原始值测试失败') // 返回值测试 function returnVal() { return 42 } console.assert(returnVal.myCall(null) === 42, '返回值测试失败')

10. 进阶思考：与apply/bind的关系

理解了call的实现后，apply和bind的实现就水到渠成了：

10.1 apply的实现

Function.prototype.myApply = function(context, argsArray) { return this.myCall(context, ...(argsArray || [])) }

10.2 bind的实现

Function.prototype.myBind = function(context, ...presetArgs) { const fn = this return function(...args) { return fn.myCall(context, ...presetArgs, ...args) } }

11. 性能考量与优化

虽然我们的实现功能完整，但在性能敏感场景下还有优化空间：

11.1 避免频繁创建Symbol

可以预先定义一个Symbol：

const callSymbol = Symbol('callFn') Function.prototype.myCall = function(context, ...args) { context = context || window context[callSymbol] = this const result = context[callSymbol](...args) delete context[callSymbol] return result }

11.2 使用try-finally确保清理

确保临时属性总是被清理：

Function.prototype.myCall = function(context, ...args) { context = context || window const fnKey = Symbol('fn') context[fnKey] = this try { return context[fnKey](...args) } finally { delete context[fnKey] } }

12. ES6新特性带来的变化

ES6的箭头函数和class对this绑定的影响：

12.1 箭头函数的this

箭头函数的this在定义时就已经确定，无法通过call改变：

const fn = () => this fn.myCall({a:1}) === window // true

12.2 class中的方法

class中的方法默认使用严格模式，且this绑定行为有所不同：

class A { method() { return this } } const a = new A() const method = a.method method.myCall({}) // 严格模式下this为undefined

13. 浏览器兼容性处理

如果需要支持老版本浏览器，我们需要做一些调整：

13.1 不使用Symbol的版本

Function.prototype.myCall = function(context) { context = context || window var fnKey = '__fn__' + Math.random().toString(36).slice(2) while (context.hasOwnProperty(fnKey)) { fnKey = '__fn__' + Math.random().toString(36).slice(2) } context[fnKey] = this var args = [] for (var i = 1; i < arguments.length; i++) { args.push('arguments[' + i + ']') } var result = eval('context[fnKey](' + args.join(',') + ')') delete context[fnKey] return result }

13.2 ES3兼容版本

Function.prototype.myCall = function(context) { context = context || window var fnKey = '__fn__' var unique = 0 while (context.hasOwnProperty(fnKey + unique)) { unique++ } fnKey = fnKey + unique context[fnKey] = this var args = [] for (var i = 1; i < arguments.length; i++) { args.push('arguments[' + i + ']') } var result = eval('context[fnKey](' + args.join(',') + ')') delete context[fnKey] return result }

14. 面试实战技巧

在面试中遇到手写call的问题时，可以按照以下步骤展示：

先说明call的功能和作用
从简单实现开始，逐步完善
主动提出边界情况并处理
与apply/bind进行对比
讨论性能优化可能性

记住要边写边解释，展示思考过程比直接给出完美答案更重要。面试官更看重你解决问题的思路，而不是死记硬背的能力。

企业官网建设流程全解析