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

   代码例如以下:

 

  1. //内部对象AutoCompleteInner
  2. function AutoCompleteInner(transformResultInner)
  3. {
  4. if(transformResultInner)
  5. {
  6. this.transformResultInner=transformResultInner;
  7. }
  8. }
  9. AutoCompleteInner.prototype.transformResultInner = function()
  10. {
  11. alert("inner transformResult");
  12. }
  13. AutoCompleteInner.prototype.TestInner = function()
  14. {
  15. this.transformResultInner();
  16. }
  17. //封装了对内部对象AutoCompleteInner的调用
  18. function AutoCompleteOuter(obj)
  19. {
  20. this.TextField = obj.TextField;
  21. this.ValueField = obj.ValueField;
  22. if (obj.transformResult)
  23. {
  24. this.transformResultOuter = obj.transformResultOuter;
  25. }
  26. }
  27. AutoCompleteOuter.prototype.transformResultOuter=function()
  28. {
  29. alert("TextField:"+this.TextField+",ValueField:"+this.ValueField);
  30. }
  31. AutoCompleteOuter.prototype.TestOuter = function ()
  32. {
  33. var test =new AutoCompleteInner(this.transformResultOuter);
  34. test.TestInner();
  35. }

測试代码1

  1. //測试代码 1
  2. function test(){
  3. var obj={};
  4. obj.TextField = "TextField";
  5. obj.ValueField ="ValueField";
  6. var temp=new AutoCompleteOuter(obj);
  7. temp.transformResultOuter();
  8. }

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

測试代码2

  1. function test(){
  2. var obj={};
  3. obj.TextField = "TextField";
  4. obj.ValueField ="ValueField";
  5. var temp=new AutoCompleteOuter(obj);
  6. // temp.transformResultOuter();
  7. temp.TestOuter();
  8. }

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

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

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

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

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

js面向对象编程:this究竟代表什么?第二篇的更多相关文章

  1. js面向对象编程 ---- 系列教程

    原 js面向对象编程:数据的缓存 原 js面向对象编程:如何检测对象类型 原 js面向对象编程:if中可以使用那些作为判断条件呢? 原 js面向对象编程:this到底代表什么?第二篇 原 js面向对象 ...

  2. 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

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

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  4. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  5. Js面向对象编程

    Js面向对象编程 1.     什么是面向对象编程? 我也不说不清楚什么是面向对象,反正就那么回事吧. 编程有时候是一件很快乐的事,写一些小游戏,用编程的方式玩游戏等等 2.     Js如何定义一个 ...

  6. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. JS面向对象编程(进阶理解)

    JS 面向对象编程 如何创建JS对象 JSON语法声明对象(直接量声明对象) var obj = {}; 使用 Object 创建对象 var obj = new Object(); JS对象可以后期 ...

  8. JS面向对象编程,对象,属性,方法。

    document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...

  9. js面向对象编程(第2版)——js继承多种方式

    附带书籍地址: js面向对象编程(第2版)

  10. 原生js面向对象编程-选项卡(自动轮播)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. linux python3 venv 虚拟环境报错 [-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 2.

    解决办法: 先创建没有pip的虚拟环境,然后启动虚拟环境后,再安装pip 办法一: 亲测失败了... python3 -m venv --without-pip py36env 办法二 sudo ap ...

  2. TI低功耗蓝牙(BLE)介绍【转】

    转自:http://blog.csdn.net/ooakk/article/details/7302425 TI低功耗蓝牙(BLE)介绍 本文档翻译和修改自参考资料:CC2540Bluetooth L ...

  3. [转] Linux下编写脚本实现Daemon

    在Linux(以Redhat Linux Enterprise Edition 5.3为例)下,有时需要编写Service.Service也是程序,一般随系统启动用户不干预就不退出的程序,可以称为Se ...

  4. Ethenet: MAC PHY MII RMII

    https://www.cnblogs.com/liangxiaofeng/p/3874866.html 1. general 下图是网口结构简图.网口由CPU.MAC和PHY三部分组成.DMA控制器 ...

  5. CSS3 Media Queries模板:max-width和min-width

    CSS3 Media Queries模板 CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满 ...

  6. Apache配置 PHP 支持

    1,在服务区安装PHP 解压 php 到纯英文路径目 2,添加 PHP处理模块 LoadModule php7_module C:/ProgramData/php/php7apache2_4.dl 3 ...

  7. ASP.Net 第一天笔记 MVC 控制器与视图数据传递注意事项

    1.如果方法的参数的名称与表单元素Name属性的值一致的话,会自动填充 2.如果表单元素的Name属性与实体类型中属性一致,那么表单中的数据会自动赋值给实体中的属性 3.控制器中重载的方法 方法前上边 ...

  8. assignment of day four

    目录 1.Numeric type (1)integer (2)float Usefulness Define How to use 2.string type Use Define How to u ...

  9. JS设置浏览器缓存,以及常用函数整理

    //设置缓存 function set_cache(key,value){ if(key=='') return false; localStorage.setItem(key, value); } ...

  10. python--包的导入

    1,包 定义:把解决一类问题的模块放在同一个文件夹里 导入语法:在import    from...import导入语句中(而不是在使用时)遇到带点的 本质:就是一个包含__init__.py文件的目 ...