js面向对象编程:this到底代表什么?第二篇

总认为自己弄明白了js中this的含义,this总是指向调用方法的对象,作为方法调用,那么this就是指实例化的对象。但前几天自己写脚本却遇到了一个很奇怪的问题。

代码如下:

 //内部对象AutoCompleteInner
          function AutoCompleteInner(transformResultInner)
		  {
		    if(transformResultInner)
		    {
		      this.transformResultInner=transformResultInner;
			}
		  }
		   AutoCompleteInner.prototype.transformResultInner = function()
		  {
              alert("inner transformResult");
          }
          AutoCompleteInner.prototype.TestInner = function()
		  {
              this.transformResultInner();
          }
		   //封装了对内部对象AutoCompleteInner的调用
       function AutoCompleteOuter(obj)
	   {
            this.TextField = obj.TextField;
            this.ValueField = obj.ValueField;
           if (obj.transformResult)
		   {
             this.transformResultOuter = obj.transformResultOuter;
           }
        }
		 AutoCompleteOuter.prototype.transformResultOuter=function()
		{
		   alert("TextField:"+this.TextField+",ValueField:"+this.ValueField);
        }
		AutoCompleteOuter.prototype.TestOuter = function ()
		{
		  var test =new AutoCompleteInner(this.transformResultOuter);
		  test.TestInner();
		}

测试代码1

 //测试代码 1
		 function test(){
	        var obj={};
		  obj.TextField = "TextField";
          obj.ValueField ="ValueField";
		  var temp=new AutoCompleteOuter(obj);
		   temp.transformResultOuter();
	     }	

弹出现实的内容为“TextField:TextField,ValueField:ValueField”这个很容易理解,在实例AutoCompleteOuter的方法transformResultOuter中的this就是AutoCompleteOuter的实例temp,弹出的内容自然也和合理,符合作为方法调用,那么this就是指实例化的对象。

测试代码2

 function test(){
	        var obj={};
		  obj.TextField = "TextField";
          obj.ValueField ="ValueField";
		  var temp=new AutoCompleteOuter(obj);
		  // temp.transformResultOuter();
		  temp.TestOuter();
	     }	

通过分析代码,发现,调用的也是AutoCompleteOuter的方法transformResultOuter,但:问题是:

弹出的内容却是“TextField:undefined,ValueField:undefined

很奇怪,调用的方法一样传递的参数也样,但为什么弹出的弹出的内容不一样的?

经过分析发现在测试二的代码中this的含义和测试一中的代码中的this已经不一样了,测试一中的this代表的是AutoCompleteOuter的实例,但在测试二中this却代表的是AutoCompleteInner的实例,这也就是为什么相同的代码为什么显示的内容却不一样的原因了。

看来this总是指向调用方法的对象这才是区分this的根本方法,this是上下文相关的,如何机械的理解作为方法调用,那么this就是指实例化的对象。就很难理解此处的问题。

js面向对象编程:this到底代表什么?第二篇

时间: 2024-08-23 20:50:21

js面向对象编程:this到底代表什么?第二篇的相关文章

js面向对象编程:this到底代表什么?

在js中this的用法很让人迷惑,有些像Java或者C#中的this,但又不完全一样.按照流行的说法this总是指向调用方法的对象. 1.纯粹函数调用. function ListCommon2(x) { this.x=x; alert("this 是 ListCommon2"+(this instanceof ListCommon2)); alert("this.constructor"+this.constructor); } function test(){

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

js面向对象编程:如何实现方法重载

js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载 1同名函数的调用问题 都知道在js中如果存在多个名称相同的函数,则调用实际每次都只使用最后一个,js其实是没有重载的,也就是说,如果定义了多个同名的函数,单参数不一样,在调用时,js不管参数个数,只管前后顺序 例如: function test1(arg1) { alert("参数1:"+arg1); } function test1(arg1

js面向对象编程:数据的缓存

js也可以通过缓存数据,来加快处理速度.在必要的时候使用空间还换取时间还是值得的.例如需要很长时间才能完成的计算,就可以把计算结果缓存到客户端,以后就可以直接使用缓存的计算结果,不在重复计算. 1简单函数的计算结果的缓存 2递归函数的计算结果的缓存  3Ajax读取数据的缓存 1简单函数的计算结果的缓存 例如: //共用函数,封装内部调用,缓存计算结果 function memorize(f) { var cache={}; return function(){ var key=argument

由几道JS笔试题引发的知识点探究十五——JS面向对象编程

JS初学者大都没有认识到其强大的面向对象编程的特性,只是把JS当作一门简单实用的脚本语言来用.也正因如此,JS程序员往往处于程序员鄙视链的最低端,很多人觉得JS是HTML一类的语言,甚至连语言都称不上.事实完全不是如此,你若也有这种想法,说明你对JS的认识太浅薄了.要想正真迈入JS的大门,你必须深入了解JS面向对象编程的特性.下面就让我为大家一一道来. 一.创建对象 既然是面向对象,那肯定先得有对象吧,要有对象,肯定得知道对象是什么吧,那JS中的对象是什么呢?在C++里我们知道,对象就是类或结构

js面向对象编程:如何定义常量?

js中有一个关键字const,但目前的浏览器似乎还不支持,如果一定要定义一些常量,其实可以使用闭包,匿名函数实现常量的定义. 例如: var Class = (function() { var UPPER_BOUND = 100;//定义了常量 var Test={}; // 定义了一个静态方法 获取常量的方法 Test.getUPPER_BOUND=function() { return UPPER_BOUND; } return Test; })(); 用法: var k=Class.get

js面向对象编程:两个小括号的使用

在查看很多jQuery的过程中,经常遇到两个小括号的情况. 例如: (function() { alert("测试1"); })(); (function() { alert("测试3"); }()); 其实这段代码,就是定义了一个匿名函数,并且进行了调用, 相当于如下几行代码: (function ListCommon2() { alert("测试1"); })(); (function ListCommon3() { alert("

js面向对象编程:如何检测对象类型

在js中检测对象类型主要有三种,typeof,instanceof,constructor,这几种都可以检测对象的类型,但又有一定的区别.   1使用typeof检测对象类型. typeo作为最常用的检测类型的方法,返回字符串类型,具体使用如下: function testType(value) { var str=typeof(value); // alert(str); switch(str) { case 'undefined': // undefined类型 case 'object'

JavaScript强化教程-JS面向对象编程

本文为H5EDU机构官方HTML5培训教程,主要介绍:JavaScript强化教程--JS面向对象编程  对事物的抽象描述  描述这类事物的特征和行为  对象是类的实例代码实现:创建一个类  function peple(){        this.hp=0;         this.act = 30;         this.name = "";         this.x=0;         this.y=0;         this.move =function(x,