JavaScript--this的指向及call、apply的区别

判断函数中this的指向

我们在使用函数时,常常用到this,判断不同场景下this的指向是非常重要的。在此做一个总结,方便大家学习。

函数的使用场景,基本包含如下几种场景。

  • 普通函数中的this-------window
  • 对象,方法中this------当前实例对象
  • 定时器函数中的this----window
  • 构造函数中的this------实例对象
  • 原型对象方法中的this-----实例对象

这个结果的分析其实非常简单,函数要想执行一定需要对象来调用(普通函数也一样)。

普通方法和定时器中的方法,看似没有对象来调用,他们都默认是window的方法,大家也知道在使用时,window又可以省略。

其余几种情况,不管是在对象的创建过程中,还是在对象中。这些方法最终都需要对象去调用,所以这些方法中的this都是指所在或者创建的对象。

call()、apply()的作用及区别

上边我们已经分析过函数中this的指向,也就是函数在执行时this代表的是谁。而call和apply的作用就是改变函数执行过程中this的指向,他们两个的作用完全一样,只是在使用方式上稍有差别。

以普通方法为例来分析call()的作用:

                        var name = "小明";
			function text(){
				console.log(this.name);
			}
			text();//小明

根据上边的分析,我们知道普通方法在执行时,默认为window在调用,那么在方法中this就是window。

this.name===window.name,所以输出的小明。

                        var name = "小明";
			function text(){
				console.log(this.name);
			}
			text();//小明
			var person = {
				name:"小红"
			}
			text.call(person);//小红

当要执行text方法时,我们使用了text.call(person)的方式,这时函数还是正常执行,只是此时函数中的this不管原来是谁,都变成了person,所以输出this.name就是输出person.name;

call()和apply()的区别:

函数有带参函数,call和apply的差别就是在传入参数时的方式不同。call是一个一个的传,而apply是将参数以数组为单位传入函数。还是上边的例子,我们把它改为带参函数。

                        var name = "小明";
			function text(age){
				console.log(this.name);
				console.log(age)
			}
			text(18);//小明 18
			var person = {
				name:"小红"
			}
			text.call(person,18);//小红 18
                        var name = "小明";
			function text(age){
				console.log(this.name);
				console.log(age)
			}
			text(18);//小明 18
			var person = {
				name:"小红"
			}
			text.apply(person,[18]);//小红 18

这就是call 和apply的区别,只是在传参方式不同。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值