javascript內call()、apply()、bind()方法的作用

1.call()、apply()、bind()這三個方法均可改變this的指向

可以看下面的例子：

var name = '小王',age= 16;
var obj = {
	name: '小張',
	objAge: this.age,
	myFun: function(){
		return this.name+"年齡"+this.age;
	}
}
var db = {
	name: '小明',
	age: 22
}
console.log(obj.objAge);   //16
console.log(obj.myFun());  // 小張年齡undefined
console.log(obj.myFun.call(db));　　　　//小明年齡22
console.log(obj.myFun.apply(db));　　　 //小明年齡22
console.log(obj.myFun.bind(db)());　　　//小明年齡22

可以看到，在未添加這三個方法前：obj內年齡屬性沒有值，this指向的是obj，因爲obj沒有值，所以是undefined。

在添加了三個方法後，可以看到獲取數據的指向均發生改變。

2.call 、bind 、 apply 傳參情況

var obj = {
	name: '小張',
	objAge: this.age,
	myFun: function(fm, to){
		return this.name+"年齡"+this.age ,"來自"+fm + "去往"+to;
	}
}
var db = {
	name: '小明',
	age: 22
}
console.log(obj.myFun.call(db,'成都','上海'));　　　　 //小明 年齡 22  來自 成都去往上海
console.log(obj.myFun.apply(db,['成都','上海']));        //小明 年齡 22  來自 成都去往上海  
console.log(obj.myFun.bind(db,'成都','上海')());         //小明 年齡 22  來自 成都去往上海
console.log(obj.myFun.bind(db,['成都','上海'])());　　 //小明 年齡 22  來自 成都,上海去往undefined

 

從上面四個結果不難看出

　　　　call 、bind 、 apply 這三個函數的第一個參數都是 this 的指向對象，第二個參數差別就來了：

　　　　call的參數是直接放進去的，第二第三第n個參數全都用逗號分隔，直接放到後面  obj.myFun.call(db,'成都', ... ,'string' )；

　　　　apply的所有參數都必須放在一個數組裏面傳進去  obj.myFun.apply(db,['成都', ..., 'string' ]);

　　　　bind除了返回是函數以外，它 的參數和call 一樣。

　　　　

　　　　當然，三者的參數不限定是string類型，允許是各種類型，包括函數 、 object 等等！

 

bind()方法

this.name="jack";
var demo={
	name:"rose",
	getName:function(){return this.name;}
}
 
console.log(demo.getName());//輸出rose 這裏的this指向demo
 
var another=demo.getName;
console.log(another())//輸出jack 這裏的this指向全局對象
  
//運用bind方法更改this指向
var another2=another.bind(demo);
console.log(another2());//輸出rose 這裏this指向了demo對象了

js bind的多次綁定只有第一次是有效的

var getname = function(){console.log(this.name)};
var m = getname.bind({name:'q1'}).bind({name:'q2'});
m();   // q1

 

 

 

 

參考：javascript中call()、apply()、bind()的用法終於理解

          淺談js中的bind