DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 關於JS中的apply,call,bind的深入解析
關於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的深入解析就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved