javascript“普通”函数中的this,以及call,apply用法
javascript吧
全部回复
仅看楼主
level 10
gainover 楼主
我好像很少自己写东西,因为水平比较业余,理论的东西学的不是很好,也不敢给大家乱讲。
为了增加吧里的原创文章,我也就灰着脸,给新手们讲点东西,算是谈谈自己的理解吧。不一定正确,但是至少不算是太错吧, [瀑布汗~]
番茄会有的,鸡蛋会有的,一楼留百度!

2010年09月07日 16点09分 1
level 10
gainover 楼主
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
gainover 楼主
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
gainover 楼主
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
gainover 楼主
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 12
那就顺便说写callee和caller呗- -!
2010年09月07日 16点09分 6
level 10
gainover 楼主
额。明天再开贴吧,叫做 call , callee 和 caller [拍砖]
2010年09月07日 16点09分 7
level 9
难得一毛不拔的吧主,愿意分享技术文章
奖励一朵 小红花[Yeah]
2010年09月08日 00点09分 8
level 5
C++, Java 的 this 固定属于定义method的哪个Object, JS 的this 调用时才可以决定。
2010年09月09日 01点09分 9
level 9
回复:9楼
javascript很多语法都被后来的程序借去了精华[拍砖]
2010年09月09日 01点09分 10
level 5
回复:10楼
谁借谁的?[汗]
2010年09月09日 01点09分 11
level 9
回复:11楼
你借我的[拍砖]
2010年09月09日 01点09分 12
level 9
请问一下,baidu.dom.ready(...)与这个是一样的吗?
2010年10月16日 07点10分 13
level 1
感谢感谢
至少我觉得楼主说的非常好
我算是看懂了哈
再次表达谢意
2011年05月08日 01点05分 14
level 7
[揉脸]
2011年05月08日 11点05分 15
level 11
围观,此贴必火。。。。
2011年05月09日 05点05分 16
level 5
为什么我想大段的发代码 或者是文章 都不行呢?
说是有广告!!![汗]
2011年05月10日 01点05分 17
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
1 2 3 尾页