Js中this用法及注意点详解
我们在写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用法及注意点详解的更多相关文章
- Angular.js中处理页面闪烁的方法详解
		
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
 - js中的Object.defineProperty()和defineProperties()详解
		
ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...
 - node.js 中模块的循环调用问题详解
		
首先,我们看一下图示代码,每一个注释其实代表一个 js 文件.所以下面其实是三个 js 文件 .第一个是我们要运行的 main 文件,后面两个是 a, b 文件. 从上面可以看书 a ,b 两个模 ...
 - js中toggle()及toggleClass()的使用详解
		
在javascript中toggle()为连续点击事件,当里面含有多个function(){}函数时,每次点击依次执行里面的function的函数,直至最后一个.随后每次点击都重复对这几个函数的轮番调 ...
 - JS中的事件委托/事件代理详解
		
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
 - js中事件冒泡,事件捕获详解
		
一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...
 - js中prototype与__proto__的关系详解
		
一.构造函数: 构造函数:通过new关键字可以用来创建特定类型的对象的函数.比如像Object和Array,两者属于内置的原生的构造函数,在运行时会自动的出现在执行环境中,可以直接使用.如下: var ...
 - 【转】angularjs指令中的compile与link函数详解
		
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
 - angularjs指令中的compile与link函数详解
		
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
 
随机推荐
- Java利用POI导入导出Excel中的数据
			
首先谈一下今天发生的一件开心的事,本着一颗android的心我被分配到了PB组,身在曹营心在汉啊!好吧,今天要记录和分享的是Java利用POI导入导出Excel中的数据.下面POI包的下载地 ...
 - eclipse->project->clean…作用
			
其实主要作用就是把编译好的class等文件删除,激活eclipse的自动编译.解决的问题就是,有时候你把代码改了,但因为一些未知的原因,eclipse的自动编译没有成功,导致运行结果不正常.当你的工程 ...
 - poj1745 dp
			
题目链接:http://poj.org/problem?id=1745 类似的题目之前写过一个差不多的(链接:http://www.cnblogs.com/a-clown/p/5982611.html ...
 - 工具:使用jekyll生成静态网站
			
在使用前端框架构建网页而不使用后端平台与数据库,即没有服务器的条件下读取文件夹其他文件,浏览器可能会阻止访问.对于这种静态构建可以使用简单的生成工具jekyll.它主要适用于将静态文件生成静态网站,在 ...
 - 分享Kali Linux 2016.2第45周VMware虚拟机
			
分享Kali Linux 2016.2第45周VMware虚拟机本虚拟机使用Kali Linux 2016.2第45周镜像安装而成.有兴趣的同学,可以下载使用.(1)该虚拟机支持VMware 9.10 ...
 - 04_Java面向对象特征之继承与多态
			
1. 继承 Java继承的实现(只支持单继承,而不是多继承,但有接口的多实现) 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类. 定义类时直接通过extends关键字指明要继承的父类.子类对 ...
 - Android App 性能优化实践
			
本文记录了Android App优化需要用到的工具和以及在实践中的Tips.也算对我这半年来部分工作的总结. 工具 Hierarchy Viewer 是 Android SDK 自带的 Layout ...
 - bzoj1008 [HNOI2008]越狱
			
1008: [HNOI2008]越狱 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 5099 Solved: 2207 Description 监狱有 ...
 - mysql case then使用
			
表的创建CREATE TABLE `lee` (`id` int(10) NOT NULL AUTO_INCREMENT, `name` char(20) DEFAULT NULL, `birthda ...
 - C语言数组删除增加一个元素
			
malloc,realloc,calloc一直很头疼,这次笔试题需要在数组后重新分配新的空间的代码是: //删除函数,删除ptr中的ptr[in]元素,n是数组原来的长度. void rmv(int ...