關(guān)于JS中的apply,call,bind的深入解析

字號(hào):


    在Javascript中,F(xiàn)unction是一種對(duì)象。Function對(duì)象中的this指向決定于函數(shù)被調(diào)用的方式。使用apply,call 與 bind 均可以改變函數(shù)對(duì)象中this的指向,在說(shuō)區(qū)別之前還是先總結(jié)一下三者的相似之處:
    1、都是用來(lái)改變函數(shù)的this對(duì)象的指向的。
    2、第一個(gè)參數(shù)都是this要指向的對(duì)象。
    3、都可以利用后續(xù)參數(shù)傳參。
    call方法: 
    語(yǔ)法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
    定義:調(diào)用一個(gè)對(duì)象的一個(gè)方法,以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。 
    說(shuō)明:call 方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。 
    如果沒(méi)有提供 thisObj 參數(shù),那么 Global 對(duì)象被用作 thisObj。
    apply:
    語(yǔ)法:apply(thisObj,數(shù)組參數(shù))
    定義:應(yīng)用某一個(gè)對(duì)象的一個(gè)方法,用另一個(gè)對(duì)象替換當(dāng)前對(duì)象
    說(shuō)明:如果參數(shù)不是數(shù)組類(lèi)型的,則會(huì)報(bào)一個(gè)TypeError錯(cuò)誤。
    bind:
    在EcmaScript5中擴(kuò)展了叫bind的方法(IE6,7,8不支持),bind與call很相似,,例如,可接受的參數(shù)都分為兩部分,且第一個(gè)參數(shù)都是作為執(zhí)行時(shí)函數(shù)上下文中的this的對(duì)象。不同點(diǎn)有兩個(gè):
    ①bind的返回值是函數(shù);②后面的參數(shù)的使用也有區(qū)別;
    先看例子一:
    function add(a, b) {
      alert(a + b);
    }
    function sub(a, b) {
      alert(a - b);
    }
    對(duì)于,call,可以這么用:
    add.call(sub,3,1);結(jié)果為4
    對(duì)于,apply,可以這么用;
    add.apply(sub,[3,1]);結(jié)果為4
    對(duì)于,bind,可以這么用:
    add.bind(sub)(3,1);結(jié)果為4
    可以看到輸出結(jié)果都一樣,但是傳參用法不一樣;
    再看例子二:
    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:"學(xué)生"
    }
    var pet=new jone();
    pet.say.apply(jack,["歡迎您"])
    console.log(this.name)
    對(duì)于call,需要這樣:
    pet.say.call(jack,"歡迎您!")
    對(duì)于apply,需要這樣:
    pet.say.apply(jack,["歡迎您!"])
    對(duì)于bind,需要這樣:
    pet.say.bind(jack,"歡迎您")()
    此時(shí)輸出console.log(this.name),發(fā)現(xiàn)this.name為jack,this上下文已經(jīng)發(fā)生改變了;
    以上這篇關(guān)于JS中的apply,call,bind的深入解析就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考