前置知識 this用法、this原理

call的理解

call 用于改變函數體內this指向，也就是說改變了調用函數的對象

栗子1

var obj = {
    name:'CCC'
}

function getName(a,b,c){
    console.log(this.name);
    console.log(this);
    console.log(arguments);
}

getName.call(obj,'參數a','參數b','參數c');

栗子2

[].push(1)

push這個函數的this指向的是這個[]對象,函數push操作的也是這個[]對象

var changeThis = [1,2,3]

[].push.call(changeThis,4,5,6)

console.log(changeThis) //[1,2,3,4,5,6]

push這個函數的this指向的是這個changeThis對象,函數push操作的也是這個changeThis對象

解釋

栗子1中的getName.call(obj,'參數a','參數b','參數c'),相當于

var obj = {
    name:'ccc',
    getName:function(a,b,c){
        console.log(this.name);
        console.log(this);
        console.log(arguments);
    }
}
obj.getName('參數a','參數b','參數c')

obj調用了getName函數

栗子2中的[].push.apply(changeThis,[4,5,6]),相當于

var changeThis = [1,2,3]

changeThis.push(4,5,6)

call,apply,bind 區別

var obj = {
    name:'ccc'
}

function getName(a,b,c){
    console.log(this.name);
    console.log(this);
    console.log(arguments);
}


//obj調用了getName這個函數,函數getName的this指向了obj這個對象,傳參是以a,b,c這種形式----即刻調用
getName.call(obj,'參數a','參數b','參數c');

//obj調用了getName這個函數,函數getName的this指向了obj這個對象,傳參是以[a,b,c]這種形式----即刻調用
getName.apply(obj,['參數a','參數b','參數c']);

//先拿到這個函數,函數getName的this指向了obj這個對象
var newGetName = getName.bind(obj)
//需要的時候再調用
newGetName('參數a','參數b','參數c')

GitHub

:book:《web_knowledge_hierarchy》

參考文章

阮一峰——《Javascript 的 this 用法》