如何從類構造函數中訪問模型

我剛剛開始使用OO Javascript，並且正在努力重新格式化一些現有代碼以使用OOJS，但是我遇到了一個問題，我希望你能夠很棒人們可以幫助我。在下面的代碼中，我試圖從Nav對象的構造函數中調用滾動函數，但是當我運行此代碼時，出現「this.scroll不是函數」的錯誤。我可以更改哪些內容以允許構造函數使用對象的方法？如何從類構造函數中訪問模型

代碼更新@下午3:20 PT基於評論和下面的答案。我仍然有同樣的問題「_self.scroll不是一個功能」。

function Nav(d){ 
    var _self = this; 

    $('nav a').click(function(){ 
     var offset = -110; 
     if(d.mobile()){ 
      offset = 0; 
     } 
     _self.scroll($(this), offset); 
    }); 

    return{ 
     //Define scroll method 
     scroll : function(e, dist){ 
      $.scrollTo($("#" + e.data('href')), 1000, {offset: dist}); 
     } 
    }; 
} 

$(function(){ 
    //Create objects 
    var device = new Device(); 
    var nav = new Nav(device); 
});

更新2/18 @ 6:00 PM PT

我已經更新了我的代碼以下，現在正在工作。然而，我很好奇使用我以前使用的對象文字方法和使用我現在使用的構造函數方法之間有什麼區別？

從我可以收集這個作品，因爲我已經定義滾動方法之前被稱爲;與之前我在構造函數中調用它之前一樣，因爲它是在返回時創建的。然而，我不確定這種改變的性能影響，如果使用文字構造函數更好。

//Define Nav class 
function Nav(d){ 
    var _self = this; 

    //Define scroll method 
    Nav.prototype.scroll = function(e, dist){ 
     $.scrollTo($("#" + e.data('href')), 1000, {offset: dist}); 
    }; 

    $('nav a').click(function(){ 
     var offset = -110; 
     if(d.mobile()){ 
      offset = 0; 
     } 
     _self.scroll($(this), offset); 
    }); 
}

來源

2014-02-18 efarley

i'm通過的混合糊塗「這個」，「$ this」和「$（本）」 –

我同意，更好的命名約定會走很長的方式，也許將$ this改爲錨或elem，因爲您正在使用它來引用錨元素。 – Shannon

我已更新上述命名約定。 – efarley

一直以來的真正問題是，這是涉及原型鏈的不恰當場景。

當你的對象被多次實例化時，你應該只關心添加方法到原型。

只要定義一個單例：

var nav = new function Nav(d){ 
    var nav=this; 

    nav.scroll = function(e,dist){ 
    $.scrollTo($("#" + e.data('href')), 1000, {offset: dist}); 
    }; 

    $('nav').on('click','a',function(jqEvent){ // Event Delegation 
    var $navLink = $(this); 
    var offset = -110; 
    if (d.mobile()) offset = 0; 
    nav.scroll($navLink, offset); 
    }); 
}(device);

來源

2014-02-19 03:35:30 ChaseMoskal

這是一個非常優化的解決方案。注意升級到jQuery的事件委派。 – ChaseMoskal

在單例之後包含（設備）的目的是什麼？ – efarley

@ user3325478：oops，我的意思是將它作爲Nav構造函數參數添加。編輯:) – ChaseMoskal

當您使用this你實際上是指$('nav a')不是Nav對象的點擊處理程序中。

我會使用以下語法將Nav設置爲變量，並讓事件偵聽器引用該變量。

var Nav = (function (d){ 
    return{ 
     //Define scroll method 
     scroll : function(e, dist){ 
      $.scrollTo($("#" + e.data('href')), 1000, {offset: dist}); 
     } 
    }; 
})(device); 


$('nav a').click(function(){ 
    var offset = -110; 
    if(d.mobile()){ 
     offset = 0; 
    } 
    Nav.scroll($(this), offset); 
});

來源

2014-02-18 22:11:28 Shannon

我已經使用這個建議更新了我的代碼，（更新也在上面），但是我仍然收到相同的錯誤。 – efarley

而不是返回一個新的對象（技術上甚至不是一個'instanceof' Nav），你應該在實例上創建一個屬性來調用相應的prototype屬性。 – ChaseMoskal

更改我的示例以更好地適合您的語法。還從nav函數中移除了感覺更乾淨的事件偵聽器，並防止可能添加多個事件偵聽器。 – Shannon

如何從類構造函數中訪問模型

回答

相關問題