保证你执行的函数在正确的作用域内对于现在的JavaScript程序员是一个艰难的任务。
我们将在本文学习一个关于JavaScript函数作用作用域的规则，以便理解如何去确定函数的作用作用域。
JavaScript 概念
- 作用域（Scope）关系到上下文中代码的执行以及决定变量是否可用；
- JavaScript有两种作用域：全局、局部；
- 全局作用域的函数与变量可以被到处使用；例如：document 与 window 变量；
- 局部作用域的函数与变量的作用域在所处定义它的函数的内部，因此，局部变量不能被定义它的函数的外部访问（但是可以被其内部的函数访问）。
JavaScript 代码
Language：JavaScript
IDE：Eclipse Java EE
1: //-------全局变量------------------------------------
2: var myVar = 'Hello from Global Scope!';
3: alert(myVar); // alerts 'Hello from Global Scope!'
4:
5: function myFunction() { 6: myVar = 'Hello from MyFunction!'; // 使用全局myVar
7: }
8:
9: alert(myVar); // alerts 'Hello from Global Scope!"
10: myFunction(); // alerts 'Hello from MyFunction!'
11: alert(myVar); // alerts 'Hello from Global Scope!'
12:
13: // -------局部变量------------------------------------
14: var myVar = 'Hello from Global Scope!';
15: alert(myVar); // alerts 'Hello from Global Scope!'
16:
17: function myFunction() { 18: var myVar = 'Hello from MyFunction!'; // 定义局部变量
19: alert(myVar);
20: }
21:
22: alert(myVar); // alerts 'Hello from Global Scope!"
23: myFunction(); // alerts 'Hello from MyFunction!'
24: alert(myVar); // alerts 'Hello from Global Scope!'
25:
26: // -------this关键字代表当前代码所处的范围----------------------
27: function MyClass() { 28: console.log(this);
29: this.myProperty = 'Hello';
30: }
31:
32: var myClass = new MyClass();
33: alert(myClass.myProperty); // alerts 'Hello'
34: alert(this.myProperty); // alerts 'undefined'
35: // this.myProperty代表MyClass外部一层的myProperty变量
ExtJS 4 概念
- 当我们在处理ExtJS的作用域时，我们一般要确定我们的方法是在正确的类中执行（无论是组件、store、还是控件），例如Ext.button.Button的单击事件将执行在Button类实例作用域内的处理方法；
ExtJS 4 代码
Language：Javascript
Framework：ExtJS 4.0.7
IDE：Eclipse Java EE
1: var cat = { 2: sound : 'miaow',
3: speak : function() { 4: alert(this.sound);
5: }
6: };
7: var dog = { 8: sound : 'woof',
9: speak : function() { 10: alert(this.sound);
11: }
12: };
13:
14: cat.speak(); // alerts 'miaow'
15: dog.speak(); // alerts 'woof'
16:
17: // -------使用Ext.bind()强行绑定同方法名的方法-----------------
18: Ext.bind(dog.speak, cat)();
ExtJS 4 说明
- Ext.bind()方法创建一个dog.speak()方法的‘包装’，这将强制dog类去使用cat类的同名方法cat.speak()；
- 通过使用this关键字，在bind之后的dog.speak()方法中，传入的cat的成员。
总结
- this关键字好神奇！