Ext scope 学习
首先，用一句話來概括scope的作用：scope就是用來解決 js 中 this 的指向問題。
下面進行討論：
1、 關(guān)于JavaScript中this的使用，這是一個由來已久的問題了。我們這里就不介紹它的發(fā)展歷史了，只結(jié)合具體的例子，告訴大家可能會遇到什么問題，在遇到這些問題時EXT是如何解決的。在使用EXT時，最常碰到的就是使用Ajax回調(diào)函數(shù)時出現(xiàn)的問題，如下面的代碼所示。
| <input type="text" name="text" id="text"> <input type="button" name="button" id="button" value="button"> |
現(xiàn)在的HTML 頁面中有一個text輸入框和一個按鈕。我們希望按下這個按鈕之后，能用Ajax去后臺讀取數(shù)據(jù)，然后把后臺響應(yīng)的數(shù)據(jù)放到text中，實現(xiàn)過程如代碼清單10-6所示。
代碼清單10-6 Ajax中使用回調(diào)函數(shù)
| function doSuccess(response) { text.dom.value = response.responseText; } Ext.onReady(function(){ |
在上面的代碼中，Ajax已經(jīng)用Ext.get('text')獲得了text，以為后面可以直接使用，沒想到回調(diào)函數(shù)success不會按照你寫的順序去執(zhí)行。當然，也不會像你所想的那樣使用局部變量text。實際上，如果什么都不做，僅僅只是使用回調(diào)函數(shù)，你不得不再次使用Ext.get('text')重新獲得元素，否則瀏覽器就會報text未定義的錯誤。
在此使用Ext.get('text')重新獲取對象還比較簡單，在有些情況下不容易獲得需要處理的對象，我們要在發(fā)送Ajax請求之前獲取回調(diào)函數(shù)中需要操作的對象，有兩種方法可供選擇：scope和createDelegate。
為Ajax設(shè)置scope。
| ?function doSuccess(response) { this.dom.value = response.responseText; } Ext.lib.Ajax.request( 'POST', '08.txt', {success:doSuccess,scope:text}, 'param=' + encodeURIComponent(text.dom.value) ); |
在Ajax的callback參數(shù)部分添加一個scope:text，把回調(diào)函數(shù)的scope指向text，它的作用就是把doSuccess函數(shù)里的this指向text對象。然后再把doSuccess里改成this.dom. value，這樣就可以了。如果想再次在回調(diào)函數(shù)里用某個對象，必須配上scope，這樣就能在回調(diào)函數(shù)中使用this對它進行操作了。
為success添加createDelegate()。
| ?function doSuccess(response) { this.dom.value = response.responseText; } Ext.lib.Ajax.request( |
createDelegate只能在function上調(diào)用，它把函數(shù)里的this強行指向我們需要的對象，然后我們就可以在回調(diào)函數(shù)doSuccess里直接通過this來引用createDelegate()中指定的這個對象了。它可以作為解決this問題的一個備選方案。
如果讓我選擇，我會盡量選擇scope，因為createDelegate是要對原來的函數(shù)進行封裝，重新生成function對象。簡單環(huán)境下，scope就夠用了，倒是createDelegate還有其他功能，比如修改調(diào)用參數(shù)等。
2、再通過幾個簡單的例子來解釋：
code is below：
<html>
<head>
<script>
var p1 = {
name: 'p1',
fn: function() {
var scope = this.scope? this.scope:this;
alert(scope.name)
}
};
var p3 = {
name: 'p3'
};
var p2 = {
name: 'p2',
//scope: p1, // assign scope
fn: p1.fn // copying p1.fn loses its scope
};
p1.fn();
p2.fn();
</script>
</head>
</html>
Running that code will pop up two times: 'p1' and 'p2' ... even though p2's fn uses the fn from p1 but since it is run within p2 scope, it
displays p2's name.
Uncomment the scope config in p2 and refresh. Now the page will pop up 'p1' two times.
Set the scope config option to point to p3 and refresh. Now the page will pop up 'p1' and 'p3'.
All the above behaviors are made possible since the p1.fn function takes the scope into consideration. Ext, on the other hand, uses a
轉(zhuǎn)載于:https://www.cnblogs.com/yin-jingyu/archive/2011/08/03/2126460.html
總結(jié)
以上是生活随笔為你收集整理的Ext scope 学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Node.js有了新的管理者
- 下一篇： HDOJ 2526 HDU 2526 浪