this四种绑定方式之间的奇淫技巧

写在前面

上一篇中，我们对于JavaScript中原始值、复杂值以及内存空间进行了一个深入浅出的总结，这次我们来聊一聊JavaScript中this关键字的深入浅出的用法.

在 JavaScript 中，this 是动态绑定，或称为运行期绑定的，这就导致 JavaScript 中的 this 关键字有能力具备多重含义，带来灵活性的同时，也为初学者带来不少困惑。希望这篇文章可以解决初学者心中what’s this ？的困惑。

创建函数时，系统会在默认创建一个名为this的关键字，这也就是说this，只能在函数内部使用；从根本上说，由于运期绑定的特性，JavaScript中this的关键字要丰富的多，这完全取决于函数调用的方式：

　　1）作为函数调用

　　2）作为对象方法调用

　　3）使用call，apply调用

　　4）作为构造函数调用

我没有按这四种调用方式依次来介绍，但是在例子中都有体现。

1、如何确定this值？

我们来看一个例子：1）当从全局域中调用sayFoo函数时，this指向window对象；2）当它作为myObject的一种方法被调用时，this引用myObject；

　　

通过上面的例子，我们发现this 是基于调用函数的上下文的，考虑一下myObject.sayFoo和sayFoo都指向了相同的函数，然而，调用sayFoo的方式不同，this的值也不同。

通过这个例子，我们也可以体会到了a、作为函数调用；b、作为对象的方法调用时，this的不同指向

2、在嵌套函数中用this关键字

 当在嵌套函数内部使用this时，会发生什么事呢？通过下面的例子，我们明显看出嵌套函数内部的this都失去方向，都指向了window对象

 

我们在来看一种情况（原理是一样的），我们把一个匿名函数作为参数传递给一个对象的方法中：，当匿名函数在foo.func1（函数内的函数）内部被调用时，匿名函数的this值同样是window对象的引用.

3、充分利用作用域链研究嵌套函数的问题

JavaScript的程序员的力量是强大的，为了解决在嵌套函数内部this指向的问题，他们想出了变量代替的方法，可以简单的在父函数使用作用域链来保留对this的引用，以便this不丢失。约定俗成，我们一般把变量定义为that

我们来看一个例子：

 

这样，我们就很好的解决了嵌套函数内部this指向的问题

4、使用call()或apply()控制this值

我们可以通过apply()或call()来重写/控制this值，以便定义调用函数时this指向哪个对象。“嘿，告诉x函数，调用的时候把z对象作为this值使用”，这样做我们就可以改变JavaScript中决定this值的方式（取代默认模式）

上述代码使用了call()，但也可以使用apply()。两者区别在于为函数传递参数的方式不同：a、使用call(),参数只是使用逗号分隔的值；b、如果使用apply()，参数值在数组内传递。

下面使用apply可以达到同样的效果

 

5、在用户自定义构造函数内部使用this 关键字

在构造函数中，this默认值的变化与使用call或apply时this默认值变化不同，使用new关键词调用函数时，在构造函数中声明的this引用实例本身

 

 

在使用new关键词调用构造函数时，this引用’即将创建的对象’。如果不使用new关键词，this值将是调用Person的上下文 – 上例中是window对象

 

写在后面

this在不同调用方式下的含义 只是JavaScript中一个很小的概念，但是也是我们借此可以深入理解JavaScript函数的执行环境，更进一步帮组我们了解闭包等其他概念，掌握了这些概念，才能充分发挥JavaScript的特点，才会发挥JavaScript语言特性的强大之处。