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

οnclick=”doSomething()”>), 此时this指向 window对象 。

2) Traditional event registration 传统事件注册 (DHTML方式).
形如 element.onclick = doSomething; 此时this指向 element对象

3) <element οnclick=”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 οnclick=”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 ο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

this和arguments相关推荐

  1. JavaScript arguments对象

    1.在JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性.arguments非常类似Array,但实际上又不是一个Array实例.可以通过如下代码得以证 ...

  2. 【Qt】Qt再学习(十六):QObject::connect: Cannot queue arguments of type ‘QString‘

    1.问题描述 跨线程使用信号和槽时,如果是非const的引用传参,就会报如下的错误: QObject::connect: Cannot queue arguments of type 'QString ...

  3. java unlimited_具有无限参数的Java方法(Java method with unlimited arguments)

    具有无限参数的Java方法(Java method with unlimited arguments) Spring框架使用方法,您可以根据需要传递尽可能多的参数. 我想写一个函数,也可以采取无限量的 ...

  4. javascript函数嵌套时arguments的问题

    疑问: var funtest = function () {var fun = function (val, val2) {alert(arguments.length); //此处答案? 有些人回 ...

  5. IDE set arguments

    2019独角兽企业重金招聘Python工程师标准>>> code::blocks -> Project -->set program's arguments qtcrea ...

  6. 解决Undefined function or method 'vgg_kmiter' for input arguments of type 'double'.

    Undefined function or method 'vgg_kmiter' for input arguments of type 'double'. Error in ==> vgg_ ...

  7. 浅析js中的arguments

    arguments就是传递进函数的参数列表,它是一个类数组对象-Array-Like Object. 类数组对象,简单来说就是拥有length属性,如我们常用的NodeList,arguments,但 ...

  8. Error in select(., cyl, mpg) : unused arguments (cyl, mpg)

    Error in select(., cyl, mpg) : unused arguments (cyl, mpg) 目录 Error in select(., cyl, mpg) : unused ...

  9. oracle ora 13011,ORA-00600: internal error code, arguments: [13011]

    近期,一客户历史数据库屡次遇到ORA-00600: internal error code, arguments: [13011].附带的,还有ORA-01499 SQL> analyze ta ...

  10. python调用dll报错:ValueError: Procedure called with not enough arguments (4 bytes missing) or wrong call

    python调用dll报错:ValueError: Procedure called with not enough arguments (4 bytes missing) or wrong call ...

最新文章

  1. 如何成为一个合格的项目经理?
  2. 如何找回无法运行此项请求机械硬盘的文件
  3. 【GDOI2014模拟】旅行 题解代码
  4. 中科院C语言应聘机试编程题6,中科院计算所保研笔试+机试+面试经验分享
  5. php合成或者创建gif动画
  6. 计算机系统结构自学试卷,全国2004年4月高等教育自学考试计算机系统结构试题...
  7. 常见数据分析误区有哪些
  8. 建筑电气工程设计常用图形和文字符号_建筑电气施工图设计正误案例对比
  9. SmartGit 无限试用方法
  10. mac matlab 模糊,MATLAB 2014a 在Mac OS X yosemite 10.10 Retina显示模糊的解决办法
  11. 算法导论第三版 第3章习题答案
  12. 智能传感器芯片行业下游市场应用前景分析预测及市场需求结构分析
  13. forge不能用java打开_我玩我的世界把java更新了以后,就再也进不了加了forge的版本了,启动器,游戏,forge都重...
  14. wordpress主题下载,wp主题模板下载
  15. SPA单页面首屏加载慢怎么解决???
  16. 关于常用颜色小聚:有据说是令人舒服的颜色值,有R G B 常用颜色列表
  17. 华为又招了一名天才少年!
  18. 塔多漫画一直维护服务器,塔多漫画
  19. 超级详细的HTML5讲解
  20. 什么是个人核心竞争力

热门文章

  1. 【原】iOS:手把手教你发布代码到CocoaPods(Trunk方式)
  2. [js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展字符串位置方法(4)
  3. BZOJ 1087 [SCOI2005]互不侵犯King ——状压DP
  4. Cacti 使用安装详解-企业级实例
  5. 自定义Button,复写里面的onKeyDown,不起作用
  6. 烂泥:【解决】word复制windows live writer没有图片
  7. 如何判断注册用户是否已经存在(membership验证)
  8. 计算机学科技术前沿:互联网上信息可信性的现状
  9. 22--删除字符串中的所有相邻重复项
  10. python threading 结束线程