JavaScript中的call(),apply(),bind()方法 关于this指向

时间:2023-01-01 09:33:19

引例:

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


1.call()

var a = {
user:"yao",
fn:function () {
console.log(this.user);
}
};
var b = a.fn;
b.call(a);//yao
通过call()的第一个参数,将b添加到第一个参数的环境中,是的this指向b。

ps:
call()还可以添加其他参数,

var a = {
user:"yao",
fn:function (e,ee) {
console.log(this.user);//yao
console.log(e + ee);//3
}
};
var b = a.fn;
b.call(a,1,2);

2.apply()类似,只是第二个参数必须是数组。

注意:

若call()、apply()第一个参数是null,this指向是window


3.bind()

bind的方法和call()、apply()的方法不同,但是其实可以改变this的指向。

var a = {
user:"yao",
fn:function () {
console.log(this.user);
}
};
var b = a.fn;
b.bind(a);
并没有打印,。。。此时,bind返回的是修改后的对象。

var a = {
user:"yao",
fn:function () {
console.log(this.user);
}
};
var b = a.fn;
var c = b.bind(a);
console.log(c);//function(){console.log(this.user)}

var a = {
user:"yao",
fn:function () {
console.log(this.user);
}
};
var b = a.fn;
var c = b.bind(a);
c();//yao

注意:bind()也可以添加参数

var a = {
user:"yao",
fn:function (d,e,f) {
console.log(this.user);//yao
console.log(d,e,f);//10 1 2
}
};
var b = a.fn;
var c = b.bind(a,10);
c(1,2);