將參數傳遞給JavaScript模塊化模式中的父類

我做了兩個類，即人 - 父類和學生類 - 子類。我正在嘗試實現繼承。我也試圖在模塊化模式下實現它。但它沒有得到妥善處理。對於代碼塊請在下面檢查。將參數傳遞給JavaScript模塊化模式中的父類

Person.js

var Person = function() { 

    var details, constructor, getDetailsByAttribute, setDetailsByAttribute, setDetails, getDetails, clearDetails; 

    clearDetails = function() { 
     details = { 
      uid : '', 
      name : '', 
      email : '' 
     }; 
    }; 

    getDetailsByAttribute = function(attr) { 
     return details[attr]; 
    }; 

    setDetailsByAttribute = function(key, value) { 
     if(details.hasOwnProperty(key)) { 
      details[key] = value; 
     }else { 
      console.log('invalid key'); 
     } 
    }; 

    setDetails = function(param) { 
     clearDetails(); 
     for(var attr in param) { 
      if(details.hasOwnProperty(attr)) { 
       details[attr] = param[attr]; 
      } 
     } 
    }; 

    getDetails = function() { 
     return details; 
    }; 

    /** 
    * During object creation; 
    */ 
    if(arguments.length >= 1) { 
     //clearDetails(); 
     setDetails(arguments[0]); 
    } 

    return { 
     getDetailsByAttribute : function(attr) { 
      return getDetailsByAttribute(attr); 
     }, 

     setDetailsByAttribute : function(key, value) { 
      setDetailsByAttribute(key, value); 
     }, 

     setDetails : function(params) { 
      setDetails(params); 
     }, 

     getDetails : function() { 
      return getDetails(); 
     }, 

     clearDetails : function() { 
      clearDetails(); 
     } 
    }; 
};

Student.js

var Student = function() { 
    Person.call(this,arguments); 
}; 

Student.prototype = new Person();

的index.html

<html> 
    <head> 
    </head> 
    <body> 
     <script type="text/javascript" src="modules/Person.js"></script> 
     <script type="text/javascript" src="modules/Student.js"></script> 
     <script type="text/javascript"> 
      var person1, person2, person3, student1; 

      person1 = new Person({ 
       uid : 5225, 
       name : 'jaison', 
       email : '[email protected]' 
      }); 

      person2 = new Person({ 
       uid : 5222, 
       name : 'jatin', 
       email : '[email protected]' 
      }); 

      person3 = new Person(); 
      person3.setDetails({ 
       uid : 5221, 
       name : 'sarath', 
       email : '[email protected]' 
      }); 
      person3.setDetailsByAttribute('name', 'sarath'); 

      student1 = new Student({ 
       uid : 5221, 
       name : 'sachin', 
       email : '[email protected]' 
      }); 

      console.log('person 1 : ',person1.getDetails()); 
      console.log('person 2 : ',person2.getDetails()); 
      console.log('person 3 : ',person3.getDetails()); 
      console.log('student 1 : ',student1.getDetails()); 
      //console.log(student1.get); 

     </script> 
    </body> 
</html>

來源

2012-06-06 Jaison Justus

可能重複[如何獲得構造函數從JavaScript中的構造函數繼承？]（http://stackoverflow.com/questions/2263353/how-to-get-a-constructor-function-to-繼承一個構造函數在java中） – outis

一個簡單地調用另一個函數的匿名函數（比如你在由'Person'構造函數返回的對象文字中使用）是完全沒有必要的。只需使用該功能即可。 '{getDetailsByAttribute：getDetailsByAttribute，...}'是完全合法的，並且工作正常，因爲對象的屬性是與其他對象屬性和本地變量不同的命名空間。 – outis

感謝您的寶貴意見。但是參考上面提到的問題，我改變了一些代碼，但仍然不起作用。 –

試試這個：

var Student = function() { 
    return Person.apply(this, arguments); 
};

沒有

Student.prototype = new Person();

更新：我只知道，你可以使用這個：

var Student = function() { 
    this.setDetails.apply(this, arguments); 
}; 
Student.prototype = new Person();

因此關閉將裏面的原型，並且setDetails將會訪問它。

在你的代碼，當你這樣做：

Student.prototype = new Person();

創建一個閉包，當你調用這個

var Student = function() { 
    Person.call(this,arguments); 
};

創建另一個封閉（和它不應該被調用的，適用的，但即使這樣也行不通）。你將構造函數作爲一個函數執行，並且（如果它將被應用的話）將參數應用於不同的閉包，並且由閉包中的細節的Person返回的所有這些函數都將被丟棄。學生的方法將取自原型而不是構造函數。

來源

2012-06-06 08:58:25 jcubic

，但如果學生模塊返回一組函數返回{foo：foo，bar：bar，test：testing}，那麼它就有可能。 –

所以你將它們還原回來子類（功能）。看看你是如何編寫Person的，它不是一個類，它是一個函數（返回一個對象），你沒有使用'this'。所以即使你做'student1 = Student（{...}）;''沒有'new'，它也會工作。你不能在你的代碼中使用繼承，因爲你使用閉包和函數式編程而不是面向對象編程。你在哪裏尋找是'super'功能，但JavaScript沒有。 – jcubic

這是信息朋友。你知道任何地方學習JavaScript的oops。好的。對於oops開發不使用模塊化模式的 –

的問題是，details是原型中的局部變量和Person.apply調用中的局部變量。這些不同。我的建議是連接details的對象，即

var Person = function() { 
    var self = this; 
    self.details = null; 

    // the other code goes here; 

    clearDetails = function() { 
     self.details = { 
      uid : '', 
      name : '', 
      email : '' 
     }; 
    }; 

    setDetails = function(param) { 
     clearDetails(); 
     for(var attr in param) { 
      if(self.details.hasOwnProperty(attr)) { 
       self.details[attr] = param[attr]; 
      } 
     } 
    }; 

    // and the other code here. 
}

Bascially改變details到self.details無處不在。我沒有測試它，但它應該工作。

來源

2012-06-06 08:57:50 freakish

@freakinsh如果我們添加this.details在函數的範圍內保持私有或公開 –

@JaisonJustus通常不存在私人/公共範圍* sensu stricto *在JavaScript中的東西。但從某種意義上說，這不再是「私人」的範圍，即在對象之外很容易看到「細節」。 – freakish

謝謝你朋友。它是我對私人/公共oops的誤解.. :) –

將參數傳遞給JavaScript模塊化模式中的父類

回答

相關問題