this可谓是中的开发神器,使用得当的话不仅有事半功倍的效果,而且代码的逼格也更高。但是既然是神器,如果你没有足够的功力的话,那么就不要使用它,否则就有可能自毁身亡。曾几何时,我偶然得到这个神器,之后,,,自残,,,自残,,,再自残...再自残了那么多次后,终于可以拥有强大功力持此神器行走江湖了。接下来,我就为大家来传授传说中神器的使用秘诀。
咳咳。。
入正题。
this是什么?this表示当前运行方法的主体。
注意:函数中的this指向和当前函数在哪定义的话或者在哪执行都没有任何的关系。为啥这样说,请仔细阅读下面的秘籍大全。
神器秘籍大全:
秘籍一:自制行函数里面的this永远都是windowvar 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类似。
此大招一出来,上面四个秘籍都无效了。
秘籍分享完毕,如果有不小心看得看得走火入魔,欢迎出来指正修改此秘籍~