1. 从this开始说起
首先看下面这段代码, 定义一个函数,弹下this,
<script type="text/javascript">
function toolmao(){
alert(this);
}
toolmao();
</script>
使用chrome测试以上代码,可以看到弹出的是 [object global] 。
那么这个 [object global], 到底是什么呢?看看下面的代码
<script type="text/javascript">
function toolmao(){
alert(this===window);
}
toolmao();
</script>
看到弹出 true 了吧, 也就是说在这种正常情况下, this 其实就是 window
所以,我们定义了一个全局的变量的时候,可以
var test="gainover";
也可以
window["test"]="gainover";
下面这个例子,进一步说明, 正常情况下, 函数里的 this 就是 window
<script type="text/javascript">
var test="gainover";
function toolmao(){
alert(this.test); //弹出 "gainover";
alert(window.test); //弹出 "gainover";
}
toolmao();
</script>
2. 现在我们知道了,函数里的 this 是什么。
如果我们调用函数的时候,想让函数里的 this 代表别的对象,而不是window。有什么办法呢?
这里就要用到 call 或者 apply 了(对于初学者,是蛮恶心的东西)
要知道call 和 apply 的用法,我们先来看看函数的调用方法。
------------------------------
通常我们调用函数,都是直接采用以下形式调用
[调用] 函数名();
其实我们还可以采用其它方法, 比如 call 这个单词,就是调用的意思,我们这里要用到它。
还是以 toolmao 函数为例:
中文: 函数名.调用();
英文: toolmao.call();
代码如下:
<script type="text/javascript">
var test="gainover";
function toolmao(){
alert(this.test); //弹出 "gainover";
}
toolmao(); // [调用] toolmao();
toolmao.call(); // 函数.调用()
</script>
现在我们只是做了函数的调用,还没有改变 this ,那么怎么改变 this 呢?
这个时候call就要发挥威力了。
本来 toolmao 函数里的 this 表示的是 window , 我们执行下面这句。
toolmao.call(某个对象);
这个时候,toolmao 里的 this 就变成了 “某个对象”。
我们一起来看看代码
<script type="text/javascript">
var test="gainover";
var myobj={
test : "tieba"
};
function toolmao(){
alert(this.test);
}
toolmao.call(); // 弹出 window.test ,即 "gainover"
toolmao.call(myobj);
// 这个时候,toolmao函数里的this指向 myobj
// 所以弹出的是 myobj.test 即 "tieba"
</script>
3. 上面的代码,应该还好理解吧?
路人甲发话了,你举的这个例子,虽然没问题,但是如果toolmao 函数,有参数怎么办。
代码如下:
<script type="text/javascript">
var test="gainover";
var myobj={
test : "tieba"
};
function toolmao(name, age){
alert(this.test + ":" + name + age);
}
//普通调用
toolmao("周星星",30); //弹出 "gainover:周星星30"
//那么call怎么做呢?其实很简单,一样的咯
toolmao.call(myobj,"周星星",30); //弹出"tieba:周星星30"
</script>
上面代码,我们可以看出,相比普通调用, call 只是多了一个用来指定 this 的参数
call 干什么用的?就是干这个用的,可能好多人看完这些,都还体会不到 call 到底有什么用处。
这些我会单独再另开帖子说明。现在你只需要知道call其实就是调用函数,不过改变了一下函数里的this。
4. 说了这么多,apply 还没出现.
其实如果你看懂了上面的 call 的用法, apply 就比较简单了。
apply 和 call 的作用是一样的,只是参数 不一样。
对比下面的代码。假设 toolmao 函数有N个参数
//call 是 1 + N 个参数,如下
toolmao.call(myobj,"周星星", 30, 参数3, 参数4, ..... ,参数N);
//apply 永远都是2个参数, 第一个参数是 this 指向的东西,第2个是一个数组,数组里存放的是所有参数
toolmao.apply(myobj, ["周星星", 30, 参数3, 参数4, ..... ,参数N]);
<script type="text/javascript">
var test="gainover";
var myobj={
test : "tieba"
};
function toolmao(name, age){
alert(this.test + ":" + name + age);
}
//普通调用
toolmao("周星星",30); //弹出 "gainover:周星星30"
//那么call怎么做呢?其实很简单,一样的咯
toolmao.call(myobj,"周星星",30); //弹出"tieba:周星星30"
toolmao.apply(myobj,["周星星",30]); //弹出"tieba:周星星30", 同call
</script>