我们在写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. matlab练习程序(简单多边形的核)

    还是计算几何, 多边形的核可以这样理解:这个核为原多边形内部的一个多边形,站在这个叫核的多边形中,我们能看到原多边形的任何一个位置. 算法步骤如下: 1.根据原多边形最大和最小的x,y初始化核多边形, ...

  2. Font Awesome符号字体

    http://www.fontawesome.com.cn/ 引用CSS包之后根据图标库找到所需的图标代码 使用i标签或者a标签皆可,符号为文字性质,可以直接通过修改text颜色从而修改符号颜色

  3. Servlet的request应用案例

    request部分用法如代码: AServlet package cn.yzu; import java.io.IOException; import javax.servlet.ServletExc ...

  4. LoadRunner常见函数分析

    LoadRunner常见函数分析 ?%Ze\N%?~"_J}.t051Testing软件测试网;FQ X%L|GO+R Web用户Action51Testing软件测试网b,Q8iO w1j ...

  5. js String对象

    字符串(String) 字符串(String)使用长度属性length来计算字符串的长度: 在字符串中查找字符串 字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置: 实例 ...

  6. AOP动态代理解析4-代理的创建

    做完了增强器的获取后就可以进行代理的创建了 AnnotationAwareAspectJAutoProxyCreator->postProcessAfterInitialization-> ...

  7. 疯狂java学习笔记之面向对象(四) - this关键字

    Java中this关键字主要有以下两个方法: 1.this引用 - 可用于任何非static修饰的方法和构造器中,当this用于方法中时,它代表调用该方法的实例/对象;当this用于构造器中时,它代表 ...

  8. EF框架step by step(3)—Code-First

    CodeFirst是EF框架的第三种方式,也是最为复杂一种方式,本文将以EF4.1版本为基础,简要讲解一下用法,同时,也介绍DbContext的用法. 本文采用的示例仍然是前两篇采用的博客用户的示例. ...

  9. UpdatePanel的使用

    一.UpdatePanel的结构 <asp:ScriptManager ID="ScriptManager1" runat="server" > & ...

  10. 【Oracle】配置oracle数据库最大连接数

    数据库中教你如何修改ORACLE最大连接数 Oracle的连接数相关参数:processes.sessions. Oracle的sessions是个派生值,由processes的值决定,session ...