js中call,apply和bind方法的區別和使用場景

原文地址：https://blog.csdn.net/yaojxing/article/details/71942496

 

一、call，apply和bind方法的來歷

     在js中所有的函式都是Function的例項，而且對於Function來說，它的原型即Function.prototype中含有很多東西，其中call,apply和bind方法就是Function原型中的方法，所以根據原型的規則，所有的函式都可以使用原型中屬性和方法，所以來說，對於所有的函式都可以使用call，apply和bind方法。

     簡單一句話：call，apply和bind都是Function原型中的方法，而所有的函式都是Function的例項。

 

二、丟擲一個概念，就是call，apply和bind方法到底有什麼作用？

    我認為它們的作用可以用一句話來描述：就是改變this的指向。或者說 強行用其他物件來呼叫一個函式。

除此之外還能在構造方法有中屬性和函式的繼承體現

 

三.結合程式碼理解改變this的指向的含義

		function show(sex){
			console.log("姓名為"+this.yourname+",性別為"+sex);

		}
		var person={
			yourname:"張三",
			age:14
		};
		show.call(person,"男");//姓名為張三,性別為男
		show("男");//姓名為undefined,性別為男
		person.show("男");//報錯

    在上面的程式碼塊中，我們可以看到person物件並沒有show方法，直接地用person.show()會報錯。但是我們可以通過call方法來實現person物件來呼叫show方法。所以這種情況我認為就是改變了this的指向。

 

四.call,apply和bind的區別

它們在功能上是沒有區別的，都是改變this的指向，它們的區別主要是在於方法的實現形式和引數傳遞上的不同

①：函式.call(物件,arg1,arg2....)

②：函式.apply(物件，[arg1,arg2,...])

③：函式.bind(物件,arg1,arg2,....)()  注：bind返回的是一個函式體，並不會直接執行函式

例項程式碼：

		function show(sex){
			console.log("姓名為"+this.yourname+",性別為"+sex);

		}
		var person={
			yourname:"張三",
			age:14
		};
		show.call(person,"男");//姓名為張三,性別為男
		show.apply(person,['女']);//姓名為張三,性別為女
		show.bind(person,"未知")();//姓名為張三,性別為未知

通過觀察上面的程式碼，很明顯的就可以得出它們三者的區別，僅僅是函式傳遞的不同以及bind方法可以更加的方便的使用。