网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索

 
 
 
日一二三四五六
       
       
       
       
       
       

签到排名:今日本吧第个签到,

本吧因你更精彩,明天继续来努力!

本吧签到人数:0

一键签到
成为超级会员,使用一键签到
一键签到
本月漏签0次!
0
成为超级会员,赠送8张补签卡
如何使用?
点击日历上漏签日期,即可进行补签。
连续签到:天  累计签到:天
0
超级会员单次开通12个月以上,赠送连续签到卡3张
使用连续签到卡
05月14日漏签0天
javascript吧 关注:269,282贴子:906,471
  • 看贴

  • 图片

  • 吧主推荐

  • 游戏

  • 1 2 3 4 下一页 尾页
  • 52回复贴,共4页
  • ,跳到 页  
<<返回javascript吧
>0< 加载中...

javascript“普通”函数中的this,以及call,apply用法

  • 只看楼主
  • 收藏

  • 回复
  • gainover
  • Error
    10
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
我好像很少自己写东西,因为水平比较业余,理论的东西学的不是很好,也不敢给大家乱讲。
为了增加吧里的原创文章,我也就灰着脸,给新手们讲点东西,算是谈谈自己的理解吧。不一定正确,但是至少不算是太错吧,
番茄会有的,鸡蛋会有的,一楼留百度!



  • gainover
  • Error
    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>


2025-05-14 21:51:20
广告
  • gainover
  • Error
    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>


  • gainover
  • Error
    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。


  • gainover
  • Error
    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>


  • 次碳酸钴
  • Number
    12
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
那就顺便说写callee和caller呗- -!


  • gainover
  • Error
    10
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
额。明天再开贴吧,叫做 call , callee 和 caller


  • 恨宸
  • trycatch
    9
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
难得一毛不拔的吧主,愿意分享技术文章
奖励一朵 小红花


2025-05-14 21:45:20
广告
  • wonwiz
  • ifelse
    5
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
C++, Java 的 this 固定属于定义method的哪个Object, JS 的this 调用时才可以决定。


  • 恨宸
  • trycatch
    9
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
回复:9楼
javascript很多语法都被后来的程序借去了精华


  • wonwiz
  • ifelse
    5
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
回复:10楼
谁借谁的?


  • 恨宸
  • trycatch
    9
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
回复:11楼
你借我的


  • 708616
  • trycatch
    9
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
请问一下,baidu.dom.ready(...)与这个是一样的吗?


  • mike4084
  • var
    1
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
感谢感谢
至少我觉得楼主说的非常好
我算是看懂了哈
再次表达谢意


2025-05-14 21:39:20
广告
  • 荧光小妹
  • while
    7
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼


登录百度账号

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频!
  • 贴吧页面意见反馈
  • 违规贴吧举报反馈通道
  • 贴吧违规信息处理公示
  • 1 2 3 4 下一页 尾页
  • 52回复贴,共4页
  • ,跳到 页  
<<返回javascript吧
分享到:
©2025 Baidu贴吧协议|隐私政策|吧主制度|意见反馈|网络谣言警示