JavaScript中bind方法的使用

最新推荐文章于 2024-09-05 08:47:24 发布

soosgo

最新推荐文章于 2024-09-05 08:47:24 发布

阅读量504

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/Doulvme/article/details/107980968

版权

Javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的bind方法，通过示例展示了如何使用bind来改变函数体内this的指向，以及如何传递参数。bind方法创建了一个新函数，在新函数执行时，this被绑定到了指定的对象，同时，额外的参数可以在调用新函数时追加传递给原函数。

摘要由CSDN通过智能技术生成

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bind</title>
	</head>
	<body>
		<button id="btn">按钮</button>
		<script type="text/javascript">
			
			//call  apply改变this指向
			var x=10;
			function show(){
				console.log(this.x);
			}
			//show();
			var obj={
				x:20
			}
			//show.call(obj);
			var newShow=show.bind(obj);//bind返回一个新的函数  返回的新函数this的指向就会改变
			newShow();
			
			//单对象编程
			var list={
				init:function(){
					this.ms="bailiban";
					this.dom=document.getElementById("btn");
					this.bindEvent();
				},
				bindEvent:function(){
					//this.dom.onclick=this.showMessage;
					this.dom.onclick=this.showMessage.bind(this);
				},
				showMessage:function(){
					console.log(this.ms);
					console.log(this);
				}
			}
			list.init();
			
		</script>
		
	</body>
</html>

function A(){}
           var o={};
           var x=1;
           var y=2;
           var z=3;
           var B=A.bind(o,x,y);
           B(z);
           总结:
           1.函数A调用bind方法时，需要传递参数o,x,y
           2.返回新的函数B
           3.B在执行的时候，具体的功能实际函数使用的A，只不过this指向变成了o
           4.函数B 在执行的时候，传递参数，会拼接到x,y后面，并在内部传递给A执行
           5.new B()构造函数依旧是A，而且o不会有任何作用了