this和arguments

发布时间:2016-12-8 10:05:38 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"this和arguments",主要涉及到this和arguments方面的内容,对于this和arguments感兴趣的同学可以参考一下。

http://www.cnblogs.com/delin/archive/2010/06/17/1759711.html this和arguments this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在javascript中,由于javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的自由和灵活,结合apply(call)方法,可以使JS变得异常强大。 2.变化的this 在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)。当我们在页面中定义了函数doSomething()的时候,它的owner是页面,或者是JavaScript中的window对象(或global对象)。对于一个onclick属性,它为它所属的HTML元素所拥有,this应该指向该HTML元素。 2.1在几种常见场景中this的变化 函数示例 function doSomething () { alert(this.navigator); //appCodeName this.value = "I am from the Object constructor"; this.style.backgroundColor = "# 000000"; } 1. (A)作为普通函数直接调用时,this指向window对象. 2. (B)作为控件事件触发时 1) inline event registration 内联事件注册 .将事件直接写在HTML代码中(<element onclick=”doSomething()”>), 此时this指向 window对象 。 2) Traditional event registration 传统事件注册 (DHTML方式). 形如 element.onclick = doSomething; 此时this指向 element对象 3) <element onclick=”doSomething(this)”>作为参数传递可以指向element 3. (C)作为对象使用时this指向当前对象。形如:new doSomething(); 4. (D)使用apply 或者call方法时,this指向所传递的对象。 形如:var obj={}; doSomething.apply(obj,new Array(”nothing”); //thisobj 2.2 this 指向分析 1 A场景。 直接调用的情况下,doSomething的运行时拥有者是window对象,因此this指向window 图示: 图1:A场景 2 B场景。 1)Traditional Event Registration 当我们要让函数中的this指向当前HTMLELEMENT时,可这样写 element.onclick = doSomething; doSomething的引用(地址)赋给了element的onclick属性(这样就成为了函数)。此时 doSomething运行时拥有者(owner)就变成了element,this便指向了element。 图示: 图2: B场景 Traditional Event Registration 进行批量添加事件时,this均可正确指向。 图示: 图3: 多次Traditonal Event Registration 2) Inline Event Registration 形如 <element onclick=”doSomething()”> 图示: 图4:B场景 Inline Event Registration 这两种注册方式的区别是 element.onclick = doSomething; alert(element.onclick) 可以得到 function doSomething() { alert(this.navigator); //appCodeName this.value = "I am from the Object constructor"; this.style.backgroundColor = "# 000000"; } 可以看到this关键字被展现在onclick函数中,它指向HTML元素。 如果执行 <element onclick="doSomething()"> al ert(element.onclick) 可以得到 : function onclick(){ doSomething(); } 这仅仅是对doSomething()函数的一次调用,而doShomething的拥有者是window,因此 doSomething内的this指向window对象(啰嗦哦…….). 3 . C场景 具体内部细节不太了解,不知道是否可以这样理解 new doSomething(…..) 约等同于 var tempObj = {}; doSomething.apply(obj,new Array()); 这样tempObj 可以得到doSomething内所定义的属性和方法,但是对 于 doSomething.prototype上的属性方法无法得到-_-!! 4 D场景 不懂….. 完了 不专业,比较浅显,想不出几个专有名词,郁闷~ PS 1:好多内容是copy的(*_*!),对图中表达有点疑意。图上多次写出 copy of function ,按照字面理解是函数对象的拷贝,我认为实际上是一个引用拷贝,对象拷贝是不可能的,如果是这样的话,每次添加事件都会拷贝一次对象,这显然不妥。 PS 2: 因为this指向在运行时才确定,我们经常碰到一个问题,当给一个DOM对象添加事件后,我们希望this指向一个指定对象,而非DOM对象本身,如下例。 <input type="button" id='btn' /> <script language="javascript">function btnObj(id) { this.disabled = true; this.btn=document.getElementById(id); /* this.btn.onclick = btnOnclick ; 假如我们这样写,this会指向DOM对象,btnOnclick执行过程会报错 因为DOM btn并没有一个btn属性 */ //通过这种方式可以解决这个问题[有些情况也可用tempThis = this这种形式] this.btn.onclick = passHandler(this,btnOnclick);}function btnOnclick() { //如果this是DOM对象,这里就会报错,因为没有btn属性 this.btn.disabled = this.disabled; } function passHandler(obj,fun,arg) { return function(){ //if(!arg) {var arg = [];} return fun.apply(obj,(arg?arg:[])); } } new btnObj(”btn”); </script>   arguments 属性 为当前执行的 function 对象返回一个arguments 对象。 function.arguments function 参数是当前执行函数的名称,可以省略。 说明 通过 arguments 属性,函数可以处理可变数量的参数。 arguments 对象的 length 属性包含了传递给函数的参数的数目。对于arguments 对象所包含的单个参数,其访问方法与数组中所包含的参数的访问方法相同。 示例 下面的例子说明了 arguments 属性的用法: function ArgTest(){ var i, s, numargs = arguments.length; s = numargs; if (numargs < 2) arguments 属性 为当前执行的 function 对象返回一个arguments 对象。 function.arguments function 参数是当前执行函数的名称,可以省略。 说明 通过 arguments 属性,函数可以处理可变数量的参数。 arguments 对象的 length 属性包含了传递给函数的参数的数目。对于arguments 对象所包含的单个参数,其访问方法与数组中所包含的参数的访问方法相同。 示例 下面的例子说明了 arguments 属性的用法: function ArgTest(){ var i, s, numargs = arguments.length; s = numargs; if (numargs < 2) 在举个列子 <script language="JavaScript"> /**//* * 演示arguments的用法,如何获取实参数和形数数 */ function argTest(a,b,c,d){ var numargs = arguments.length; // 获取被传递参数的数值。 var expargs = argTest.length; // 获取期望参数的数值。 alert("实参数目为:"+numargs) alert("形数数目为:"+expargs) alert(arguments[0]) alert(argTest[0]) //undefined 没有这种用法 } //argTest(1,2) //argTest(1,2,3,4,5) /**//* * arguments不是数组(Array类) */ Array.prototype.selfvalue = 1; function testAguments(){ alert("arguments.selfvalue="+arguments.selfvalue); } //alert("Array.sefvalue="+new Array().selfvalue); //testAguments();

上一篇:linux流量限速工具tc简介
下一篇:手机充电科学小解

相关文章

关键词: this和arguments

相关评论