码迷,mamicode.com
首页 > Web开发 > 详细

Js中this用法及注意点详解

时间:2016-04-20 00:32:51      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

      我们在写js时,特别是用到回调函数时,经常会发现this指代的对象总是可能脱离自己的思路而发生改变。面向对象语言的特性告诉我们this始终指代它的调用者,而在js中回调函数中内部的this默认指向全局环境即最终上下文,所以很多时候我们不作this对象的声明绑定,就会发生指向错误,找不到我们想要的值。看下面这段代码:

      var a1={
            name:"ZhuXingyu"
         }
         
        function outFunc(){        //函数a
            console.log(this.a1.name);
        }

      var ob={
            a1:{name:"Loujiaxing"},
            func1:function(){         //函数b
                console.log(this.a1.name);
            }
        }

        var ob2={
            a1:{name:"XXX"},
            func2:function(callback){  //函数c
                callback();
                this.a2=callback;
                this.a2();
                return this.a2;
            }
        }

        var ob3={
            a1:{name:"YYY"},
            func3:function(callback){ //函数d
                callback();  
            }
        }
   
     

  先看函数a与b,分别如愿访问到全局环境下的a1对象的name和指代当前调用func1的对象ob下的a1对象name;

      再看函数c—“ob2.func2(outFunc)”,执行过程中“callback()”执行结果为“Zhuxingyu”,访问的是全局环境下a1的属性,this.a2()执行结果是“XXX”。

      这里发现经过“this.a2=callback”声明绑定this指向对象为ob2后,this不再指向全局对象(这里是window,node.js里为global),而是指向了对象ob2。

      再经过“return this.a2”,函数c执行完返回outFunc函数即函数a,再执行“ob2.func2(outFunc2)()”这里又会访问全局下a1.name—"Zhuxingyu",因为函数执行完毕,声明绑定语句失效,回调函数又指向window对象;这里要注意声明绑定的语句在运行的函数结束时就会失效,this会再次指向全局对象。

      最后来看函数d,我们这样执行函数d:ob3.func3(function(){console.log(this.a1.name)}),发现结果为全局环境下a1.name,所以可见回调函数中,像我们经常写的自定义回调函数中this如果不做声明绑定,它是指向全局对象的。通常在写自定义回调函数时为了避免this的“误会”,我们会给外层的对象上下文里定义一个变量引用它的this,如“var that=this;”,用that变量来调用对象的内容,避免了误会。

       

Js中this用法及注意点详解

标签:

原文地址:http://www.cnblogs.com/zhu-xingyu/p/5410701.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!