**
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吧