我们在写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用法及注意点详解的更多相关文章

  1. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  2. js中的Object.defineProperty()和defineProperties()详解

    ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...

  3. node.js 中模块的循环调用问题详解

    首先,我们看一下图示代码,每一个注释其实代表一个 js 文件.所以下面其实是三个 js 文件 .第一个是我们要运行的 main 文件,后面两个是 a, b 文件.   从上面可以看书 a ,b 两个模 ...

  4. js中toggle()及toggleClass()的使用详解

    在javascript中toggle()为连续点击事件,当里面含有多个function(){}函数时,每次点击依次执行里面的function的函数,直至最后一个.随后每次点击都重复对这几个函数的轮番调 ...

  5. JS中的事件委托/事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  6. js中事件冒泡,事件捕获详解

    一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...

  7. js中prototype与__proto__的关系详解

    一.构造函数: 构造函数:通过new关键字可以用来创建特定类型的对象的函数.比如像Object和Array,两者属于内置的原生的构造函数,在运行时会自动的出现在执行环境中,可以直接使用.如下: var ...

  8. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  9. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

随机推荐

  1. hdu 4568 Hunter(spfa预处理 + 状压dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4568 思路:首先spfa预处理出每对宝藏之间的最短距离以及宝藏到边界的最短距离,然后dp[state] ...

  2. VPS -Digital Ocean -初试以及VPN的搭建

    首先恭喜你找到这篇博客,它会带你走出困境. 题外话(请忽略):一直以来想搞一个VPS,终于在自己的刺激下试了一下Digital Ocean,还没有使用很长时间不做太多评论,唯一给我的感觉是各种操作还算 ...

  3. LoadRunner 脚本学习 -- 读取文件内容

    随便创建个txt文档  输入点内容,例如 读取文件内前N个字符: Action() { long myfile; ; ]; char *filename = "E:\\kkk.txt&quo ...

  4. LoadRunner之安装、破解、汉化教程(一)

    安装前,把所有的杀毒软件和防火墙关闭 安装前,把所有的杀毒软件和防火墙关闭 安装前,把所有的杀毒软件和防火墙关闭........     注意事项: 安装前,把所有的杀毒软件和防火墙关闭. 若以前安装 ...

  5. 编解码-marshalling

    JBoss的Marshalling序列化框架,它是JBoss内部使用的序列化框架,Netty提供了Marshalling编码和解码器,方便用户在Netty中使用Marshalling. JBoss M ...

  6. SpringRMI解析4-客户端实现

    根据客户端配置文件,锁定入口类为RMIProxyFactoryBean,同样根据类的层次结构查找入口函数. <bean id="rmiServiceProxy" class= ...

  7. DSP using MATLAB 示例Example2.3

    n = [-10:1:10]; alpha = -0.1+0.3j; % x = exp(alpha*n); % subplot(2,1,1); set(gcf,'Color',[1,1,1]) % ...

  8. Codeforces Round #336 (Div. 2)

    水 A - Saitama Destroys Hotel 简单的模拟,小贪心.其实只要求max (ans, t + f); #include <bits/stdc++.h> using n ...

  9. 利用TaskCompletionSource将EAP转换成TAP

        1.原始的异步方法的调用   我们来看个简单的例子,在这里演示调用 WebClient.DownloadStringAsync 方法(这个方法不是 TAP),然后由 WebClient.Dow ...

  10. asp.net mvc route 中新发现的小技巧

    在发现这个小技巧之前,我经常被某些问题困扰,我们以博客园为例 1:是分类名称 2:是分类url 3:点击分类,进入的页面,要显示分类的名称 4:点击分类,进入的页面,要用分类相关参数 在日常web的开 ...