JavaScript中bind方法的使用

57 阅读 0 评论 38 点赞

我是靠谱客的博主酷酷方盒，最近开发中收集的这篇文章主要介绍JavaScript中bind方法的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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不会有任何作用了