首页 > 编程语言 >JavaScript中this关键字使用方法详解

JavaScript中this关键字使用方法详解

时间:2022-12-16 17:07:11浏览次数:63  
标签:function JSClass Name JavaScript 关键字 详解 var div


    在面向对象编程语言中,对于this关键字我们是非常熟悉的。比如C++、C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的。JavaScript也提供了这个this关键字,不过用起来就比经典OO语言中要"混乱"的多了。

    下面就来看看,在JavaScript中各种this的使用方法有什么混乱之处?

    1、在HTML元素事件属性中inline方式使用this关键字:

<
div
onclick
="
// 可以在里面使用this

">division element</div>

    我们一般比较常用对的方法是在此使用:javascirpt: EventHandler(this),这样的形式。不过这里其实可以写任何合法的JavaScript语句,要是高兴在此定义个类也可以(不过将会是个内部类)。这里的原理是脚本引擎生成了一个div实例对象的匿名成员方法,而onclick指向这个方法。

    2、用DOM方式在事件处理函数中使用this关键字:


<
div
id
="elmtDiv"
>
division element
</
div
>

<
script
language
="javascript"
>


var div = document.getElementById('elmtDiv');
div.attachEvent('onclick', EventHandler);

function EventHandler()

{
// 在此使用this
}
</
script
>

    这时的EventHandler()方法中的this关键字,指示的对象是IE的window对象。这是因为EventHandler只是一个普通的函数,对于attachEvent后,脚本引擎对它的调用和div对象本身没有任何的关系。同时你可以再看看EventHandler的caller属性,它是等于null的。如果我们要在这个方法中获得div对象引用,应该使用:this.event.srcElement。

    3、用DHTML方式在事件处理函数中使用this关键字:


JavaScript中this关键字使用方法详解_function

<  div 
id
="elmtDiv"
>
division element
</
div
>

< script
language
="javascript"
>


var div = document.getElementById('elmtDiv');
div.onclick = function()

{
// 在此使用this
};
</ script
>

    这里的this关键字指示的内容是div元素对象实例,在脚本中使用DHTML方式直接为div.onclick赋值一个EventHandler的方法,等于为div对象实例添加一个成员方法。这种方式和第一种方法的区别是,第一种方法是使用HTML方式,而这里是DHTML方式,后者脚本解析引擎不会再生成匿名方法。

    4、类定义中使用this关键字:


JavaScript中this关键字使用方法详解_function

function   JSClass()
{
var myName =
'jsclass';
this .m_Name =
'JSClass';
}

JSClass.prototype.ToString = function
()
{
alert(myName + ', ' +

this
.m_Name);
};

var jc =

new
JSClass();
jc.ToString();

    这是JavaScript模拟内定义中对this的使用,这个和其它的OO语言中的情况非常的相识。但是这里要求成员属性和方法必须使用this关键字来引用,运行上面的程序会被告知myName未定义。

    5、为脚本引擎内部对象添加​​原形方法​​中的this关键字:


JavaScript中this关键字使用方法详解_function

Function.prototype.GetName   =     function  ()
{
var fnName =
this
.toString();
fnName = fnName.substr( 0 , fnName.indexOf('('));
fnName = fnName.replace( /^ function
/
, '');
return fnName.replace( / (
^
/s
+
)
|
(/s
+
$)
/
g, '');
}
function foo(){}
alert(foo.GetName());

    这里的this指代的是被添加原形的类的实例,和4中类定义有些相似,没有什么太特别的地方。

    6、结合2&4,说一个比较迷惑的this关键字使用:


JavaScript中this关键字使用方法详解_function

function   JSClass()
{
this .m_Text = 'division element';
this .m_Element = document.createElement('DIV');
this .m_Element.innerHTML = this
.m_Text;

this .m_Element.attachEvent('onclick', this .ToString);
}

JSClass.prototype.Render = function ()
{
document.body.appendChild( this .m_Element);
}

JSClass.prototype.ToString = function ()
{
alert( this .m_Text);
};

var jc = new
JSClass();
jc.Render();
jc.ToString();

    我就说说结果,页面运行后会显示:"division element",确定后点击文字"division element",将会显示:"undefined"。

    7、CSS的expression表达式中使用this关键字:


JavaScript中this关键字使用方法详解_function

<  table   width  ="100"   height  ="100"
>

< tr >
< td >
< div style ="width: expression(this.parentElement.width);
height: expression(this.parentElement.height);" >
division element </ div >
</ td >
</ tr >
</ table >

    这里的this看作和1中的一样就可以了,它也使指代div元素对象实例本身。

    8、函数中的内部函数中使用this关键字:


JavaScript中this关键字使用方法详解_function

function   OuterFoo()
{
this .Name = 'Outer Name';

function InnerFoo()
{
var Name = 'Inner Name';
alert(Name + ', ' + this .Name);
}
return InnerFoo;
}
OuterFoo()();

JavaScript中this关键字使用方法详解_function

    运行结果显示是:"Inner Name, Outer Name"JavaScript中this关键字使用方法详解_div_08。按我们在2中的讲解,这里的结果如果是"Inner Name, undefined"似乎更合理些吧?但是正确的结果确实是前者,这是由于JavaScript变量作用域的问题决定的,详细了解推荐参看"​​原来JScript中的关键字'var'还是有文章的​​"一文及回复。

    说了这么多JavaScript中this的用法,其实this最根本的特性还是和OO语言中的定义相吻合的。之所以有这么多看似混乱的使用方式,是因为JavaScript语言(解释器和语言本身的内容)本身在实现上是遵循OO的(Object-based),连它的所有数据类型都是对象,也有Object这样一个super Object。但是这个语言在运行上(runtime),就没有遵循完备的OO特点,所以就出现了this的指代混乱。


标签:function,JSClass,Name,JavaScript,关键字,详解,var,div
From: https://blog.51cto.com/u_627724/5947895

相关文章

  • Mysql主从复制详解
    目的:主从服务器设置的稳健性得以提升,如果主服务器发生故障,可以把本来作为备份的从服务器提升为新的主服务器。在主从服务器上分开处理用户的请求,可获得更短的响应时间。用从......
  • SQL语句的REVERSE函数,关键字用法
    1.函数。select reverse(123456)fromdual;select reverse('123456') fromdual;2.关键字。declarevnumber;cnumber;beginv:=100;forcinreverse......
  • django数据模型db_constraint的使用详解
    ManyToMany参数((through,db_constraint))classBook(models.Model):name=models.CharField(max_length=20)authors=models.ManyToMany('Author',through='Score')......
  • [JVM]深入类加载机制详解
    如下图所示,JVM类加载机制分为五个部分:加载,验证,准备,解析,初始化,下面我们就分别来看一下这五个过程。​​​​加载加载是类加载过程中的一个阶段,这个阶段会在内存中生成一个代......
  • cs61abc分享会(六)程序的输入输出详解 - 标准输入输出,文件,设备,EOF,命令行参数
    系列文章目录分享会链接2022年7月23日分享会长期链接:https://meeting.tencent.com/dm/Qet4sVXmOccd分享时间:9点20到9点50视频录播在最下方文章目录​​系列文章目录​​​......
  • 二阶段目标检测网络-FPN 详解
    论文背景引言(Introduction)特征金字塔网络FPNFPN网络建立Anchor锚框生成规则实验代码解读参考资料本篇文章是论文阅读笔记和网络理解心得总结而来,部分资料和......
  • 新型材料厂电动葫芦PLC无线通讯应用方案详解
    一.应用背景电动葫芦是一种安装在天车、龙门吊之上的特种起重设备,具有体积小,自重轻,操作简单,使用方便等特点,是起升搬运物品,最理想的起重设备之一。目前电动葫芦的控制部分都是......
  • git 码云 安装配置使用图文详解
    码云快速使用以下步骤以 ​​oschina/git-osc​​ 仓库为例子,在您使用Gitee的过程中,具体链接地址请填写对应的仓库地址。快速设置:如果您知道该怎么操作,直接使用下面的......
  • Java多线程详解(通俗易懂)
    一、线程简介1.什么是进程?电脑中会有很多单独运行的程序,每个程序有一个独立的进程,而进程之间是相互独立存在的。例如图中的微信、酷狗音乐、电脑管家等等。2.什么是......
  • 【LeetCode】题解合集(JavaScript版)
    前言:今年断断续续写了些LeetCode题目,一方面是为了一个比较现实的问题——面试,最重要的是要复习之前学习的数据结构与算法。后面有时间还会接续刷题…题解合集:题号题目题解1......