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

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

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

    

        click me
    

输出的结果却是：

1.png

原因是，此时的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()函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数。

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对象的地址传递进去即可。