当前位置:网站首页>call,apply,bind指定函数的this指向详解,功能细节,严格和非严格模式下设定this指向
call,apply,bind指定函数的this指向详解,功能细节,严格和非严格模式下设定this指向
2022-08-10 23:22:00 【勇敢*牛牛】
function fn(a,b){
console.log("aaa");
}
1、call、apply会执行函数
fn.call();
fn.apply();
2、call、apply执行函数的时候将函数里的this改变为带入的第一个参数
var o={
a:1};
fn.call(o);
fn.apply(o);
3、call,调用是第一个参数是替代函数中this的指向,第二个参数开始是原函数中所有参数顺序填入
apply一共就有两个参数,第一个参数时替代函数中this的指向,第二个参数是一个数组,里面时所有向原函数中传入的参数
fn.call(o,1,2);
fn.apply(o,[1,2]);
function sum(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
var s= sum(1,2,3,4,5,6,7);
console.log(s)
var arr=[1,2,3,4,5,6,7];
var s=sum.apply(null,arr);
console.log(s)
call,apply 会执行这个函数
4、回调函数是滞后执行的,但是call,apply会立即执行函数
回调函数想要改变this指向不能使用call和apply
setInterval(fn.call(o),1000);
5、bind 在执行函数之前,先使用bind绑定函数中的this指向,并且返回一个新
的函数
这个函数的内容与原函数内容一样,但是其中this被改变指向为bind绑定的对象,因为bind不会立即执行,所以可以改变回调函数的this指向
function abc(a,b,c,d){
console.log(a,b,c,d);
}
var f=abc.bind(null,1,2);
f(3,4);
f(5,6)
事件函数使用bind需要注意这个绑定后会返回一个新的函数
var o={
b:1,
a:function(){
this.handler = this.clickhandler.bind(this);
document.addEventListener("click",this.handler);
},
clickhandler:function(e){
console.log("被点击了");
console.log(this);
document.removeEventListener("click",this.handler);
}
}
o.a();
bind还具备优先将前多少为参数带入
在后续的执行该新函数时,不需要重新带入这两个参数,后续带入的参数则按原位数参数后的位置带入
bind是es5的属性,箭头函数是es6的,所以不能在箭头函数上使用这个。
//一种写法
function fn(a,b,c,d){
console.log(this,a,b,c,d)
}
fn.bind({
a:1},1,2)(3,4);
如果给入call和apply,bind的指向this对象不是对象,会发生什么
var o={
a:1,
b:function(){
console.log(this)
}
}
非严格模式时
fn.call(1);//this指向对象1 所有数值,字符串,布尔值都会被转换为相对于的对象类型,然后this指向这个对象类型
o.b.call(undefined);//this指向window 参数为undefined或者不填的时候this指向window
o.b.call(null);//this指向window 参数为null的时候this指向window
o.b();//this就是o
严格模式时
使用严格模式时,call,apply、bind调用带入什么参数时,this就指向这个参数
o.b.call(1);
o.b.call();
o.b.call(null)
var f=o.b.bind(null);
f();
边栏推荐
猜你喜欢
随机推荐
二叉树 | 对称二叉树、相同的树、子树相同 | leecode刷题笔记
一条SQL查询语句是如何执行的?
大厂面试热点:“热修复机制及常见的几个框架介绍”
数学建模准备知识
解析方法的参数列表(包含参数名称)
高精度乘法
GoldenGate中使用 exp/imp 进行初始化
如何利用fiddler连接手机抓包APP
带你造轮子,自定义一个随意拖拽可吸边的View
Blue Hat Cup 2022 web/misc writeup
二叉树 | 代码随想录学习笔记
Mysql之部分表主从搭建及新增表
Flink(Pometheus监控)
[MySQL] Using join buffer (Block Nested Loop) in left join due to character set in mysql
DASCTF X SU 2022 writeup
HGAME 2022 Final writeup
6.0深入理解MySQL事务隔离级别与锁机制
使用方便、易于集成、可扩展的用于物流运输行业的文档管理软件
Kubernetes 选举机制HA
互联网中不可缺失的网络优化:“App与Server的交互依赖于网络”