call ,apply 和 bind的用法与区别
作用都是一样的,官方解释:“调用一个对象的一个方法,以另一个对象替换当前对象”, 简单来说就是改变当前使用该方法的对象中的this指向;
var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " , " + this.gender + " ,今年" + this.age); } } var xh = { name : "小红", gender : "女", age : 12 } xw.say.call(xh);//小红,女,今年12 xw.say.apply(xh);//小红,女,今年12 xw.say.bind(xh);//function(){alert(this.name+","+this.gender+",今年"+this.age);
xw.say.bind(xh)();//小红,女,今年12
call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。
var xw = { name : "小王", gender : "男", age : 24, say : function(school,grade) { alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade); } } var xh = { name : "小红", gender : "女", age : 12 }
xw.say.call(xh,"实验小学","六年级");//小红,女,今年12,在实验小学上六年级
xw.say.apply(xh,["实验小学","六年级"]);//小红,女,今年12,在实验小学上六年级
xw.say.bind(xh,"实验小学","六年级");//function(){alert(this.name+","+this.gender+",今年"+this.age+",在"+school+"上"+grade);
xw.say.bind(xh,"实验小学","六年级")();//小红,女,今年12,在实验小学上六年级
xw.say.bind(xh)("实验小学","六年级");//小红女今年12在实验小学上六年级 在调用的时候再进行传参
第一个参数添加要把参数添加到哪个环境中,简单来说,this就会指向那个对象。apply的第二个参数必须是一个数组;
call和apply都是改变this并立即执行这个函数,bind方法可以让对应的函数想什么时候调用就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别
特殊用法:
function A(a){ console.log(a); }; function AA(a){ A.apply(this, arguments); } AA("output in AA"); //output in AA this指A,arguments指a,也就是传入的参数
var a = { user:"追梦子", fn:function(){ console.log(this);//Window {external: Object, chrome: Object, document: document, g_blnCheckUnload: true, blogEditor: Object…} } } var b = a.fn; b.apply(null);
注意:如果call和apply的第一个参数写的是null,那么this指向的是window对象