通俗易懂的javascript中的this指向问题和call()、apply()用法的讲解

JS中this的指向：this的指向调用它的那个对象,若是没有调用this则指向window

例：var tpl = {
a: "qqq",
c: function() {
console.log(this.a);
console.log(this);
}
}
情况一
tpl.c();//eee b{}
情况二
var k=tpl.c; //undefined window
k();
情况三
var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
console.log(this);//指向调用它的btn
})
情况一：函数被父级调用，所以this指向了调用它的tpl。
情况二：先声明变量k等于该函数，但并没有运行，所以函数指向了它的父级window。
情况三：很明显回调函数中的this指向调用它的btn。
对于构造函数:function tpl(){
this.a="kkk";
console.log(this.a);
}
var c=new tpl();//kkk这里的this指向c的实例对象tpl。

call和apply的用法

call和apply都是用来改变this的指向的，但接参数的形式不相同。
call的用法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
apply的用法：apply([thisObj[,argArray]]) 例：var tpl = {
a: "aaa",
b: {
a:"kkk",
c: function() {
console.log(this.a);
}
}
}
tpl.b.c();//kkk
tpl.b.c.call(tpl);//aaa
tpl.b.c.apply(tpl);//aaa
上面例子中，直接调用时this指向的是b，所以结果是kkk。我们用call和apply来改变了this的指向，让它指向了tpl，所以结果是aaa。
再来一个例子：var class1 = function(name,sex) {
this.name=name;
this.sex=sex;
this.getNameAndsex=function(numbers,grade){
console.log(this.name+this.sex+numbers+grade);
}
}
var class2=function(){
this.name="Tony";
this.sex="男";
}
var c1=new class1("lily","女");
var c2=new class2();
c1.getNameAndsex()//Lily 女

//getNameAndsex中的this指向c2
c1.getNameAndsex.call(c2);//Tony 男
c1.getNameAndsex.apply(c2);//Tony 男
//传参
//使用call和apply传参是把参数传给getNameAndSex方法；
c1.getNameAndsex.call(c2,"6666","2");//Tony 男 6666 2
c1.getNameAndsex.apply(c2,["6666","2"]);//Tony 男 6666 2
上面方法中class2中的name和sex都是局部变量，用apply和this让getNameAndsex这个方法中的this指向class2，从而获得class2中的属性。