文档章节

js中this的总结(转载)

x
 xiaoqiang
发布于 2010/05/30 19:24
字数 1175
阅读 35
收藏 2

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

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

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

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

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

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

      
function InnerFoo()
       {
          
var Name = 'Inner Name';
           alert(Name
+ ', ' + this .Name);
       }
      
return InnerFoo;
   }
   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的使用呢?我暂时能想到的就这些了,欢迎讨论补充

本文转载自:http://hi.baidu.com/shaoxiaoming/blog/item/f4218b27842a1d04908f9d52.html

x
粉丝 1
博文 1
码字总数 0
作品 0
深圳
私信 提问
关于ASP.NET MVC的js和css资源管理

本文来源于博客园-钱智慧,转载请注明出处 通过这篇文章和这个回答,我们总结如下: 浏览器针对一个域名,最多只会开启6个线程来加载文件,比如head中如果有7个引入文件(js文件或者css文件)...

gogoblue
2017/04/08
0
0
Javascript 中js语句执行顺序

如果我们把嵌入在HTML中的<script> js coding </script>看做Js代码块(实际上Js没有代码块的意义一说,如果真要看成代码块那也应该是按函数块来划分)的话,下面就是Js代码执行顺序: 这里转...

learn_more
2014/09/21
1K
0
iOS--React Native浏览器插件

一:介绍 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用...

展菲
2018/12/16
0
0
Dart 比 JavaScript 更酷的10个理由

Dart 是 Google发明的一种新的编程语言。在使用JavaScript一年多以后,我对Dart可谓是一见钟情。我以前是做Java的,我在用JS的时候要学习很多新东西。 有人说你必须深入研究JavaScript,否则...

虫虫
2012/01/04
7.5K
13
前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单   在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航、二维码显示隐藏、文本提示等等......而这些效果都是可以使用纯css实现的(...

grootzhang
2016/05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Alibaba 实战(二) - 关于Spring Boot你不可不知道的实情

0 相关源码 1 什么是Spring Boot 一个快速开发的脚手架 作用 快速创建独立的、生产级的基于Spring的应用程序 特性 无需部署WAR文件 提供starter简化配置 尽可能自动配置Spring以及第三方库 ...

JavaEdge
今天
7
0
TensorFlow 机器学习秘籍中文第二版(初稿)

TensorFlow 入门 介绍 TensorFlow 如何工作 声明变量和张量 使用占位符和变量 使用矩阵 声明操作符 实现激活函数 使用数据源 其他资源 TensorFlow 的方式 介绍 计算图中的操作 对嵌套操作分层...

ApacheCN_飞龙
今天
7
0
五、Java设计模式之迪米特原则

定义:一个对象应该对其他对象保持最小的了解,又叫最小知道原则 尽量降低类与类之间的耦合 优点:降低类之间的耦合 强调只和朋友交流,不和陌生人说话 朋友:出现在成员变量、方法的输入、输...

东风破2019
昨天
23
0
jvm虚拟机结构

1:jvm可操作数据类型分为原始类型和引用类型,因此存在原始值和引用值被应用在赋值,参数,返回和运算操作中,jvm希望在运行时 明确变量的类型,即编译器编译成class文件需要对变量进行类型...

xpp_ba
昨天
5
0
聊聊nacos Service的processClientBeat

序 本文主要研究一下nacos Service的processClientBeat Service.processClientBeat nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/core/Service.java public class Service ex......

go4it
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部