js学习三、“普通”函数中的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>

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>