關於JS中的apply,call,bind的深入解析_javascript技巧

在Javascript中，Function是一種物件。 Function物件中的this指向決定於函數被呼叫的方式。使用apply，call 與 bind 都可以改變函數物件中this的指向，在說區別之前還是先總結一下三者的相似之處：
1、都是用來改變函數的this物件的指向的。
2.第一個參數都是this要指向的物件。
3.都可以利用後續參數傳參。

call方法:

語法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定義：呼叫一個物件的一個方法，以另一個物件取代當前物件。
說明：call 方法可以用來取代另一個物件呼叫一個方法。 call 方法可將一個函數的物件上下文從初始的上下文變更為由 thisObj 指定的新物件。
如果沒有提供 thisObj 參數，那麼 Global 物件被用作 thisObj。

apply:

語法：apply(thisObj,陣列參數）
定義：應用某一個物件的一個方法，用另一個物件取代目前物件
說明：如果參數不是陣列類型的，則會報一個TypeError錯誤。

bind:

在EcmaScript5中擴展了叫bind的方法（IE6,7,8不支援），bind與call很相似,，例如，可接受的參數都分為兩部分，且第一個參數都是作為執行時函數上下文中的this的物件。不同點有兩個：
①bind的回傳值是函數;②後面的參數的使用也有差別;

先看例子一：

 

function add(a, b) {
  alert(a + b);
}
function sub(a, b) {
  alert(a - b);
}

對於，call，可以這麼用：
add.call(sub,3,1);結果為4

對於，apply，可以這麼用；
add.apply(sub,[3,1]);結果為4

對於，bind，可以這麼用:
add.bind(sub)(3,1)；結果為4

可以看到輸出結果都一樣，但是傳參用法不一樣；

再看範例二：

function jone(name,age,work){
  this.name=name;
  this.age=age;
  this.work=work;
  this.say=function(msg){
    alert(msg+"，我叫"+this.name+"，我今年"+this.age+"岁，我是"+this.work)
  }
}
var jack={
  name:"jack",
  age:'24',
  work:"学生"
}
var pet=new jone();

pet.say.apply(jack,["欢迎您"])
console.log(this.name)

對於call，需要這樣：
pet.say.call(jack,"歡迎您！")

對於apply，需要這樣：
pet.say.apply(jack,["歡迎您!"])

對於bind，需要這樣：
pet.say.bind(jack,"歡迎您")()

此時輸出console.log(this.name)，發現this.name為jack，this上下文已經改變了；

以上這篇關於JS中的apply,call,bind的深入解析就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。