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

我好像很少自己写东西，因为水平比较业余，理论的东西学的不是很好，也不敢给大家乱讲。
为了增加吧里的原创文章，我也就灰着脸，给新手们讲点东西，算是谈谈自己的理解吧。不一定正确，但是至少不算是太错吧，

番茄会有的，鸡蛋会有的，一楼留百度！

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>

上海勤革信息技术

涵盖前端js面试题基础Web前端工程师面试#H5，CSS3，JavaScript，Vue，JQuery，WebpackBootstrap，TypeScript，微信小程序核心题集超3500题，一站式面试服务前端js面试题基础

2025-05-08 05:24广告

立即查看

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>