call，apply，bind三种改变this指向的方式

最新推荐文章于 2022-10-08 11:49:38 发布

@光影@

最新推荐文章于 2022-10-08 11:49:38 发布

阅读量301

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_33718889/article/details/115304475

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

call、apply与bind都用于改变this绑定：但call、apply在改变this指向的同时还会执行函数，而bind在改变this后是返回一个全新的boundFunction绑定函数不会执行。
bind属于硬绑定：返回的boundFunction的this指向无法再次通过bind、apply或call修改，call与apply的绑定只适用当前调用，调用完就没了，下次要用还得再次绑。
call与apply功能完全相同：唯一不同的是call方法传递函数调用形参是以散列形式，而apply方法的形参是一个数组（在传参的情况下，call的性能要高于apply，因为apply在执行时还要多一步解析数组）。

代码如下（可直接运行）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>call，apply，bind</title>
</head>
<body>
  <script>
   /*  
	 call  改变this指向，自动执行函数，传入参数（个数多个）
	 apply 改变this指向，自动执行函数，只能传入一个参数（参数类型为：数组）
	 bind  改变this指向，不会自动执行函数，加上 () 执行,传入参数（个数多个）
*/
    var obj1 ={
	  name:"obj1",
	  getName:function(){
	  	 // arguments是参数
		 console.log("obj1 =>",this.name,arguments);
	  }
	}
	var obj2 ={
      name:"obj2",
	  getName:function(){
		 console.log("obj2 =>",this.name);
	  }
	}
	obj1.getName.call(obj2,1,2);     // obj1 => obj2
	obj1.getName.apply(obj2,[3,4]);  // obj1 => obj2
	obj1.getName.bind(obj2)(5,6);    // obj1 => obj2
	
	// 返回的是 ƒ(){console.log("obj1 =>",this.name,arguments);}
	console.log("bind =>", obj1.getName.bind(obj2));
  </script>
</body>
</html>

@光影@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
call，apply，bind三种改变this指向的方式

call、apply与bind都用于改变this绑定：但call、apply在改变this指向的同时还会执行函数，而bind在改变this后是返回一个全新的boundFunction绑定函数不会执行。bind属于硬绑定：返回的boundFunction的this指向无法再次通过bind、apply或call修改，call与apply的绑定只适用当前调用，调用完就没了，下次要用还得再次绑。call与apply功能完全相同：唯一不同的是call方法传递函数调用形参是以散列形式，而apply方法的形参是一个.
复制链接

扫一扫