call(),apply()和bind()详解我们知道可以使用call(),apply()和bind()来完成功能调用并将其设置为指向。call()和apply()是在ECMAScript3标准中引入的，而bind()函数是在ECMAScript5中引入的。本文将通过几个小例子来回忆一下它们之间的区别。用法call()和apply()会立即调用函数，而bind()只会返回一个函数引用。后面真正调用返回的函数时，函数中的this会指向传入bind()函数的参数，调用新函数时，将给定的参数列表作为参数序列的前几项bind()函数非常适合在事件回调时修改this点。有React经验的朋友应该有更深的理解感受。call()vardist='北京';functiongreet(name,hometown){varword=`欢迎${name}从${hometown}到${this.dist}!`console.log(word);}varobj1={dist:'Chengdu'};greet.call(obj1,"Tom","Dallas");//欢迎汤姆从达拉斯来成都！问候（“杰里”，“休斯顿”）;//欢迎Jerry从休斯敦来到北京！因为greet.call(obj)传递了obj1作为第一个参数，所以在执行greet()函数时，this指向obj1。其余参数将作为参数传递给greet()函数。不使用call()直接调用greet()时，this指向窗口object.apply()vardist='北京';functiongreet(name,hometown){varword=`Welcome${name}from${hometown}to${this.dist}!`console.log(word);}varobj1={dist:'Chengdu'};varargs=["Tom","Dallas"];greet.apply(obj1,args);//欢迎汤姆从达拉斯来成都！greet("Jerry","Houston");//欢迎Jerry从休斯敦来到北京！apply()函数与call()函数非常相似，第一个参数用于设置目标函数运行时的this点。唯一的区别是apply()的第二个参数接受一个数组，否则它的行为是一样的。bind()vardist='北京';functiongreet(name,hometown){varword=`欢迎${name}从${hometown}到${this.dist}!`;console.log(word);}varobj1={dist:'成都',};varobj2={dist:'重庆',};vargreet1=greet.bind(obj1,'Tom','Dallas');vargreet2=greet.bind(obj2,'Spike','SanAntonio');greet('Jerry','Houston');greet1();setTimeout(function(){greet2();},1000);这个例子会比较复杂，输出结果如下：欢迎Jerry从休斯敦来北京！欢迎来自达拉斯的汤姆来到成都！欢迎圣安东尼奥派克来到重庆！在上面的例子中，bind()函数并没有立即执行目标函数，而是返回函数的一个副本，但是this会指向bind()的第一个参数，其余的参数都传递给bind()将按顺序传递给返回的函数。我们可以异步调用这个函数来返回值。但是需要注意的是，当bind()方法返回的函数拷贝用于new操作时，第一个参数会被忽略。那么新的问题又出现了，如果在调用返回函数copy的时候传入一个新的参数会怎么样，只好再写一个例子试试。varobj1={dist:'Chengdu',};functiongreet(name,hometown){console.log(Array.prototype.slice.call(arguments));varword=`欢迎${name}从${hometown}到${this.dist}！`;console.log(word);}vargreet1=greet.bind(obj1,'Tom','Dallas');greet1('Jerry','Houston');输出结果是：["Tom","Dallas","Jerry","Houston"]欢迎Tom从达拉斯来成都！原来从两处传入的参数都会传给目标函数，而函数会把调用时传入的参数复制到调用bind()函数时追加到传入的参数上。以上都是call()、apply()、bind()三个函数的例子。如有任何问题，欢迎留言讨论。本文来源于bbwho.com站点
