面试题之手写call，apply，bind

在面试中，手写call，apply，bind是常见的题目，主要考察对JavaScript中函数上下文（this）和参数传递的理解。对于我这个小菜鸟来说，这无疑也是一道难题呢，嘤嘤嘤

1. 手写 `call`

call 方法允许你调用一个函数，并显式地指定函数内部的 this 值，同时可以逐个传递参数。

实现思路：

将目标函数绑定到指定的上下文对象（thisArg）。
调用目标函数。
返回目标函数的执行结果。

代码实现：

Function.prototype.myCall=function(thisArg,...args){
if(typeof this!=='function'){
//如果调用者不是一个函数，则抛出错误
throw new TypeError("myCall must be called on a function");
}

thisArg = thisArg||(thisArg===null?globalThis:thisArg)
thisArg['fn']=this
thisArg['fn'](...args)// 这里相当于立即执行函数
delete thisArg['fn']

}

测试：

function greet(...message){
console.log(`${message},my name is ${this.name}`)
}

const person = {name:'alita'}
greet.myCall(person,'hello','hi','嘻嘻')//hello,hi,嘻嘻,my name is alita

2. 手写 `apply`

apply 方法与 call 类似，但参数是以数组的形式传递的。

实现思路：

将目标函数绑定到指定的上下文对象（thisArg）。
调用目标函数。
返回目标函数的执行结果。

代码实现：

Function.prototype.myApply = function (thisArg, argsArray) {
// 检查是否为函数
if (typeof this !== "function") {
throw new TypeError("myApply must be called on a function");
}

// 如果 thisArg 是 null 或 undefined，按照规范，this 应该指向全局对象
thisArg = thisArg || (thisArg === null ? globalThis : Object(thisArg));

// 将函数绑定到 thisArg 上
const fn = Symbol("fn");
thisArg[fn] = this;

// 调用函数并获取结果
const result = thisArg[fn](...argsArray);

// 删除临时属性
delete thisArg[fn];

return result;
};

测试：

function greet(message) {
console.log(`${message}, my name is ${this.name}`);
}

const person = { name: "Alice" };
greet.myApply(person, ["Hello"]); // 输出: Hello, my name is Alice

3. 手写 `bind`

bind 方法用于创建一个新的函数，并将该函数的 this 值永久绑定到指定的对象上。与 call 和 apply 不同，bind 不会立即调用函数，而是返回一个新的函数。

实现思路：

创建一个新的函数。
将目标函数的 this 值绑定到指定对象。
支持预绑定参数。
支持作为构造函数使用（可选）。

代码实现：

Function.prototype.myBind = function (thisArg, ...bindArgs) {
// 检查是否为函数
if (typeof this !== "function") {
throw new TypeError("myBind must be called on a function");
}

const fn = this;

// 返回一个新的函数
const boundFunction = function (...callArgs) {
// 合并预绑定参数和调用时的参数
const finalArgs = bindArgs.concat(callArgs);

// 如果作为构造函数调用，this 指向新创建的对象
if (new.target) {
return new fn(...finalArgs);
} else {
// 否则，this 指向绑定的对象
return fn.apply(thisArg, finalArgs);
}
};

// 修复绑定函数的原型链
boundFunction.prototype = Object.create(fn.prototype);

return boundFunction;
};

测试：

function greet(message) {
console.log(`${message}, my name is ${this.name}`);
}

const person = { name: "Alice" };
const greetAlice = greet.myBind(person, "Hello");
greetAlice(); // 输出: Hello, my name is Alice

// 测试作为构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}

const createPerson = Person.myBind(null, "Alice");
const alice = new createPerson(25);
console.log(alice); // { name: "Alice", age: 25 }

总结

call 和 apply：
- 都用于立即调用函数并改变上下文。
- 区别在于参数传递方式：call 是逐个传递，apply 是数组传递。
- 实现时，主要通过临时属性绑定和调用目标函数。
bind：
- 返回一个新的函数，this 值和参数被预绑定。
- 支持延迟调用和作为构造函数使用。
- 实现时需要处理 new 调用的情况，并修复原型链。