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); //appCodeNamethis.value = "I am from the Object constructor";this.style.backgroundColor = "# 000000";}1. (A)作为普通函数直接调用时，this指向window对象.2. (B)作为控件事件触发时1） inline event registration 内联事件注册 .将事件直接写在HTML代码中(<elementοnclick=”doSomething()”>), 此时this指向 window对象 。2） Traditional event registration 传统事件注册 （DHTML方式）.形如 element.onclick = doSomething; 此时this指向 element对象3） <element οnclick=”doSomething(this)”>作为参数传递可以指向element3. (C)作为对象使用时this指向当前对象。形如：new doSomething();4. (D)使用apply 或者call方法时，this指向所传递的对象。形如：var obj={}; doSomething.apply(obj,new Array(”nothing”); //thisobj2.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 Registration2) Inline Event Registration形如 <element οnclick=”doSomething()”>图示:图4：B场景 Inline Event Registration这两种注册方式的区别是element.onclick = doSomething;alert(element.onclick)可以得到function doSomething() {alert(this.navigator); //appCodeNamethis.value = "I am from the Object constructor";this.style.backgroundColor = "# 000000";}可以看到this关键字被展现在onclick函数中，它指向HTML元素。如果执行<element οnclick="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();
转载于:https://www.cnblogs.com/delin/archive/2010/06/17/1759711.html
