call()apply()和bind()的异同

要须心地收汗马,孔孟行世目杲杲。这篇文章主要讲述call()apply()和bind()的异同相关的知识,希望能为你提供帮助。
相同点:
改变this的指向;

var a = { name:"丸子", fn:function(){ console.log(this.name); } } var b = a.fn; b()//undefined b.call(a); //丸子 b.apply(a); //丸子 b.bind(a); //没有被打印

 
不同点:
【call()apply()和bind()的异同】1,call和apply都是立即执行,而bind则是返回一个函数;
var a = { name:"丸子", fn:function(){ console.log(this.name); } } var b = a.fn; b.bind(a)//没有被打印var c = b.bind(a) console.log(c); //function (){ //console.log(this.name); //}c(); //丸子

 
2,如果call和apply的第一个参数写的是null,那么this指向的是window对象;
var a = { name:"丸子", fn:function(){ console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…} } } var b = a.fn; b()//this指向的是window对象 b.call(null); //this指向的是window对象 b.apply(null); //this指向的是window对象 b.bind(null)//没有被打印

 
3,参数;
(1),call和apply可以有多个参数,不同的是apply第二个参数必须是一个数组;
var a = { name:"丸子", fn:function(m,n){ console.log(this.name); console.log(m+n); } } var b = a.fn; b.call(a,6,6) // 丸子 // 12b.apply(a,[6,4]); // 丸子 // 10

 
(2),同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。
var a = { name:"丸子", fn:function(m,n){ console.log(this.name); console.log(m+n); } } var b = a.fn; b.bind(a)//没有被打印var c = b.bind(a,2) console.log(c); //function (m,n){ //console.log(this.name); //console.log(m+n); //}c(3); //丸子 //5

 

    推荐阅读