文章目录
- 前言
- 一、new关键字改变this指向
- 二、 call()
- 三、apply()
- 四 、bind()
- 五、总结
前言
修改 this 指向,四种方法
一、new关键字改变this指向
//构造函数版this
function Fn(){this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子
二、 call()
var a = {user:"追梦子",fn:function(){console.log(this.user); //追梦子}
}
var b = a.fn;
b.call(a); //若不用call,则b()执行后this指的是Window对象
call方法除了第一个参数以外还可以添加多个参数
var a = {user:"追梦子",fn:function(e,ee){console.log(this.user); //追梦子console.log(e+ee); //3}
}
var b = a.fn;
b.call(a,1,2);
三、apply()
var a = {user:"追梦子",fn:function(){console.log(this.user); //追梦子}
}
var b = a.fn;
b.apply(a);
apply方法和call方法有些相似,它也可以改变this的指向,也可以有多个参数,但是不同的是,第二个参数必须是一个数组
var a = {user:"追梦子",fn:function(e,ee){console.log(this.user); //追梦子console.log(e+ee); //11}
}
var b = a.fn;
b.apply(a,[10,1]);
//注意如果call和apply的第一个参数写的是null,那么this指向的是window对象
var a = {user:"追梦子",fn:function(){console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}}
}
var b = a.fn;
b.apply(null);
四 、bind()
var a = {user:"追梦子",fn:function(){console.log(this.user);}
}
var b = a.fn;
b.bind(a); //代码没有被打印
我们发现代码没有被打印,对,这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数
var a = {user:"追梦子",fn:function(){console.log(this.user); //追梦子}
}
var b = a.fn;
var c = b.bind(a);
c();
五、总结
区别:
call和apply都是改变上下文中的this并立即执行这个函数
bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别
call()、bind()、apply()的用法,改变this的指向,区别在于
f.call(obj, arg1, arg2…),
f.bind(obj, arg1, arg2,…)(),
f.apply(obj, [arg1, arg2, .])