what's the deference between apply bind call?

yintaolaowanzi 發布于2019-08-21 16:51 / 1689人閱讀

摘要：彈出的就是，歲。值得注意的是，和都是改變上下文中的并立即執行這個函數，方法改變了指向之后會返回一個函數，可以隨時調用。和作用完全一樣，只是傳參的方式不一樣。以上，有錯希望各位大神斧正。

apply bind call
這三個方法，作用都是改變當前使用該方法的對象的this指向。
但三個方法還是有一些區別，先說說共同點。

window.person = {
    name: "mice",
    age: "22"
}
var another = {
    name: "henry",
    age: "23"
}
function say() {
    alert(this.name +"",+ this.age + "歲");
}

這個時候的this指向window，所以執行彈出的就是mice，22歲。與say.call(window)效果一樣。

say.call(another);
或者
say.apply(another);
或者
say.bind(another)();

執行之后this的指向就變成了another。彈出的就是henry，23歲。
值得注意的是，call和apply都是改變上下文中的this并立即執行這個函數，bind方法改變了指向之后會返回一個函數，可以隨時調用。call和apply作用完全一樣，只是傳參的方式不一樣。

傳參方式：
call(thisObj，arg1，arg2...)
apply(thisObj，[obj1,obj2...])
bind(thisObj，arg1，arg2...)

知道了三者的區別，那么簡單說下這三個方法的實際作用。
比如

function fruits(){};
fruits.prototype = {
    color: "red",
    say: function(){
        console.log("My color is " + this.color);
    }
}
var apple = new fruits();
apple.say();

此時會打印出My color is red
但是現在我們有另一個對象banana

banana = {
    color: "yellow"
}

我們需要調用apple里的say方法，但是我們不想重新定義，
所以我們可改變apple的指向

apple.say.call(banana);

此時會打印出My color is yellow

再比如

var a = {
    user: "wgf",
    fn: function(){
        console.log(this.user);
    }
}
var b = a.fn;
b();

此時打印出來的是undefined
因為此時this指向的是b,b沒有user的屬性
所以此時改為

b.call(a);

就能打印出來了。

以上，有錯希望各位大神斧正。

云服務器 GPU云服務器 JS中bind、call和apply的作 apply與call的區別 js中的call和apply sdp for the webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88814.html

《You Don&#039;t Know JS》閱讀理解——this

摘要：運行規則根據的運作原理，我們可以看到，的值和調用棧通過哪些函數的調用運行到調用當前函數的過程以及如何被調用有關。 1. this的誕生假設我們有一個speak函數，通過this的運行機制，當使用不同的方法調用它時，我們可以靈活的輸出不同的name。 var me = {name: me}; function speak() { console.log(this.name); }...

tianren124 2019-08-20 14:50 評論0 收藏0
Brief introduction of how to &#039;Call, Apply and

摘要：關于在絕大多數情況下，函數的調用方式決定了的值。不能在執行期間被賦值，并且在每次函數被調用時的值也可能會不同。它們除了參數略有不同，其功能完全一樣。它們的第一個參數都為將要指向的對象。關于 this 在絕大多數情況下，函數的調用方式決定了this的值。this不能在執行期間被賦值，并且在每次函數被調用時this的值也可能會不同。全局 this window.something = ...

incredible 2019-08-23 15:24 評論0 收藏0
【Change Detection系列一】$digest 在Angular新版本中重生

摘要：感謝您的閱讀如果喜歡這篇文章請點贊。它對我意義重大，它能幫助其他人看到這篇文章。對于更高級的文章，你可以在或上跟隨我。 I’ve worked with Angular.js for a few years and despite the widespread criticism I think this is a fantastic framework. I’ve started w...

legendaryedu 2019-08-21 17:59 評論0 收藏0
JS &#039;嚴格模式&#039;

摘要：一篇簡單的探索，這個嚴格模式出來很早了，很多人都有寫過，而且官方文檔很詳細。原文鏈接：乖小鬼的簡書為什么想到寫這么一篇文章呢，來源在于回答一個 SG上面的問題。那么問題是這樣子的。 var a = 2; function foo(){ console.log(this.a);} foo(); 以上代碼，執行的結果是什么？？如果你回答是2，那么對了多少？只能說對了一半，為什么...

sunnyxd 2019-08-19 17:12 評論0 收藏0