HTML5技术

关于javascript中this的那点事 - canfoo#!

字号+ 作者:H5之家 来源:H5之家 2016-12-07 16:00 我要评论( )

this可谓是中的开发神器,使用得当的话不仅有事半功倍的效果,而且代码的逼格也更高。但是既然是神器,如果你没有足够的功力的话,那么就不要使用它,否则就有可能自毁身亡。曾几何时,我偶然得到这个神器,之后,,,自残,,,自残,,,再自残...再自残了

this可谓是中的开发神器,使用得当的话不仅有事半功倍的效果,而且代码的逼格也更高。但是既然是神器,如果你没有足够的功力的话,那么就不要使用它,否则就有可能自毁身亡。曾几何时,我偶然得到这个神器,之后,,,自残,,,自残,,,再自残...再自残了那么多次后,终于可以拥有强大功力持此神器行走江湖了。接下来,我就为大家来传授传说中神器的使用秘诀。

咳咳。。

入正题。

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

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

 

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript_Html5_LocalStorage项目demo - 明lucky

    JavaScript_Html5_LocalStorage项目demo - 明lucky

    2016-12-07 12:00

  • h5的rem代替px做移动端界面的自适应就是這么简单又强大,以及我的一些经历和认识 - css_this

    h5的rem代替px做移动端界面的自适应就是這么简单又强大,以及我的一

    2016-11-30 18:00

  • iframe关于滚动条的去除和保留 - yezi-dream

    iframe关于滚动条的去除和保留 - yezi-dream

    2016-11-21 14:00

  • 关于移动端meta设置 - 九成

    关于移动端meta设置 - 九成

    2016-11-14 16:00

网友点评