首页 > 编程语言 >Javascript中this的用法小结

Javascript中this的用法小结

时间:2023-08-28 14:01:14浏览次数:31  
标签:btn doSomething 指向 对象 Javascript 用法 onclick element 小结


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

ο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>



其他灵活的应用还有很多,就不一一列举了(大家都比偶研究的要深入-_-!)。几位有需要补充可以回复或者直接在文章上改,OVER~~~

标签:btn,doSomething,指向,对象,Javascript,用法,onclick,element,小结
From: https://blog.51cto.com/u_16237557/7263451

相关文章

  • Javascript Print(*)
    1.实现打印功能1)ExecWB()通过脚本程序来调用IE菜单下面的打印命令。实现的代码如下:<scriptlanguage="javascript">functionprintsetup(){//打印页面设置wb.execwb(8,1);}functionprintpreview(){//打印页面预览wb.execwb(7,1);......
  • Javascript压缩工具
    javascriptcompressor.com(在线压缩)shrinksafe.dojotoolkit.org(在线文件压缩)dean.edwards.name/packer(在线压缩)YUICompressor(使用命令行来压缩,需要JAVA虚拟机来运行压缩程序 有个压缩比更高的,是个要注册的软件...javascriptObfuscatorhttp://www.javascript-source.......
  • ubuntu上mysql的安装以及基本用法
    1.使用apt-get查找当前可用的mysql版本.apt-cachesearchmysql返回的结果集为: 2.通过结果集找到最新可用的服务端是mysql-server,安装mysql-serversudoapt-getinstallmysql-server 按提示安装即可(中间会提示设置root口令)。3.测试是否安装正确#登录mysql-uroot-p出现以下......
  • torch.sum()用法-截至2023年8月28日
    torch.sum()维度0,1,2。比如现在有\(3\times\2\times3\)的张量,理解为3个\(2\times3\)的矩阵。当dim=0,1,2时分别在哪个维度上相加[1]?下面是具体的矩阵\[[1,2,3]\\[4,5,6]\\\\[1,2,3]\\[4,5,6]\\\\[1,2,3]\\[4,5,6]\]在哪个维度相加,那个维度就去掉。\(3\times2\times3\)分别......
  • JavaScript-比较运算符
    概述比较运算符用于比较两个值的大小,然后返回一个布尔值,表示是否满足指定的条件。2>1//true上面代码比较2是否大于1,返回true。注意,比较运算符可以比较各种类型的值,不仅仅是数值。一共提供了8个比较运算符。>大于运算符<小于运算符<=小于或等于运算符>=大于或等于运算符==......
  • JavaScript 基础知识
    avaScript基础知识以前的概述:网络入门下一个JavaScript是一种为您的网站添加交互性的编程语言。这种情况发生在游戏中、按下按钮或在表单上输入数据时的响应行为中;具有动感的造型;动画等。本文帮助您开始使用JavaScript并加深您对可能性的理解。什么是JavaScript?Ja......
  • ES中的Multi_match深入解读:best_fields、most_fields、cross_fields用法一览
    1、multi_match是啥概念:多字段检索,是组合查询的另一种形态,考试的时候如果考察多字段检索,并不一定必须使用multi_match,使用boolquery,只要结果正确亦可,除非题目中明确要求(目前没有强制要求过)语法:GET<index>/_search{"query":{"multi_match":{"query":"<qu......
  • EL表达式中empty的用法
    <c:iftest="${!emptykey}">${key}</c:if><c:iftest="${emptykey}">所有</c:if>当key不为空时输出key的值。当key为空时,输出“所有”规则:1若key为null时,返回true2若key为空String时,返回true3若key为空Array时,返回true4若key为空Map时,返回true5若key为空Collection时,返回true......
  • malloc 函数的用法
    函数声明(函数原型):void*malloc(intsize);说明:malloc向系统申请分配指定size个字节的内存空间。返回类型是void*类型。void*表示未确定类型的指针。C,C++规定,void*类型可以强制转换为任何其它类型的指针。从函数声明上可以看出。malloc和new至少有两个不同:new返回指......
  • JavaScript的变量提升
    参考资料:https://time.geekbang.org/column/article/126339目录变量提升变量形式声明的函数变量提升导致的问题变量被覆盖变量不被销毁避开变量提升引入let和const关键字块级作用域变量提升是在代码执行时,把变量和函数的声明部分提升到代码开头的行为,变量被提升后,会被默认设置......