level 10
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>
2010年09月07日 16点09分
2
level 10
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>
2010年09月07日 16点09分
3
level 10
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。
2010年09月07日 16点09分
4
level 10
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>
2010年09月07日 16点09分
5
level 5
C++, Java 的 this 固定属于定义method的哪个Object, JS 的this 调用时才可以决定。
2010年09月09日 01点09分
9
level 9
请问一下,baidu.dom.ready(...)与这个是一样的吗?
2010年10月16日 07点10分
13
level 1
感谢感谢
至少我觉得楼主说的非常好
我算是看懂了哈
再次表达谢意
2011年05月08日 01点05分
14
level 1
请问一下 gainover 说“明天再开贴吧,叫做 call , callee 和 caller ”,这个帖子在哪里了么,我没有找到,希望知道的人告诉一下,O(∩_∩)O谢谢`
2011年05月27日 02点05分
18
level 12
呃。。。那个帖子不存在。。。
callee是当前函数 caller是调用函数的函数 call是默认方法
这些东西看看手册就能明白的。。。
2011年05月27日 03点05分
19
level 12
function a(){
alert(arguments.callee===a);//callee是当前函数,所以这里会等于a,返回true
b();
};
function b(){
alert(arguments.caller==a);
//caller返回的是调用函数的函数,因为这个b是从a里调用的,因此caller就是a
//但是caller返回的并不是一个函数,而是一个调用,因此这里返回false
alert(arguments.caller.callee===a);//这个才是真正的调用b的函数,返回true
};
a.call();//调用函数a,和直接写a();是一样的。。
2011年05月27日 04点05分
20