- 浏览: 1153503 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (411)
- ASP (6)
- ASP.NET (2)
- CSS (4)
- HTML (11)
- Javascript (34)
- Java (100)
- PHP (1)
- XML (2)
- Flash/Flex/AS (1)
- 编程理论 (6)
- 操作系统 (23)
- 架构与搭建 (13)
- 软件应用 (39)
- 移动开发及应用 (4)
- UI设计 (2)
- 数据库 (23)
- 围棋 (1)
- 闲语茶楼 (6)
- 金融 (1)
- 其他 (3)
- Linux/Unix (38)
- 项目管理 (3)
- cmd (2)
- ssh (3)
- SVN (1)
- 移动开发 (1)
- HTML5 (1)
- jquery (1)
- redis (1)
- nginx (2)
- webservice (1)
- vmware (1)
- ssl (1)
- eclipse (1)
- sqlite (1)
- spring (2)
最新评论
-
cnhome:
Java 8 下:// 编码String asB64 = Ba ...
不要使用sun.misc.BASE64Encoder -
请叫我翠西狗:
那如果我要用this.getServletContext() ...
JSP/Servlet使用代理或路由器映射时获取服务器地址为内网地址 -
nomblouder:
按照别的博客,别名一直是p4merge,导致一直报错comma ...
win与linux下git配置p4merge为合并比较工具的方法 -
linuxzhang:
请问我按你的方法修改了sts-3.7.3.RELEASE中的o ...
Eclipse中setter/getter方法自动添加属性注释 -
yzh__:
求解答。。。
Struts2定义默认拦截器时需要注意
1. 概述
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>
其他灵活的应用还有很多,就不一一列举了(大家都比偶研究的要深入-_-!)。几位有需要补充可以回复或者直接在文章上改,OVER~~~
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>
其他灵活的应用还有很多,就不一一列举了(大家都比偶研究的要深入-_-!)。几位有需要补充可以回复或者直接在文章上改,OVER~~~
发表评论
-
jQuery 1.9升级指南(中文翻译版)【转】
2014-02-07 13:49 1048jQuery 1.9删除或修改了几个过去行为不一致或效率低 ... -
Java现实WebSocket
2013-11-15 09:59 1996无所不能的Java系列文章,涵盖了Java的思想,应用开发, ... -
CKFinder2.1的破解方法
2012-02-07 11:30 3856打开ckfinder.js文件 一、 找到 ... -
IE下无法跨域跳转的问题
2012-01-04 10:25 3119这两天为了实现项目中的子平台session共享的问题,几乎费劲 ... -
各按键对应keycode一览表
2011-08-24 14:29 1443keycode 8 = BackSpace Ba ... -
CKEditer的销毁
2011-07-27 11:39 2136由于业务需求,在一分表单中对同一个textarea需要根据下拉 ... -
DWR的注释(annotations)使用及反向调用(Reverse Ajax)
2011-04-21 10:09 1463先说说注释语法,省掉dwr.xml。(自从用了java 5 之 ... -
玩转FusionCharts:Div层被Flash遮住
2011-02-18 15:02 1867在应用FusionCharts的过程中,可能会出现页面的Div ... -
jQuery锚点跳转滚动条平滑滚动
2010-11-25 00:12 2457$("html,body").animat ... -
Javascript Print(*)
2010-09-28 15:10 14621. 实现打印功能1) ExecW ... -
在网页中控制PDF打印的方法
2010-09-08 16:18 6730Adobe Reader: 注:以下内容需要本地安装过Ado ... -
Web框架——DWR中signatures标签的使用
2010-09-02 12:18 2085signatures段使DWR能确定集合中存放的数据类型。例如 ... -
Javascript压缩工具
2010-08-05 13:42 1009javascriptcompressor.com (在线压 ... -
用javascript设置iframe的onload事件的回调方法(兼容ie及firefox)
2010-06-04 15:10 2336function eventPush(obj, event, ... -
如何控制获得form表单弹出新窗口
2009-11-13 11:47 7289先用 window.open 打开一个你期望样式的窗口,然后将 ... -
javascript中parseInt的问题
2009-08-11 11:56 1244今天遇到一个有趣的问题,就是在用javascript的pa ... -
JavaScript FSO属性大全
2009-07-10 16:55 1840什么是FSO? FSO 即 Fil ... -
你不知道的 JavaScript - “this”
2009-06-24 16:45 1276JavaScript 里的 this 到底指得是什么?很多 ... -
javascript窗口属性示意图
2007-03-15 10:15 935javascript窗口属性示意图 ------------ ... -
IE与FireFox的showModalDialog
2008-01-28 15:21 3023在网页程序中,有时我们会希望使用者按下按钮后开启一个保持在原窗 ...
相关推荐
本篇文章主要是对javascript中的self和this用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
在本篇文章里小编给大家分享了关于JavaScript中this用法学习笔记以及知识点总结,有兴趣的朋友们学习下。
但是在javascript中,由于 javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的 自由和灵活,结合apply(call)方法,可以使JS变...
主要介绍了JavaScript中this关键字用法,结合实例形式总结分析了javascript中this关键字在不同条件下的指向问题与相关操作技巧,需要的朋友可以参考下
java中this&super的用法小结.doc
主要介绍了原生javascript中this几种常见用法,结合实例形式总结分析了JavaScript中this的功能、常见用法及操作注意事项,需要的朋友可以参考下
主要介绍了javascript中this的用法,结合具体实例形式总结分析了javascript中this各种常见的功能、用法及相关操作注意事项,需要的朋友可以参考下
break,continue和return这三个语句的用法新手们经常弄混淆,至少在我学习c语言的时候经常把它们的用法给搞错。不过现在好了,我已彻底搞清楚它们之间的用法
主要介绍了JavaScript中的this基本问题,结合实例形式总结分析了JavaScript中this的功能、常见用法与操作注意事项,需要的朋友可以参考下
第2章 浏览器中的JavaScript 2.1 嵌入网页的可执行内容 2.2 赏心悦目的特效 2.3 使用JavaScript来与用户交互 2.4 绕开脚本陷阱 2.5 总结 第3章 开发环境和调试方法 3.1 我能用什么来编写脚本--...
在jquery中,extend其实在做插件时还是用的比较多的,今天同时小结jquery和ext js中 的extend用法,先来看jquery中的。 1) extend(dest,src1,src2,src3…); 代码如下: var start = { id: 123, count: 41, desc: ...
javascript中的location.href有很多种用法,主要如下。 self.location.href=”/url” 当前页面打开URL页面 location.href=”/url” 当前页面打开URL页面 windows.location.href=”/url” 当前页面打开URL页面,前面...
而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a标签的一种写法<a></a>,所以就来整理下a标签中href的几种用法。 一、js的几种调用方法(参考总结的) 1、a href="[removed]js_method();" 这...
目录安装yarn add @alastair/contextmenu用法设计您喜欢的上下文菜单,然后通过将上下文菜单ref创建到目标元素来附加它。 import createContextMenuRef from '@alastair/contextmenu'const MyWidget = props => { ...
使用import指令导入库到模板中,Freemarker会为导入的库创建新的名字空间,并可以通过import指令中指定的散列变量访问库中的变量: ${my.mail} ${mail} 输出结果: <p>Copyright (C) 1999-2002 ...
这一点在JavaScript中其实并不新鲜,Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象,因此现在通过jQuery编写Ajax程序将自动获得这一功能。 开发人员借此可以使用无法立即获得的...