欧宝体育

函数绑定方式bind的自定义实现过程

现在的场景是这样的，我有一个对象，我在点击按键时要调用该对象的外置方式来输出详尽信息，于是代码如下:

    

        click me
    

输出的结果却是：

1.png

原因是bind函数小于零，此时的this对象指向的是该按键而并非student对象。为了能使this指向student对象，我们须要做的就是去保存student对象的执行环境，这里想到的第一个方式就是闭包。

所以修改完的代码如下：

var student = {
       name:"xm",
       school:"SUFE",
       SysInfo:function(event){
           console.log('姓名为--',this.name,'  学校为---',this.school)
       }
   }
   var btn = document.querySelector('#btn')
   btn.addEventListener('click',function(event){
      student.SysInfo()
// return student.SysInfo()
   })

这样一来就可以领到值了。

2.png

但是还有另一个方式，就是使用函数绑定去bind函数小于零，可以将函数绑定到指定的执行环境当中。

bind()函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数。

function bind(fn,context){
      return function{
            return fn.call(context,args)
}

function bind(fn,context){
      return function(){
            return fn.apply(context,arguments)
        }
   }
   var student = {
       name:"xm",
       school:"SUFE",
       SysInfo:function(event){
           console.log('姓名为--',this.name,'  学校为---',this.school)
       }
   }
   var btn = document.querySelector('#btn')
   btn.addEventListener('click',bind(student.SysInfo,student))

注意，这里的arguments不是一个参数，而是js中的一个类字段对象，用来接受传递参数的，并且这儿的arguments对应的是student的方式Sysinfo的参数列表。

最终结果如下：

3.png

可以看见成功调用了技巧。

在ES5，之后有一个原生的bind方式可供使用，具体使用方法如下：

student.SysInfo.bind(student)

只要将sutdent对象的地址传递进去即可。