总觉得自己弄明确了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”这个非常easy理解。在实例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究竟代表什么?第二篇的更多相关文章

  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. (1)sqlserver2017安装

    本体 https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 图形管理工具ssm 文档 https://docs.microso ...

  2. jsp+servlet中文乱码问题

    jsp+servlet中文乱码问题 servlet想要获得前台传来的值 String strName=new String(request.getParameter("name") ...

  3. 在Python的列表中利用remove()方法删除元素的教程

    在Python的列表中利用remove()方法删除元素的教程 这篇文章主要介绍了在Python的列表中利用remove()方法删除元素的教程,是Python入门中的基础知识,注意其和pop()方法的区 ...

  4. 2019牛客多校第三场H-Magic Line

    Magic Line 题目传送门 解题思路 因为坐标的范围只有正负1000,且所有点坐标都是整数,所以所有点相连构成的最大斜率只有2000,而我们能够输出的的坐标范围是正负10^9.所以我们先把这n个 ...

  5. 【WLAN常用语】—VAP

    文章摘自:https://forum.huawei.com/enterprise/zh/forum.php?mod=viewthread&tid=396533&page=1#pid22 ...

  6. 20140513 matlab画图

    1.matlab画图 x1=[1.00E-06,2.00E-06,4.00E-06,9.00E-06,2.00E-05,4.00E-05,8.00E-05,2.00E-04,4.00E-04,7.00 ...

  7. Rollei SL66 使用说明

    根据记忆,并用不规范的语言描述我对sl66的使用心得:一.上卷1.用摇把顺时针转到12点位置,再退回3点位置:2.安插刀:3.后背上方按钮向右拨,打开后背:4.取出,装卷,再放入:5.转动后背上旋钮, ...

  8. UI自动化ADB出现devices offline的解决方法

    终端运行如下命令即可解决: adb kill-server adb start-server adb remount

  9. python初学者学习工具安装教程&安装步骤详解

    一.python安装: ​ 版本:3.6.8 ​ 下载地址:https://www.python.org/downloads/ 安装步骤截图: 1.点击python安装包,出现下图所示界面,注意勾选A ...

  10. vue中的import {} from '@/api/api'

    例:import {queryDepartTreeList, searchByKeywords} from '@/api/api' 首先查看vue.config.js文件,在这个文件里面定义了定义了@ ...