关于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类似。

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

 

秘籍分享完毕,如果有不小心看得看得走火入魔,欢迎出来指正修改此秘籍~

posted on 2016-12-05 11:05  canfoo#!  阅读(725)  评论(0编辑  收藏  举报

导航