关于javascript中this的那点事

this可谓是JavaScript中的开发神器，使用得当的话不只有事半功倍的效果，并且代码的逼格也更高。可是既然是神器，若是你没有足够的功力的话，那么就不要使用它，不然就有可能自毁身亡。曾几什么时候，我偶然获得这个神器，以后，，，自残，，，自残，，，再自残...再自残了那么屡次后，终于能够拥有强大功力持此神器行走江湖了。接下来，我就为你们来传授传说中神器的使用秘诀。

咳咳。。

入正题。

this是什么？this表示当前运行方法的主体。

注意：函数中的this指向和当前函数在哪定义的话或者在哪执行都没有任何的关系。为啥这样说，请仔细阅读下面的秘籍大全。

神器秘籍大全：

秘籍一：自制行函数里面的this永远都是window

var inner = "window";
var obj = {inner : "obj",
          fn : (function () {console.log(this.inner)})()
}

上面浏览器在运行该程序时，会自动运行obj.fn里面的方法，由于obj.fn是一个自制行函数，当执行该函数时，程序会输出window。

额，为何输出不是obj？

由于人家规定自制行函数里面的this是window,因此其实this.inner就是window.inner，所以这个inner是定义在全局变量的，它的值是"window"。

 

秘籍二：元素绑定事件驱动方法运行，方法里的this表示当前绑定的元素

var oDiv = document.getElementsByTagName("div")[0];
oDiv.onclick=function(){
    console.log(this);   //当用鼠标点击该元素，则输出oDiv元素的集合
 };

这个好理解，元素绑定某个行为执行的方法，就至关于把这个方法也绑定在这个元素上，因此this也就指向元素自己。

 

秘籍三：方法执行，看方法名前面是否有"."，有的话"."前面是谁this就是谁，没有的话this就是window

var obj={fn:fn};
function fn(){console.log(this)}
fn.prototype.aa=function(){console.log(this)};
var f=new fn;
fn();  //window..
obj.fn(); //Object..
fn.prototype.aa(); //fn.prototype
f.aa(); //f

记住此秘籍！！！

 

秘籍四：在构造函数模式中,函数体中的this是当前类的一个实例

function Fn(){
    this.x = 100;
    console.log(this);  // 实例 f
}
var f = new Fn;

构造函数生成的实例，故构造函数里的this固然是指向当前这个实例了。

 

秘籍五（大招）：call/apply来改变this的指向

var oDiv = document.getElementsByTagName("div")[0];
function fn() {
    console.log(this);
}
fn.call(oDiv);

fn.call(oDiv); //执行这个语句后，fn里面的this指向oDiv元素，applay用法与call相似。

此大招一出来，上面四个秘籍都无效了。

 

秘籍分享完毕，若是有不当心看得看得走火入魔，欢迎出来指正修改此秘籍~