JavaScript高频手写面试题之apply、call和bind

1.实现call方法

var name = '公众号：前端技术营';
var obj = {
    name: '张三'
};

function fn(a, b, c) {
    console.log(`${a} ${b} ${c} ${this.name}`);
};
// 模拟call
Function.prototype.myCall = function(){
  let target = arguments[0]|| window || global
  target.fn = this
  let args = Array.from(arguments).slice(1)
  let result = target.fn(...args)
  delete target.fn
  return result 
}

fn.myCall(obj, 'my', 'name', 'is'); // my name is 张三
fn.myCall(null, 'my', 'name', 'is'); // my name is 公众号：前端技术营
fn.myCall(undefined, 'my', 'name', 'is'); // my name is 公众号：前端技术营

2.实现apply方法

var name = '公众号：前端技术营';
var obj = {
    name: '张三'
};

function fn(a, b, c) {
    console.log(`${a} ${b} ${c} ${this.name}`);
};
// 模拟apply
Function.prototype.myApply = function(){
  let target = arguments[0]|| window || global;
  target.fn = this;
  let args = Array.from(arguments)[1];
  let result = target.fn(...args);
  delete target.fn;
  return result;
}

fn.myApply(obj, ['my', 'name', 'is']); // my name is 张三
fn.myApply(null, ['my', 'name', 'is']); // my name is 公众号：前端技术营
fn.myApply(undefined, ['my', 'name', 'is']); // my name is 公众号：前端技术营

3.实现bind方法

var name = '公众号：前端技术营';
var obj = {
    name: '张三'
};

function fn(a, b, c) {
    console.log(`${a} ${b} ${c} ${this.name}`);
};
// 模拟call
Function.prototype.myBind = function(context) {
    const _this = this
    const args = [...arguments].slice(1);
    // 返回一个函数
    return function F() {
        // 因为返回了一个函数，我们可以 new F()，所以需要判断
        if (this instanceof F) {
            // 忽略传入的this
            return new _this(...args, ...arguments)
        }
        // 直接调用，将两边的参数拼接起来

        return _this.apply(context, args.concat(...arguments))
    }
}

const fn1 = fn.myBind(obj, 'my', 'name', 'is');
fn1(); // my name is 张三

const fn2 = fn.myBind(null, 'my', 'name', 'is');
fn2(); // my name is 公众号：前端技术营

const fn3 = fn.myBind(undefined, 'my', 'name', 'is');
fn3(); // my name is 公众号：前端技术营