JavaScript改变this指向apply、call和bind方法

apply方法

apply方法用于改变this的指向

apply的使用语法:

函数名字.apply(对象,[参数1,参数2,…]);
方法名字.apply(对象,[参数1,参数2,…]);
apply方法是以数组的方式传递参数

// 获取按钮
		var btn=document.querySelectorAll(".btn");
		// 使用apply方法,改变Array中forEach方法的指向,循环遍历解析按钮注册点击事件
		Array.prototype.forEach.apply(btn,[function (ele) {
			addEventListener(ele,"click",clickHandle);
		}]);
		
		//定义一个函数
		function fn(x,y) {
				console.log("我是window对象的方法:"+(x+y)+this.sex);
			}
			
			window.fn(50,60);
			
			//创建一个对象
			var obj={
				age:10,
				sex:"男"
			};
			
			window.fn.apply(obj,[10,20]);//30男

无论是系统构造函数的方法,还是自己定义的函数方法,都可以通过apply方法来改变this的指向

call方法

call的使用语法:

函数名字.call(对象,参数1,参数2,…);
方法名字.call(对象,参数1,参数2,…);
call方法是以字符串形式传递参数

// 获取所有的点赞标签
var praise=document.querySelectorAll(".praise");
// 使用call方法,改变Array中forEach方法的指向,遍历点赞标签,注册点击事件
Array.prototype.forEach.call(praise,(function (ele) {
	addEventListener(ele,"click",praHandle);
}));

function fn(x,y) {
				console.log("我是window对象的方法:"+(x+y)+this.sex);
			}
			
			window.fn(50,60);
			
			//创建一个对象
			var obj={
				age:10,
				sex:"男"
			};
			
			window.fn.call(obj,10,50);//60男

无论是系统构造函数的方法,还是自己定义的函数方法,都可以通过call方法来改变this的指向

bind方法

bind方法是复制的意思,参数可以在复制的时候传进去,也可以在复制之后调用的时候传入进去
apply和call是调用的时候改变this指向
bind方法,是赋值一份的时候,改变了this的指向

			// 人的构造函数
			function Person(age) {
				this.age=age;
			}
			// 添加原型方法
			Person.prototype.play=function () {
				console.log(this+"====>"+this.age);
			};
			// 学生的构造函数
			function Student(age) {
				this.age=age;
			}
			
			//实例化对象
			var per=new Person(60);
			var stu=new Student(80);
			
			//通过bind方法赋值一份
			var ff=per.play.bind(stu);
			ff();
  • bind是用来复制一份

使用的语法:

函数名字.bind(对象,参数1,参数2,…);---->返回值是复制之后的这个函数
方法名字.bind(对象,参数1,参数2,…);---->返回值是复制之后的这个方法

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值