用代码模拟实现call、apply方法

MDN上是这么描述的：

call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)

栗子：

var obj = {
    value: 999
} 

function bar(name,age) {
    console.log(this.value)
    console.log(name,age)
}

bar.call(obj,'jack',22)   //999 'jack',22

• call方法做了两件事情
  1. 让bar函数的this指向对象obj
  2. bar函数执行了

---

代码实现第一步
试想在调用call时，把obj对象改造成下边这样

var foo = {
    value: 999,
    bar: function() {
      console.log(this.value)
   }
};
obj.bar()  //999

这时this就顺利指向foo了，但是这样会让obj对象多了一个方法，所以还要去除掉这个额外的方法，可以使用delete方法

• 代码的执行顺序可以分为以下几步
  1.将函数对象设置为对象的属性
  2.执行这个函数
  3.删除这个函数

按照上边顺序就是：
//第一步
obj .fn = bar
//第二步
obj.fn()
//第三部
delete obj.fn

根据这个思路试着写第一版代码

Function.prototype.myCall = function(obj) {
  //首先获取调用的call函数，用this获取
    obj._fn_ = this;
    obj._fn_();
    delete obj._fn_;
}
//测试一下
var obj = {
    value: 999
}
function bar() {
    console.log(this.value)
}
bar.myCall(obj);   //999

基本功能实现了，但是call方法还可以传递多个参数的，所以还要完成参数部分的处理。
不定参数，这里可以使用arguments对象来取到第二个到最后一个的参数，因为是arguments是类数组对象，可以使用for循环来遍历，可以这样：

//建立一个数组，用来存贮参数
var args = [];
for(var i = 1; i < arguments.length;i++) {
    args .push( 'arguments['  + i + ']' );
}
//执行后参数就转为[ 1, 2, 3 ]这种形式

参数有了,怎么传参呢，两种做法

obj._fn_(...args)   //es6方法
eval( 'obj._fn_(' + args + ')' ) //es3的eval方法可以把字符串解析成JavaScript代码执行

OK,整合一下代码，再跑一下

Function.prototype.myCall = function(obj) {
    //让this指向自定义对象
    obj._fn_ = this;
    //声明一个数组存储参数
    var args = [];
    //处理参数部分
    for( var i = 1,len = arguments.length; i < len; i++ ) {
        args.push( 'arguments[' + i + ']' )
    }
    //执行函数
    eval( 'obj._fn_(' + args + ')' );
   //删除对象属性
   delete obj._fn_;
}

测试一下

var foo = {
    value: 777
};
function bar(param1,param2) {
    console.log(this.value)
    console.log(param1,param2)
}

bar.myCall(foo,'test1','test2')  //777 'test1' 'test2'

开心！(～￣▽￣)～

• 为了让代码更加强壮，可以加入一些异常处理，并且允许有返回值
  1. this参数可以传入null来当做参数，如果让参数为null时，就让this指向window
  2. 让这个函数可以有返回值

完整版代码如下：

Function.prototype.myCall = function(obj) {
    var obj = obj || window;
    //让this指向自定义对象
    obj._fn_ = this;
    //声明一个数组存储参数
    var args = [];
    //处理参数部分
    for( var i = 1,len = arguments.length; i < len; i++ ) {
        args.push( 'arguments[' + i + ']' );
    }
    //执行函数
   var result =  eval( 'obj._fn_(' + args + ')' );
   //删除对象属性
   delete obj._fn_;
   return result;
}

---

为什么标题是call和apply,为什么只有call呢？？？
因为内置的apply方法和call的作用一样的，区别在于接受参数的形式。
call方法接受单个或多个参数，不接受数组形式的参数
apply方法相反，只接受数组形式的参数

所以apply的实现只需要在传参形式上更改就行了
在参数上做些判断就OK了，直接贴上代码

Function.prototype.myApply = function (obj, arr) {
    var obj= Object(obj) || window;
    obj._fn_ = this;

    var result;
    if (!Array.isArray(arr)) {
        throw new Error('apply方法参数只接受数组');
        return;
    } else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('obj._fn_ (' + args + ')')
    }
    delete obj._fn_
    return result;
}