一篇文章让你彻底了解javascript中this用法详解,call和apply用法详解,及真伪数组转换

**
javascript中call和apply的作用都是改变函数内部this指针的指向,从而帮助我们完成一些特定的功能,其实还挺有意思的
先来明确下this的概念,关于this的指向,大多数书中都是说,this指向的是最终调用它的对象,之前我也一直以为确实如此,直到看了一位大佬的博客,并且亲自实践了一下,才发现并不然,到底是纸上得来终觉浅,绝知此事要躬行啊,好啦,话不多说上代码
**

function f (){
			var a = "sr";
			console.log(this.a);   //undefined
			console.log(this);     //window
		}
		f();

这里,this指向的是window; f()等价于window.f()而window中并不存在a,所以是undefined
有意思,再来看个例子

var a =  {
			b:"sr",
			f:function () {
				console.log(this.b);//sr
				console.log(this);//a
			}
		}
		window.a.f();

看得出来,this指向的是a,并不是window,这与我们一开始的结论似乎有出处,别急,我们在来看一个例子


		var a = {
			b:"小瑞瑞",
			o:{
				b:"小瑞",
				f:function () {
					console.log(this.b);//小瑞
					console.log(this);//对象o
				}

			}
		}
		a.o.f();

这里的this指向的是o,看到这里,相比大家也都了解了,事实上,this的指向:
**
如果一个函数中有this,
1.但是它没有被上一级的对象所调用,那么this指向的就是window
2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象
**
看到这再来一个有意思的事儿(略略略)

var a = {
			b:"小瑞瑞",
			o:{
				b:"小瑞",
				f:function () {
					console.log(this.b);//undefined
					console.log(this);//window
				}

			}
		}
		var k = a.o.f;
		k();

wtf???这是为啥,this咋成window了,哈哈,事实上,我们说this指向的是最终调用它的那个,我们把a.o.f赋给k,这时并没有被调用啊,下面的k才开始调用,this当然是window啦,呜呜呜,就打印不出来小瑞啦

<>

call,和apply都是改变this的指向的,其中,他们的第一个参数都是所改成的this指向的对象,看代码

window.number = 'one';
        document.number = 'two';

        var s1 = {number: 'three' };
        function changeColor(){
            console.log(this.number);
        }

        changeColor.apply();         //one (默认传参)
        changeColor.apply(window);   //one
        changeColor.apply(document); //two
        changeColor.apply(this);     //one
        changeColor.apply(s1);       //three

来分析一下吧,调用changeColor方法的对象是window,所以默认this是指向window的,然后传document后this,指向document,传入s1,this便指向s1

call用法和apply完全相同,不同的是所传入的参数不同
下面我们来看看真伪数组是如何相互转换的,上代码


     var likeArr = {};
            var arr = [];
            [].push.call(likeArr,1,2,3,4,5);
            console.log(arr);//   []
            console.log(likeArr) //  {0: 1, 1: 2, 2: 3, 3: 4, 4: 5, length: 5}

神奇吧,有意思吧,其实没啥,就是改变了调用push方法的对象的this指向啊,

 var likeArr = {};
        var arr = [];
        [].push.applyl(likeArr,arr);
        console.log(arr);//   []
        console.log(likeArr) //  {0: 1, 1: 2, 2: 3, 3: 4, 4: 5, length: 5}

这个就是apply和call的区别啦,哈哈,只不过apply后面的参数传的是一个数组,so easy吧

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值