JS中的this、apply、call、bind(经典面试题)

// 作为对象方法调用
var test = {
a : 5,
b : 6,
sum : function () {
return this.a + this.b; // 此处this = test
}
}
alert(test.sum()); // 11

// 作为函数调用
a = 4;
b = 3;
function sum(){
return this.a + this.b; // 此处this = window
}
alert(sum()); // 7

var test = {
a : 5,
b : 6,
sum : function (a,b) {
function getA(a) {
this.a = a; // 在window上增加了一个全局变量a
return this.a; // 此处this = window
}
function getB(b){
this.b = b; //在window上增加了一个全局变量b
return this.b; // 此处this = window
}
return getA(a) + getB(b);
}
}
alert(test.sum(4,3)); // 7
alert(a); // 4
alert(b); // 3

var test = {
a : 5,
b : 6,
sum : function () {
var self = this; // 此处this = test的实例
function getA() {
return self.a;
}
function getB(){
return self.b;
}
return getA() + getB();
}
}
alert(test.sum());
alert(a); // 此处报错：a is not defined
alert(b); // 此处报错：a is not defined

语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

  如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法：

语法：apply([thisObj[,argArray]])

定义：应用某一对象的一个方法，用另一个对象替换当前对象。

说明：如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

bind方法：

语法：bind(thisArg[, arg1[, arg2[, ...]]])

定义：将接受多个参数的函数变换成接受一个单一参数。

说明：bind()方法所返回的函数的length（形参数量）等于原函数的形参数量减去传入bind()方法中的实参数量（第一个参数以后的所有参数），因为传入bind中的实参都会绑定到原函数的形参。

哎呀妈呀，讲了那么多理论的东西，我都晕了，还是看看实际的例子：

var test = {
a : 5,
b : 6,
sum : function (a,b) {
var self = this;
function getA() {
return self.a;
}
function getB(){
return self.b;
}
alert(a);
alert(b);
return getA() + getB();
}
}
var obj = {a:2,b:3};
alert(test.sum.call(obj,4,5)); // 调用时self = this = obj，alert顺序4,5,5
alert(test.sum.apply(obj,[6,7])); // 调用时self = this = obj，alert顺序6,7,5
var sum = test.sum.bind(obj,8); // 此处返回一个只有一个参数的函数sum（b）
alert(sum(9)); // 调用时self = this = obj，alert顺序8,9,5

从上面的例子我们可以很清晰的看到call、apply和bind之间的区别。其中call和apply是差不多的，只是传参的形势不同（apply的第二个参数为一个数组或arguments），他们都是直接直接执行函数；

而bind函数将test.sum简化为另一个全局函数sum(b),sum(b)只需要传入一个参数即可。

3、解决js中烦人的this

call、apply和bind都可以应用于继承，在这里不再过多赘述，网上有很多这样的例子，参考：http://blog.csdn.net/wyyfwm/article/details/46349071

而我想讲一下这段时间我遇到的一些关于this比较头疼的事情。

<button id="btn">烦人的this</button>
<script>
var test = {
isSum: true,
sum: function (event, a, b) {
if (this.isSum) { // this = button，这个时候不会执行alert（a+b）
alert(a + b);
}
}
}
var button = document.getElementById("btn");
button.addEventListener("click", test.sum, false);
</script>

这里我们就能发现问题所在了，当ID为btn的按钮被点击时会触发test.sum函数，但是这个时候的this=button，而且参数a、b如何传入呢?

这里就能够使用bind函数了，将test.sum函数简化为另一个新的函数，同时传入参数a和b，我们再看看下面的代码：

<button id="btn">this</button>
<script>
var test = {
isSum: true,
sum: function (a, b,event) {
if (this.isSum) {// 此处this=test，this.isSum = true
alert(a + b);// 9
}
}
}
var button = document.getElementById("btn");
button.addEventListener("click", test.sum.bind(test,4,5), false); // 此处test.sum.bind(test,4,5)返回一个新的函数function(event),
</script>

从上面的代码我们可以看到test.sum.bind(test,4,5)返回一个新的函数function(event),test、4、5分别被绑定到test.sum的上下文、参数a、参数b中。
当ID为btn的按钮被点击时会触发test.sum函数，此时改函数中的this=test，a=4,b=5。

这样就可以解决事件绑定时的this以及传参的问题了，包括现在常用js框架中的事件绑定，如jQuery、signals.min.js等等。