what’s the deference between apply bind call?

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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);

就能列印出來了。


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

相關文章

前端開發 最新文章