js中的this

在面向对象编程语言中,对于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关键字:

 <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关键字:

functionJSClass()
  {
      varmyName ='jsclass';
      this.m_Name ='JSClass';
  }

  JSClass.prototype.ToString =function()
  {
      alert(myName +', ' +this.m_Name);
  };

  varjc =newJSClass();
  jc.ToString();


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

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

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


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

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

functionJSClass()
  {
      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);
  };

  varjc =newJSClass();
  jc.Render(); 
  jc.ToString();


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

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

<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关键字:

functionOuterFoo()
  {
      this.Name ='Outer Name';
 
      functionInnerFoo()
      {
          varName ='Inner Name'; 
          alert(Name +', ' +this.Name);
      }
      returnInnerFoo;
  }
  OuterFoo()();


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

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

    JavaScript里还有什么地方有this的使用呢?我暂时能想到的就这些了,欢迎讨论补充

转载于:https://www.cnblogs.com/jingxinchao/p/3480735.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/460640.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在 Windows Azure 上部署并定制化 FreeBSD 虚拟机镜像

&#xfeff;&#xfeff;发布于 2014-12-11作者 陈阳FreeBSD 基础镜像现已登陆中国的 VM Depot&#xff01; 对于青睐 BSD 而非 Linux 的开源爱好者来说&#xff0c;这无疑是个好消息。同时&#xff0c;随着该基础镜像的可用&#xff0c;我们期待很快看到更多来自社区的基于 F…

man命令:查找linux命令、API或者C库函数

可以使用man命令。 man 1 xxx 1表示查找linux命令&#xff0c;比如 man 1 ls man 2 xxx 2表示查找linux API &#xff0c;比如 man 2 socket man 3 xxx 3表示查找C库函数&#xff0c;比如 man 3 print

关于在asp.net中播放MP4格式的视频(好吧,只兼容支持html5的浏览器,ie8及以下的都歇菜了)...

项目要求只能播放MP4格式的视频&#xff0c;同事的播放器在我这里不完全管用&#xff0c;对于部分mp4格式的视频编码不支持&#xff0c;所以各种在网上找&#xff0c;在http://www.iteye.com/problems/75503问答的一个网友答案中找到了适合项目中当前mp4格式的播放器&#xff0…

如何理解套接字的形容词前缀:“面向连接”与“无连接”

以下内容源于C语言中文网资料的学习与整理&#xff0c;非本人原创&#xff0c;如有侵权请告知删除。 前言 在《网络套接字socket的简介》一文中提到&#xff0c;流格式套接字&#xff08;Stream Sockets&#xff09;就是“面向连接的套接字”&#xff0c;它基于 TCP 协议&…

1682: [Usaco2005 Mar]Out of Hay 干草危机

1682: [Usaco2005 Mar]Out of Hay 干草危机 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 391 Solved: 258[Submit][Status]Description The cows have run out of hay, a horrible event that must be remedied immediately. Bessie intends to visit the other farms to …

文件IO——Linux系统如何管理文件

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 硬盘中的静态文件 文件平时以一种固定的形式存放在硬盘中&#xff0c;我们叫它静态文件。 一块硬盘中可以分为两大区域&#xff1a;一个是硬盘内容管理表&#xff0c;另一个是真正存储内容的区域。 …

oracle存储过程 --1

一&#xff0c;oracle存储过程语法 1.oracle存储过程结构 CREATE OR REPLACE PROCEDURE oracle存储过程名字 ( 参数1 IN NUMBER, 参数2 IN NUMBER ) IS 变量1 INTEGER :0; 变量2 DATE; BEGIN END oracle存储过程名字 2.无返回值的oracle存储过程 create or replac…

RHEL/CentOS下编译安装Nginx

##下载nginx源码&#xff1a;wget http://nginx.org/download/nginx-1.7.8.tar.gz tar -xv -f nginx-1.7.8.tar.gz -C /usr/local/src/##安装编译环境和必须的组件&#xff1a;yum groupinstall Development Tools yum install pcre pcre-devel zlib zlib-devel openssl openss…

12.13记录//QQDemo示例程序源代码

笔记的完整版pdf文档下载地址: https://www.evernote.com/shard/s227/sh/ac692160-68c7-4149-83ea-0db5385e28b0/5742995e6034e3d3f5c4793465d50a8c 笔记的文本摘要如下所示: 注意:以下仅仅是文本摘要,没有贴图,出现右边的图标()表示笔记中此处有图片,完整笔记请前往pdf链接中观…

文件IO——文件IO的API

以下内容源于网络资源的学习与整理&#xff0c;如有侵权&#xff0c;请告知删除。 文件操作的一般步骤 在Linux系统中要操作一个文件&#xff0c;一般是先使用open函数打开文件&#xff0c;得到一个文件描述符&#xff0c;然后对文件进行读写操作&#xff08;或其他操作&#x…

【转】功能测试的经验总结

测试准备&#xff1a; 1、实际测试总比你预想的要花更多的时间&#xff0c;遇到更多的麻烦&#xff0c;所以要尽量争取足够的测试时间&#xff0c;不要不加思索的说这个东西我一星期肯定可以测完。还要尽可能考虑到测试过程中的风险&#xff0c;比如测试环境的问题、部署失败的…

文件IO——open函数的参数flags详解

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 前言 在命令行中使用“man 2 open”可以获知open这个文件IO API的使用方法。 open函数的模型有两种&#xff0c;根据需要选择其中一种即可。 int open(const char *pathname, int flags); int open(…

oracle建库及plsql建表空间的用法

所有程序—》ORACLE-JHEMR-----------》配置和移植工具-----》DataBase Configuration Assistant-------中间就需要改一个数据仓库即可&#xff0c;其他的都是下一步&#xff0c;统一口令为**然后建监听服务&#xff0c;测试时改登录为system **&#xff0c;之后用plsql登录上&…

USACO 1.5.4 Checker Challenge

题意&#xff1a;经典的八皇后问题 解法&#xff1a; 采用朴素的每一次放置都与前面的所有行进行比较&#xff0c;在N 13的时候时间会爆掉 《入门经典》上提供的方法很经典&#xff0c;vis数组的使用&#xff0c;具体见《入门经典》125页 /* ID:lsswxr1 PROG:checker LANG:C */…

Spark 1.1.1 Submitting Applications

回到目录 Submitting Applications The spark-submit script in Spark’s bin directory is used to launch applications on a cluster. It can use all of Spark’s supported cluster managersthrough a uniform interface so you don’t have to configure your applicatio…

如何描述变量:存储类、生命周期,作用域、链接属性

可以根据一个变量的存储类、作用域、链接属性、生命周期来描述该变量。 其中&#xff0c;存储类决定了生命周期&#xff0c;作用域决定了链接属性。 存储类 存储类表明变量在哪里存储。见博文Linux下C语言程序的内存布局_天糊土的博客-CSDN博客 作用域 作用域表明变量起作用的…

mysql 修改表名的方法:sql语句

在使用mysql时&#xff0c;经常遇到表名不符合规范或标准&#xff0c;但是表里已经有大量的数据了&#xff0c;如何保留数据&#xff0c;只更改表名呢&#xff1f; 可以通过建一个相同的表结构的表&#xff0c;把原来的数据导入到新表中&#xff0c;但是这样视乎很麻烦。 能否简…

java String类 常用函数

为什么80%的码农都做不了架构师&#xff1f;>>> 1. 获取 int indexOf(int c) int indexOf(int c, int start) char charAt(int index) 2.判断 判断是否包含一个字符串 boolean contains(CharSequence cs) indexOf() //也可以用来判断是否包含 判断是否有内容 boole…

设备驱动程序的简介

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、驱动的概念 设备驱动程序&#xff08;Device Driver&#xff09;&#xff0c;简称驱动程序、驱动&#xff08;Driver&#xff09;&#xff0c;指操作系统中用来操控硬件的代码。 驱动是硬件与操…

Android开发实践:掌握Camera的预览方向和拍照方向

Android的Camera相关应用开发中&#xff0c;有一个必须搞清楚的知识点&#xff0c;就是Camera的预览方向和拍照方向&#xff0c;本文就重点讨论一下这个问题。图像的Sensor方向&#xff1a;手机Camera的图像数据都是来自于摄像头硬件的图像传感器&#xff08;Image Sensor&…