说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

详解 JavaScript 中的 this

HTML文档下载 WORD文档下载 PDF文档下载
JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一。 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this。

其实如果完全掌握了this的工作原理,自然就不会走进这些坑。来看下以下这些情况中的this分别会指向什么:

1.全局代码中的this

alert(x);// 全局变量x值为2

全局范围内的this将会指向全局对象,在浏览器中即使window。

2.作为单纯的函数调用

function fooCoder(x) {this.x = x;}fooCoder(2);alert(x);// 全局变量x值为2

这里this指向了全局对象,即window。在严格模式中,则是undefined。

3.作为对象的方法调用

var name = "clever coder";var person = {name : "foocoder",hello : function(sth){console.log(this.name + " says " + sth);}}person.hello("hello world");

输出 foocoder says hello world。this指向person对象,即当前对象。

4.作为构造函数

new FooCoder();
函数内部的this指向新创建的对象。

5.内部函数

var name = "clever coder";var person = {name : "foocoder",hello : function(sth){var sayhello = function(sth) {console.log(this.name + " says " + sth);};sayhello(}person.hello("hello world");//clever coder says hello world

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self:

var name = "clever coder";var person = {name : "foocoder",hello : function(sth){var that = this;var sayhello = function(sth) {console.log(that.name + " says " + sth);};sayhello(sth);}}person.hello("hello world");//foocoder says hello world

6.使用call和apply设置this

person.hello.call(person, "world");
apply和call类似,只是后面的参数是通过一个数组传入,而不是分开传入。两者的方法定义:

call( thisArg [,arg1,arg2,… ] );  // 参数列表,arg1,arg2,...apply(thisArg [,argArray] );     // 参数数组,argArray

两者都是将某个函数绑定到某个具体对象上使用,自然此时的this会被显式的设置为第一个参数。

简单地总结

简单地总结以上几点,可以发现,其实只有第六点是让人疑惑的。

其实就可以总结为以下几点:

  1. 当函数作为对象的方法调用时,this指向该对象。
  2. 当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined)
  3. 构造函数中的this指向新创建的对象
  4. 嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。

再总结的简单点,如果在函数中使用了this,只有在该函数直接被某对象调用时,该this才指向该对象。

obj.foocoder();foocoder.call(obj, ...);foocoder.apply(obj, …);

更进一步

我们可能经常会写这样的代码:

$("#some-ele").click = obj.handler;
如果在handler中用了this,this会绑定在obj上么?显然不是,赋值以后,函数是在回调中执行的,this会绑定到$(“#some-div”)元素上。这就需要理解函数的执行环境。本文不打算长篇赘述函数的执行环境,可以参考《javascript高级程序设计》中对执行环境和作用域链的相关介绍。这里要指出的时,理解js函数的执行环境,会更好地理解this。

那我们如何能解决回调函数绑定的问题?ES5中引入了一个新的方法,bind():

fun.bind(thisArg[, arg1[, arg2[, ...]]])thisArg

当绑定函数被调用时,该参数会作为原函数运行时的this指向.当使用new 操作符调用绑定函数时,该参数无效.

arg1, arg2, ...
当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数.

该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

显然bind方法可以很好地解决上述问题。

$("#some-ele").click(person.hello.bind(person));//相应元素被点击时,输出foocoder says hello world

其实该方法也很容易模拟,我们看下Prototype.js中bind方法的源码:

Function.prototype.bind = function(){  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();  return function(){    return fn.apply(object,      args.concat(Array.prototype.slice.call(arguments)));  };};

明白了么?

相信看完全文以后,this不再是坑~

Android蓝牙API之BluetoothAdapter类(1) Android蓝牙API之BluetoothAdapter类(2) AndroidManifest.xml文件剖析 (三) AndroidManifest.xml文件剖析 (二) AndroidManifest.xml文件剖析 (一) MOTODEV初体验,高效Android开发工具 Simple让BASIC语言编写Android程序 MOTODev试用报告- Android开发效率之源 安装MOTODEV Studio for Android版方法 Android开发工具-motoDEV studio介绍 Android过后Chrome OS又是如何开发? Android安全模型导致开发时功能受限 Android导出一个JAR库 APK汉化原理及方法 APK文件格式分析,Android反编译入门(一) ApiDemos中的Android Widget例子解析 APK签名导出向导 - Use the Export Wizard 剖析Android自带Widget - Music播放器 剖析Android自带Widget - Clock指针钟表 C#取得Excel工作簿工作表名称 C#中用Automation自动化方式对Excel的操作 VB如何打开或保存为有密码保护的Excel sheets工作表 VB在Excel表格文件中搜索指定内容 VB复制Excel表到另外一个Excel中 Java实现生成网站快照缩略图片 php实现生成网站快照缩略图片 C#实现生成网站快照缩略图片 VB比较两个Excel表格的内容 VB实现Excel按列或行排序 VB删除EXCEL表格指定行 用vb.net写的验证码识别代码 请问像大虾们说的comp.lang.c++.moderated这样的讨论组怎么访问?(Solstice) 简单问题:关于paradox数据库 进销存的问题 高分寻找ZIP密码破解高手! 请问有没有能通过Modem发送传真的控件? >>>>树状层次关系的算法? 怎样检测机子里有没有我指定的字体,如果没有并安装,谢谢 如何动态配置站点??? seek 函数??? 谁能帮我破解些ZIP密码! DB高手请看看:逐级缩小搜索范围的一个问题,大家都来看看啦!!!!!! C# 完全手册 中文版电子书 神经网络 TADOConnect与SQLserver连接 WINS 几问 为什么BCB的自动弹出属性和方法提示速度那么慢? 请问那里能下载JBUILD6?????// 怎样用程序打开TADOConnection 的ConnectionString 设置窗体 键盘钩子?????,有实例或文档吗????? 低手问题? 大家碰到这样的问题吗? 各位,那里有d3d的教程? 从ca365下载了一个免费根证书(rootca.cer),却无法在本地计算机上安装,help! peihexian的程序发短信的一文中,程序所发的数据包 请问web service到底是个什么东西?谢谢 callingda(林丁) 来拿分30 哪位能提供一个图书管理的VB源码给我参考? yzqb()发工资了47分 请教一个问题,编译不通过,不知是什么错误。 帮帮忙!神经网络 vb 中打印机如何检测? 假如用户正在使用别的软件,如何自动使我的程序获得焦点 批量转移数据 SQL 斑竹呀急,快帮帮我! 想用ADO连接internet上服务器中的database,怎么动态建立间接网上数据库的DSN? 我的Web站点为什么没有安全性? 请问那些捌角人小图片如何做呀? 我也要一份《全套国标软件设计文档》 好人们,谁也发给我一个吧! 如何得到对话框在桌面的位置 紧急求救!编译时的错误! 改变Edit控件后出现字符重叠显现如何解决? 关于DBASE,CLIPPER,FOXPRO,VFP的历史发展 请问那些捌角图片如何做呀? 谁会刻光盘!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! lazywolf(二代) 有没有提供几何图形模板的类(如正方形和圆形)? typedef DWORD (WINAPI *MYFUNC)(DWORD,DWORD);是定义函数指针吗?为什么这样定义呢? 如何创建vector数组!我这些不对static Vector report[8]=new Vector()[8];高手指点me:) 如何画一个透明的Rectangle VC中修改字体的问题 比你更急!ASP。NET中打开文件问题? 烧杯的大小对倒扣在烧杯内的蜡烛燃烧时间的影响应控制哪些条件? 酸碱中和滴定试验中酸碱指示剂变色的时候HP不是7啊比如说甲基橙是PH在3.1-4.4变色.由此造成的试验误差有多大? iBoo粉末 涂装 烤漆 炉温测试仪 为什么如此热销? 知道制冷量,怎样计算压缩机的功率 盛水的小烧杯放在盛水的大烧杯为什么大小杯里的水温度相同 iBoo炉温测试仪,为什么持续畅销? 热量计算和压缩机实际输出功率请问15度的水到0度水,0度水到0度的冰,0度冰到-10度的冰的热量换算公式,好象是CM(T1-T0),C值怎么取呢?还有压缩机的实际输出功率是额定功率x效率吗?我的压宿机 有一个瓶子内装有体积为50cm^3,密度为1.2×10^3千克/米^3的盐水,要将盐水稀释之密度为1.1×10^3千克/米^3,则应该加多少水急求 指示剂指示酸碱变色是化学变化吗?如果是,那么他是做反应物还是做其他成分?如果是反应物那酸碱走后,那他为什么又会变会原来的颜色?如果不是反应物那他是什么呢? 某酸碱指示剂的Pka=5.0,该指示剂呈现纯酸色的PH范围为____.A,4.5.0 B.4.6.0 C.6.0请说明理由。 6、将密度是0.9×103千克/米3、质量是2.7千克的物体,放进食盐水中,物体有1/4的体积露出液面.(1)食盐水的密度是多少千克/米3?(2)若将该物体放入水中,待它静止后露出水面的体积是多少米3? 酸碱等使指示剂变色是不是化学变化 某酸碱指示剂的PKa=5.0,该指示剂呈现纯酸色的PH范围为:A,4.0-5.0 B.4.0-6.0 C. 6、将密度是0.9×103千克/米3、质量是2.7千克的物体,放进食盐水中,物体有1/4的体积露出液面.求:(1) 的酸碱指示剂是什么 变色是化学变化吗 定量分析化学中 酸碱指示剂 变色点 PH=PKa(HIn)中 (HIn)是什么啊? 酸碱指示剂变色的口诀或者记忆方法甲基橙+酸=红,+碱=黄石蕊+酸=红,+碱=蓝酚酞+酸=无,+碱=红 酸碱指示剂变色是物理变化还是化学变化 1.某酸碱指示剂KA为3.0*10^(-5) 酸红碱蓝 由80%蓝变为80%红 需要PH减少多少?2.PKA的问题2.吡啶的PKA 5.19 咪唑7 异喹啉5.4 书上说碱性异喹啉大于吡啶大于咪唑 怎么排的 吡咯17.5 几乎不具有碱性 显脱 在存放过程中锡膏粘度变化百分之多少内算正常 密度是0.6X10³千克/米³的木块,体积是4米³.当它浮在水面上时.取g=10牛/千克,求,1,木块的重力,2,木块受到的浮力,3,木块排开水的体积,4,木块露出水面的体积过程是必须的 以某吸附指示剂pka=2,作为银量法的指示剂,ph应控制在?为什么? 密度是0.6×103千克/米3,体积为100厘米3的木块,下面用绳子系于容器底部.如图如图 4所示.若向容器中注入水时,恰好使水面和木块表面相平,此时绳子受到的拉力为______牛. 关于化学的酸碱反应 谷轮压缩机型号怎样解读,最好举个例子,把每个字母和数字代表的意思分别解读?求行家! 圆柱形容器的底面积是200厘米2,容器中装有20厘米深的水,将密度为0.4×103千克/米3的木块投入水中静止后,桶底受到的压强增加了490帕.求:木块的质量和体积是多少 化学关于酸碱的反应有强酸制弱酸,但是它的反应条件是什么样的呀?那其中还有例外,有什么反应是例外的?例外的反应条件是什么?有没有强碱制弱碱的反应? ph试纸是不是酸碱指示剂 蜂蜜有保质期吗?多长时间? 酸碱反应加石蕊溶液.BACL2溶液,即可将HCL,H2SO4,K2SO4,NAOH和NO3鉴别出来请写出解体的分析过程 除了酸碱指示剂\PH试纸还有什么可以检测中和反应 高中化学二氧化碳溶于水可以使得指示剂变色吗碳酸酸性那么弱 在甲酸溶液中加入一定量氢氧化钠溶液,恰好完全反应,对于生成的溶液,为什么【OH-】小于【HCOO-】…要详解, 有一木块重9.8n,放在水中有1/4体积露出水面,求木块的密度 高中化学二氧化碳溶于水可以使得指示剂变色 一份溶液内含有0.275M的HC3H502,(Ka=1.3*10^-5)和0.0892M的HI,计算[H30+][OH-][C3H5O2-]和[I-]. 压缩机本身的功率与制冷量是怎么转换比如说压缩机的是3匹的 那么 他的制冷量是多少呢 还有他能冷却的空间有多大? 指示剂变色即停止滴定,浓度偏低,为什么浓度偏低? 大家来说说iboo炉温测试仪的好处? 有一木块重9.8N,放在水中有1/4体积露出水面,则木板受到的浮力,体积,密度各为多少? 高中化学里涉及的指示剂变色的都有啥,像酚酞遇见碱变红这种! iBoo炉温测试仪,优点太多,心动不止一点点? 压缩机制冷量怎么算是法国泰康压缩机恒温恒湿上用的 一个正方体木块漂浮在水面上水上部分与水下部分的体积之比为3:7,则这个木块的密度为多少kg /m^3 某工厂刚进来一批金属板,每块金属的体积是2立方分米,称得质量为54千克,则金属板的密度是( )千克/米. 并联压缩机制冷量怎样计算? 浮在水面上的一正方体木块,若木块的水上部分体积是a,水下部分体积是b,则木块的密度为多少 有一块金属,质量为134千克,体积为0.05米3,该金属的材料的密度为多少?他可能是那种金属? 用天平和量杯测二十个鸡蛋如何计算平均密度 浮在水面上的一个正方体木块,若木块的水上部分为a,水下部分为b,则木块的密度为?今天就要好的加分啊! 用化学方程式表示酸碱灭火器的原理 用激光光电开关测量小球下落时间的方法测量液体粘滞系数有何优点 阿尔法锡膏和星马锡膏那个好? 酸碱灭火器原理 除了用酸碱指示剂,PH试纸外,还可用( )(填力法)检测中和反应是否发生是氢氧化钠溶液和稀盐酸反应 酸碱中和滴定指示剂一变色,就按溶液中H+等于OH-来计算吗? 酸碱灭火器的原理酸碱反映会降温吗?我在书上看的,它属于降温灭火器的一类,为什么? 除了用酸碱指示剂pH试纸外还可以使用什么检测中和反应是否发生在题目中一般说的蒸馏水是中性的还是偏酸性的 酸碱中和滴定的指示剂有哪些?他们不同ph时的颜色分别是什么?怎么决定用哪种指示剂? 泡沫灭火器的工作原理``(化学)
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn