apply/call/bind 自我实现

Function.prototype.myCall = function(context) {
    // 原型中 this 指向的是实例对象，所以这里指向 [Function: bar]
    console.log(this);  // [Function: bar]
    // 在传入的上下文对象中，创建一个属性，值指向方法 bar
    context.fn = this;  // foo.fn = [Function: bar]
    // 调用这个方法，此时调用者是 foo，this 指向 foo
    context.fn();
    // 执行后删除它，仅使用一次，避免该属性被其它地方使用（遍历）
    delete context.fn;
};

let foo = {
    value: 2
};

function bar() {
    console.log(this.value);
}
// bar 函数的声明等同于：var bar = new Function("console.log(this.value)");

bar.call(foo);   // 2;

// ES6 版本
Function.prototype.myCall = function(context, ...params) {
  // ES6 函数 Rest 参数，使其可指定一个对象，接收函数的剩余参数，合成数组
  if (typeof context === 'object') {
    context = context || window;
  } else {
    context = Object.create(null);
  }

  // 用 Symbol 来作属性 key 值，保持唯一性，避免冲突
  let fn = Symbol();
  context[fn] = this;
  // 将参数数组展开，作为多个参数传入
  const result = context[fn](...params);
  // 删除避免永久存在
  delete(context[fn]);
  // 函数可以有返回值
  return result;
}

// 测试
var mine = {
    name: '以乐之名'
}

var person = {
  name: '无名氏',
  sayHi: function(msg) {
    console.log('我的名字：' + this.name + '，', msg);
  }
}

person.sayHi.myCall(mine, '很高兴认识你！');
// 我的名字：以乐之名，很高兴认识你！

// 创建一个空对象的方式

// eg.A
let emptyObj = {};

// eg.B
let emptyObj = new Object();

// eg.C
let emptyObj = Object.create(null);

// ES5 版本

// 模拟Symbol
function getSymbol(obj) {
  var uniqAttr = '00' + Math.random();
  if (obj.hasOwnProperty(uniqAttr)) {
    // 如果已存在，则递归自调用函数
    arguments.callee(obj);
  } else {
    return uniqAttr;
  }
}

Function.prototype.myCall = function() {
  var args = arguments;
  if (!args.length) return;

  var context = [].shift.apply(args);
  context = context || window;

  var fn = getSymbol(context);
  context[fn] = this;

  // 无其它参数传入
  if (!arguments.length) {
    return context[fn];
  }

  var param = args[i];
  // 类型判断，不然 eval 运行会出错
  var paramType = typeof param;
  switch(paramType) {
    case 'string':
      param = '"' + param + '"'
    break;
    case 'object':
      param = JSON.stringify(param);
    break;
  }

  fnStr += i == args.length - 1 ? param : param + ',';

  // 借助 eval 执行
  var result = eval(fnStr);
  delete context[fn];
  return result;
}

// 测试
var mine = {
    name: '以乐之名'
}

var person = {
  name: '无名氏',
  sayHi: function(msg) {
    console.log('我的名字：' + this.name + '，', msg);
  }
}

person.sayHi.myCall(mine, '很高兴认识你！');
// 我的名字：以乐之名，很高兴认识！

Function.prototype.myApply = function(context, params) {
    // apply 与 call 的区别，第二个参数是数组，且不会有第三个参数
    if (typeof context === 'object') {
        context = context || window;
    } else {
        context = Object.create(null);
    }

    let fn = Symbol();
    context[fn] = this;
    const result context[fn](...params);
    delete context[fn];
    return result;
}

Function.prototype.bind = function(context, ...initArgs) {
    // bind 调用的方法一定要是一个函数
    if (typeof this !== 'function') {
      throw new TypeError('not a function');
    }
    let self = this;
    let F = function() {};
    F.prototype = this.prototype;
    let bound = function(...finnalyArgs) {
      // 将前后参数合并传入
      return self.call(this instanceof F ? this : context || this, ...initArgs, ...finnalyArgs);
    }
    bound.prototype = new F();
    return bound;
}