关于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
。