『ExtJS』01 004. ExtJS 4 确定函数的作用域

保证你执行的函数在正确的作用域内对于现在的JavaScript程序员是一个艰难的任务。

我们将在本文学习一个关于JavaScript函数作用作用域的规则，以便理解如何去确定函数的作用作用域。

JavaScript 概念

---

• 作用域（Scope）关系到上下文中代码的执行以及决定变量是否可用；
• JavaScript有两种作用域：全局、局部；
  • 全局作用域的函数与变量可以被到处使用；例如：document 与 window 变量；
  • 局部作用域的函数与变量的作用域在所处定义它的函数的内部，因此，局部变量不能被定义它的函数的外部访问（但是可以被其内部的函数访问）。

JavaScript 代码

---

Language：JavaScript

IDE：Eclipse Java EE

//-------全局变量------------------------------------
var myVar = 'Hello from Global Scope!';
alert(myVar); // alerts 'Hello from Global Scope!'

function myFunction() {
    myVar = 'Hello from MyFunction!'; // 使用全局myVar
}

alert(myVar); // alerts 'Hello from Global Scope!"
myFunction(); // alerts 'Hello from MyFunction!'
alert(myVar); // alerts 'Hello from Global Scope!'

// -------局部变量------------------------------------
var myVar = 'Hello from Global Scope!';
alert(myVar); // alerts 'Hello from Global Scope!'

function myFunction() {
    var myVar = 'Hello from MyFunction!'; // 定义局部变量
    alert(myVar);
}

alert(myVar); // alerts 'Hello from Global Scope!"
myFunction(); // alerts 'Hello from MyFunction!'
alert(myVar); // alerts 'Hello from Global Scope!'

// -------this关键字代表当前代码所处的范围----------------------
function MyClass() {
    console.log(this);
    this.myProperty = 'Hello';
}

var myClass = new MyClass();
alert(myClass.myProperty); // alerts 'Hello'
alert(this.myProperty); // alerts 'undefined'
// 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

var cat = {
    sound : 'miaow',
    speak : function() {
        alert(this.sound);
    }
};
var dog = {
    sound : 'woof',
    speak : function() {
        alert(this.sound);
    }
};

cat.speak(); // alerts 'miaow'
dog.speak(); // alerts 'woof'

// -------使用Ext.bind()强行绑定同方法名的方法-----------------
Ext.bind(dog.speak, cat)();

ExtJS 4 说明

---

1. Ext.bind()方法创建一个dog.speak()方法的‘包装’，这将强制dog类去使用cat类的同名方法cat.speak()；
2. 通过使用this关键字，在bind之后的dog.speak()方法中，传入的cat的成员。

总结

---

• this关键字好神奇！