Javascript 物件(類別) this很重要 bind()更重要

今天寫一個物件 目的是為了偷懶.
用EasyUI 開一個 window
 <div id="QusSetwin" class="easyui-window" title="動態載入" style="width:800px;height:500px;"
           data-options="iconCls:'icon-save',modal:true,collapsible:false,minimizable:false,closed:true">
</div>
然後當要用的時候 開啟視窗時 將其他 HTML 載入 省得全寫在一個HTML內 太大太複雜
但每個掛進來的HTML 所用的事件 屬性 不相同 所以用 物件包起來

本來的寫法:
var MySetJumpObj = function () {
};
MySetJumpObj.prototype = {//原型(Prototype)
    Mdlist:'#QusJumpJ',
    Owin: '#QusSetwin',
    OpenWin:function()//自行定義
    {
        var _this = this;//加這個當內部this 怕 跟 java自己的 this 弄混
        $(_this.Owin).window({ title: "設定", href: "/_MyHTML/XXX.html", 
        onLoad: _this._Init() });
        $(_this.Owin).window('open');
    },
    _Init: function () {
       // alert("init");
        //$("#QusSetwin").window("setTitle", "(init)");
        $("#QusJumpLab").html("init");
                        var QQ =[];
                        $.each(QusNumList, function (index, val){
                            QQ.push({ 'label': val.text, 'value': val.text });
                        });
                        $("#QusJumpS").combobox({
                            valueField: 'label',
                            textField: 'value',
                            data: QQ
                        });
    }
}
**************************************************************
預想是當載入後啟動 _Init 去設定 載入後的 Html 元素
但是失敗,不會動.....我之前用Layout 這樣搞是OK的?
一開始我認為是因為 開一個小視窗 載入太慢,所以無法變更
還認為是 EasyUI 有問題 所以沒動作
所以又搞一個 setTimeout() 開起來後檢查畫面確定載入後再設定
問題又來了 setTimeout() 寫在 物件內 但只執行一次 無法Call自己..
寫到物件外頭,好像又正常.................................
搞了一天..大概弄懂了

this 是個大問題 難怪上一篇跟網路上都說要用 變數另外存 this

但是只是治標  call 另外函式時 this 是會變掉的
所以 setTimeout() 無法再call 因為 this變了 判斷式已經不准
依此類推
onLoad: _this._Init()  這樣Call 但是this被改了
所以Init() 內用到 this 都失效
所以要用到  bind()
改成
$(_this.Owin).window({ title: "設定", href: "/_MyHTML/XXX.html",  
onLoad: this._Init().bind(this) });

就是將 this(目前的Object)再傳入call 的函數內 就都正常了
錯怪了EasyUI















留言

熱門文章