call、apply、bind区别

最新推荐文章于 2024-04-19 11:37:34 发布

xiao xu

最新推荐文章于 2024-04-19 11:37:34 发布

阅读量711

点赞数

分类专栏：前端文章标签： call、apply、bind区别 bind之后再次绑定this失效 call、apply、bind经典例题详解

本文链接：https://blog.youkuaiyun.com/weixin_42420703/article/details/82790994

版权

前端专栏收录该内容

44 篇文章

订阅专栏

本文详细解析JavaScript中this的指向问题，及call,apply,bind三个方法的区别与应用。通过实例演示如何使用这些方法改变函数内部this的指向，以及它们在参数传递上的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

call,apply,bind都是为了改变函数体内this的指向，但三者都有所不同。

call，apply，bind的第一个参数都是this要指向的对象，
bind是返回对应函数，便于稍后调用，call与apply是立即调用

var obj={
    name:'xiaoxu',
    say:function (){
        console.log(this.name);
    }
}
var temp={
	name:'andy'
}
obj.say(); //xiaoxu
obj.say.call(temp); //andy
obj.say.apply(temp); //andy
obj.say.bind(temp)(); //andy

call传递参数是按顺序传入，apply是把参数放入数组中
call(this指向的对象,参数1,参数2,参数3…);
apply(this指向的对象，[参数1,参数2,参数3…]);

例题分析：
在这里插入图片描述

foo();//false,全局作用域下，this指向window，明显this!=bar
foo.apply(bar);//true,将this指向bar，
const b=foo.bind({});//foo将this指向一个空对象{}
b();//bar也是空对象，可是与this的空对象不是同一个引用
b.apply(bar);//false

为什么最后一个会是false呢？明明将this绑定成了bar，应该返回true才对啊。
这里需要了解一下bind的原理：
Function.prototype.bind=function (obj){
	var that=this;
	return function(){
		that.apply(obj,arguments);
	}
}
bind是返回一个函数，函数中使用apply，将this绑定为bind中传入的参数，这里返回的函数中，已经固定将this绑定为obj了，后面再次进行this绑定都会失效！
所以：
b=foo.bind({});我们先对foo进行了bind操作，再进行b.apply(bar);这是没有用的，this还是指向了{}，所以返回值是false