三、JavaScript——call() apply() bin

前置知识 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 区别

函数	参数1	参数2	说明
call	thisArg	arg1,arg2,...	即刻调用
apply	thisArg	[argsArray]	即刻调用
bind	thisArg	-	只是生成这个函数

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 用法》