javascript bind 方法封装

Function.prototype.bind方法非常强大,可以绑定一个函数的上下文可以帮我们解决很多问题,有没有好奇这样强大的方法究竟在底层是怎么实现的呢?本文来告诉你

首先我们来看看bind方法的作用:

function func() {
     console.log(this.a, Array.prototype.slice.call(arguments));
}
var a = 10;
var obj = {
   a: 20
}
func(1);//10 [1]
var newfunc = func.bind(obj,1,2,3);
console.log(newfunc===func)//false
newfunc(4,5,6);//20 [1,2,3,4,5,6]
var obj1=new newfunc();//undefined [1,2,3]
obj1.a=30;
console.log(obj===obj1,obj1.a,obj.a)//false 30 20

根据上面的代码我们得出:

bind方法执行后返回一个全新的函数
函数newfunc执行时实际上还是执行的func函数只的功能不过this变成了obj
函数newfunc执行时传递的参数会被拼接到 func.bind的参数后面并传给func执行
当函数newfunc执行时内部this不会改变仍然指向实例化对象

封装思路:

返回一个新的函数新的函数里面实际上执行的还是原来的函数只不过用apply方法改变了this的方向
用数组的concat方法吧内外参数列表连接起来,形成一个新的数组，给apply方法第二个参数
在返回的函数的prototype上加一个属性,如果函数内部的this找得到这个属性就说明是new执行的

所以有以下代码:

Function.prototype.myBind = function (ctx) {
  var that = this,//预存this 即实际执行的那个函数 func.mybind()内部this指向func
    slice = Array.prototype.slice;//预存数组分割方法
  var outsideArg = slice.call(arguments, 1);//从第一位开始截取 
  fun.prototype.__mypro__=true;
   function fun() {
    //返回一个新的函数 实际上执行的还是外面的this即你调用bind方法的那个函数
    var insideArg = slice.call(arguments, 0);//里面函数的参数
    var contex=this.__mypro__?this:ctx;/*如果this找得到__mypro__说明是new执行无需改变this*/
    return that.apply(contex,outsideArg.concat(insideArg)/*将内外参数连接起来*/);
  }; 
  return fun;
}

经过测试新封装的myBind方法跟原来的bind方法功能一致 myBind方法封装成功

如要转载请注明出处谢谢

javascript bind 方法封装

javascript bind 方法封装

猜你喜欢