关于Js的this问题

Js 最难的2 个问题就在于继承和this ，继承是最难理解的，而this 是最容易出问题的。

 

  这2 天在使用ExtJs 的时候遇到一个问题，我在我的App.MainPanel 对象定义了许多函数，其中initView 函数用来初始化。在 initView 函数里我定义了this.center = this.createCenterPanel(); 这里返回的是一个tabpanel 。

      在我另外一个creatWestPanel 函数里定义了一个tree ，我想在点击这个tree 的时候，便在tabpanel 中新增一个panel 。原本这 是很简单的事，但是我却犯了一个错误，我在tree 的listeners 监听click 事件获取this.center ，如下：

  listeners: { 'click',function() { var tabs = this.center; var tabItem = tabs.getItem(id); } }

   此时报tabs 不存在，我开始觉得很奇怪，我已经定义了，为什么会不存在呢？后来发现，我忘在listeners 里加上scope:this 。this 指定的是我们正在执行的函数本身或者指向该函数所属的对象，但是有多个函数嵌套时就很容易混淆,而且this也会根据上下文环境的改变而改变。例如：

 

Var obj = { toString:function() { return ‘obj范围内的作用域’; } Func: function() { console.log(this); var innerFunc = function(){ console.log(this); } innerFunc(); } }; Obj.func();

 

 

这里分别输出 "obj 的范围内（作用域内）" 和 "Window 的一些相关内容..." 。原因是，func 直接属于obj 对象的，所以第一个this 就代表的是obj ，而innerFunc 却不是obj 对象的直接成员，而只是另一个函数的变量。因此，第2 个this 指向的是当前的window 。当我们将innerFunc() 换成innerFunc.call(this) ，输出的结果便会与第一个的结果相同。同样tree 里的listeners 的click 函数实际上执行的是listener['click'].fn.call(scope) ，也是回调函数。默认scope 是window ，因此我们将scope 设成this ，也就能指向App.MainPanel ，便能获取到this.center 。