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>

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>