bind函数的作用、应用场景、仿真实现

bind函数bind函数挂在Function的原型上。Function.prototype.bind创建的函数可以直接调用bind，使用：functionfunc(){console.log(this)}func.bind();//使用一个函数来调用bind的函数：调用bind()方法后会创建一个新的函数。当这个新函数被调用时，bind()的第一个参数会是新函数运行时this的值，后面的序列参数会在实际参数传递之前作为新函数的参数传入。bind接收的参数func.bind(thisArg[,arg1,arg2...argN])第一个参数thisArg，当调用func函数时，这个参数会作为func函数执行时的this点跑步。当使用new运算符调用绑定函数时，此参数无效。[,arg1,arg2...argN]作为参数传递给func函数。绑定返回值返回一个新函数。注意：这不同于改变this指针的函数调用call/apply。调用call/apply会直接执行原来的函数。例如：functionfunc(){console.log(this)}//使用callfunc.call({a:1});//func函数被执行，打印：{a:1}//使用bindletnewFunc=func.bind({});//返回新函数newFunc();//只有返回的新函数执行时，才会执行func函数将函数的this点改成传入参数，深入bind的使用。bind函数的作用和用法上面已经知道了。接下来我们将深入bind函数的使用，详细介绍三个方面的使用。这也是后面模拟实现bind函数的要点。当函数运行时，this指向作为构造函数传递参数返回的新函数。当函数改为run时，this指向。调用bind函数时，bind函数的第一个参数是原函数作用域内this指向的值。函数func(){console.log(this);}letnewFunc=func.bind({a:1});newFunc();//打印：{a:1}letnewFunc2=func.bind([1,2,3]);newFunc2();//打印：[1,2,3]letnewFunc3=func.bind(1);newFunc3();//打印：数字：{1}letnewFunc4=func.bind(undefined/null);newFunc4();//上面的print:window需要注意的是，当传入null或者undefined时，在非严格模式下，this指向window。当传入一个简单值时，内部会将该简单值打包成一个对应类型的对象。数字将使用Number方法进行打包；字符串会用String方法打包；true/false将与Boolean方法一起打包。要获取原始值，可以调用valueOf方法。数字（1）.valueOf（）；//1String("你好").valueOf();//helloBoolean(true).valueOf();//true多次调用bind函数时，第一次调用bind函数时，函数改变了this指向的值。functionfunc(){console.log(this);}letnewFunc=func.bind({a:1}).bind(1).bind(['a','b','c']);newFunc();//打印：{a:1}传递的参数从bind的第二个参数开始，也就是传递给原函数的实参。调用bind返回的新函数时，也可以将实参传递给原函数，这里涉及到顺序问题。函数func(a,b,c){console.log(a,b,c);//打印实际传入的参数}letnewFunc=func.bind({},1,2);newFunc(3)print结果为1,2,3可见bind传入的参数一定是先传入原函数。返回的新函数被视为构造函数调用绑定函数后返回的新函数，也可以被视为构造函数。新函数创建的实例可以在原函数的原型上找到。//原始函数functionfunc(name){console.log(this);//print:pass{name:'wy'}this.name=name;}func.prototype.hello=function(){console.log(this.name)}letobj={a:1}//调用绑定并返回一个新函数letnewFunc=func.bind(obj);//使用新函数作为构造函数来创建一个实例leto=newnewFunc('seven');console.log(o.hello());//打印：'七'console.log(obj);//print:{a:1}newfunction被视为构造函数，原函数functhis不再指向传递给bind的第一个参数，而是指向new创建的实例。通过实例o查找原型上的方法hello时，可以找到原函数func原型上的方法。在bind的模拟实现中，要特别注意这部分的实现，这也是面试的重点，会涉及到继承。以上只是对如何使用绑定功能的说明。学会了如何使用之后，我们需要将它放到业务场景中去解决一些实际问题。场景一先自带布局：