call,apply,bind 方法的学习

这是三个常用的操作函数的方法，在js中函数就是一等公民，所以说掌握这三个方法还是有必要的

call 和 apply，都会绑定函数的上下文（context）并立即执行调用该方法函数，两者区别在于，接受的参数格式不一样。

call 接收的参数形式是： (context,arg1,arg2,ar3....) // argn 是一个个具体的参数

apply 接收的参数形式是： (context,argArr) // argArr 可以是一个有参数组成的数组或者arguments

bind 会返回绑定调用该方法的函数上下文的新的函数。

1.call的示例

var a = {

  name: 'aa',

  getName: function(age) {

    return this.name + ',' + age;

  }

};

var b = {

  name: 'bbb'

};

a.getName.call(b,23) ／／ bbb,23

1.用call实现apply

现在的我能想到的办法就是通过eval对参数进行拼接，因为函数底层操作参数的方法没有暴露（可能不知道吧）

代码示例

这里先看下一个eval作用域的事情，经过测试eval方法获取变量也是在划分作用域的，并不是从全局获取，示例：

(function () {

  var me = {name: '33'};

  console.log(eval('me')); ／／ 33

})();

这样我们就能拿到函数原来的上下文

用call实现apply

// 用个low的办法实现apply

Function.prototype.fakeApply = function (context,arguments) {

  // 拼接参数

  var arg;

  // 如果有参数将参数转换成数组

  if(arguments){

    arg = [].slice.call(arguments,0);

    // 将数组拼接成字符串格式 ->  arg1,arg2,arg3,...

    arg = arg.join(',');

  }

  var excuteStr  = 'this.call(context' + (arg ?',' + arg : '' ) + ')'; // this.call(context,2,3,4)

  console.log(eval('this.call(context' + (arguments ?',' +  [].slice.call(arguments,0).join(',') : '' ) + ')'));

  // { name: 44 }

  // { '0': 2, '1': 3, '2': 4 }

  // ok

};

var a = {

  name: 'aa',

  getName: function() {

    console.log(this);

    console.log(arguments);

    return 'ok';

  }

};

a.getName.fakeApply({name:44},[2,3,4]);

为了加深bind理解，下面是用apply实现bind的示例

Function.prototype.fakeBind = function () {

  // bind 有可能会传入绑定的参数

  var prevFun = this;

  var context = arguments[0];

  var prevArg = arguments.length > 1 ? [].slice.call(arguments,1) : [] ;

  return function () {

    var curArg = [].concat.apply(prevArg,arguments);

    return prevFun.apply(context,curArg);

  };

};

var fun1 = function () {

  console.log(this);

  console.log(arguments);

};

var fun2 = fun1.fakeBind({name: 'aaa'},2,3);

fun2(4,5);

// { name: 'aaa' }

// { '0': 2, '1': 3, '2': 4, '3': 5 }

返回了一个新的函数，函数中的prevFun和preArg 是闭包的变量。

巴特西

call,apply,bind 方法的学习

这是三个常用的操作函数的方法，在js中函数就是一等公民，所以说掌握这三个方法还是有必要的

最新文章

热门文章