总认为自己弄明白了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就是指实例化的对象。就很难理解此处的问题。