bind(),call()和applay()的用法

  1. 每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法:call()方法和apply()方法。

  2. 相同點(diǎn):這兩個(gè)方法的作用是一樣的。
    3.改變this的指向
    4.繼承別的函數(shù)中的實(shí)例(對(duì)象冒充)
    <script>
    window.color = 'green';
    document.color = 'yellow';

     var s1 = {color: 'blue' };
     function changeColor(){
         console.log(this.color);
     }
    
     changeColor.call();         //green (默認(rèn)傳遞參數(shù))
     changeColor.call(window);   //green
     changeColor.call(document); //yellow
     changeColor.call(this);     //green
     changeColor.call(s1);       //blue
    

    </script>

    //例2
    var Pet = {
    words : '...',
    speak : function (say) {
    console.log(say + ''+ this.words)
    }
    }
    Pet.speak('Speak'); // 結(jié)果:Speak...

    var Dog = {
    words:'Wang'
    }

    //將this的指向改變成了Dog
    Pet.speak.call(Dog, 'Speak'); //結(jié)果: SpeakWang

apply()方法使用示例:
//例1
<script>
window.number = 'one';
html.number = 'two';

    var qq = {number: 'three' };
    function changeColor(){
        console.log(this.number);
    }

    changeColor.apply();         //one (默認(rèn)傳參)
    changeColor.apply(window);   //one
    changeColor.apply(html); //two
    changeColor.apply(this);     //one
    changeColor.apply(qq);       //three

</script>

//例2
function Pet(words){
    this.words = words;
    this.speak = function () {
        console.log( this.words)
    }
}
function Dog(words){
    //Pet.call(this, words); //結(jié)果: Wang
   Pet.apply(this, arguments); //結(jié)果: Wang
}
var dog = new Dog('Wang');
dog.speak();

call與apply的區(qū)別
1.第一個(gè)參數(shù)相同,后面的call要逐一列舉apply放在數(shù)組中

例子1
function add(c,d){
return this.a + this.b + c + d;
}

var s = {a:1, b:2};
console.log(add.call(s,3,4)); // 1+2+3+4 = 10
console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14
  1. bind()方法會(huì)創(chuàng)建一個(gè)新函數(shù),稱為綁定函數(shù),當(dāng)調(diào)用這個(gè)綁定函數(shù)時(shí),綁定函數(shù)會(huì)以創(chuàng)建它時(shí)傳入 bind()方法的第一個(gè)參數(shù)作為 this,傳入 bind() 方法的第二個(gè)以及以后的參數(shù)加上綁定函數(shù)運(yùn)行時(shí)本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來(lái)調(diào)用原函數(shù)。

var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3
當(dāng)你希望改變上下文環(huán)境之后并非立即執(zhí)行,而是回調(diào)執(zhí)行的時(shí)候,使用 bind() 方法。而 apply/call 則會(huì)立即執(zhí)行函數(shù)。

最后總結(jié):
apply 、 call 、bind 三者都是用來(lái)改變函數(shù)的this對(duì)象的指向的;
apply 、 call 、bind 三者第一個(gè)參數(shù)都是this要指向的對(duì)象,也就是想指定的上下文;
apply 、 call 、bind 三者都可以利用后續(xù)參數(shù)傳參;
bind 是返回對(duì)應(yīng)函數(shù),便于稍后調(diào)用;apply 、call 則是立即調(diào)用 。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • //Clojure入門教程: Clojure – Functional Programming for the J...
    葡萄喃喃囈語(yǔ)閱讀 4,036評(píng)論 0 7
  • call,apply詳解 javascript中,call和apply方法的用途是為了擴(kuò)充函數(shù)賴以生存的作用域,通...
    小興nice閱讀 4,735評(píng)論 2 21
  • 單例模式 適用場(chǎng)景:可能會(huì)在場(chǎng)景中使用到對(duì)象,但只有一個(gè)實(shí)例,加載時(shí)并不主動(dòng)創(chuàng)建,需要時(shí)才創(chuàng)建 最常見的單例模式,...
    Obeing閱讀 2,311評(píng)論 1 10
  • 第一章: JS簡(jiǎn)介 從當(dāng)初簡(jiǎn)單的語(yǔ)言,變成了現(xiàn)在能夠處理復(fù)雜計(jì)算和交互,擁有閉包、匿名函數(shù), 甚至元編程等...
    LaBaby_閱讀 1,756評(píng)論 0 6
  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,674評(píng)論 0 4

友情鏈接更多精彩內(nèi)容