2012-01-25 91 views
1

是否可以將JavaScript對象的屬性傳遞給函數以更新屬性的值?現在我有一個對象像...傳遞自定義javascript對象屬性作爲函數中的參數更新

element = { 
    border: { 
    width:0 
    } 
} 

我想在此對象的實例傳遞給函數更新寬度屬性,但它不工作。就像...

var instance = new element(); 
UpdateWidth(instance.border.width, 50); 

我在函數內部猜測它只是獲取instance.border.width的值而不是屬性本身。這可能嗎?謝謝。

+0

不會'UpdateWidth(instance.border,50)'更有意義嗎? – user123444555621

回答

0

我會的功能附加到對象,像這樣:

function element() { 
     this.border: { 
     width:0 
     }, 
     this.updateBorderWidth: function (newWidth) { 
      this.border.width = newWidth; 
     } 

    } 

然後做到這一點:

var instance = new element(); 
instance.updateBorderWidth(50); 

我不知道但是爲什麼這是必要的,如果你可以直接存取權限的實例屬性除非在更新寬度時想要發生其他情況。在進一步的說明,如果你想在JavaScript創建類和繼承我想看看這個:

http://ejohn.org/blog/simple-javascript-inheritance/

+0

我遇到的問題是我給出的示例代碼非常簡單。我的對象實際上有大約20個屬性,現在有更多的來臨。所有這些都需要通過網頁上的選擇進行更新。例如,我在頁面上有五個滑塊控制邊框寬度(all,top,right,btm,left)。在jquery文檔就緒事件中,我將滑塊連接起來,以在移動右邊框滑塊時更新對象的邊界右側屬性。所以,所有這些屬性都在一個數組中傳遞給jquery的每個函數來連接到滑塊。 –

+0

我試過做這樣的事情作爲回調函數。在我的jquery each循環中,它調用函數並傳入值,但是當它進入函數內部時,值現在是未定義的。我使用螢火蟲來觀看電話,所以我不確定它爲什麼會進入未定義的功能。任何想法?謝謝。 –

0

不能按引用傳遞的原始值(例如,數字文字,0)。對象,另一方面,可以 - 比如一個存儲在border屬性:

UpdateWidth(instance.border, 50); 

當然,這需要UpdateWidth是這樣的:

function UpdateWidth(subject, width) { 
    subject.width = width; 
} 

但是,如果該功能是關於簡單的,你可以直接設置width屬性,而不需要參考傳:

instance.border.width = 50; 

但是,你不能直接從現有對象創建一個新的實例:

var element = { }; 
var instance = new element(); // TypeError: object is not a function 

您可以在現代瀏覽器中使用Object.create(或用填充工具):

var instance = Object.create(element); 

否則,需要將其聲明爲構造函數:

function Element() { 
    this.border = { 
     width: 0 
    }; 
} 

var instance = new Element(); 
0

你想要什麼是不可能的。直接訪問是通過賦值運算符最簡單的方式。

在你的情況:obj.obj.prop = value;

下面是一些示例,我使用一個函數來創建對象,以更明確地顯示正在發生的事情與使用JSON符號。有關無法以您嘗試的方式從現有對象實例化對象的更多信息,請參閱Jonathan的答案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Test</title> 
    <script language="javascript"type="text/javascript"> 

    function init() { 

     function e() { 
      var obj = new Object(); 
      obj.border = new Object(); 
      obj.border.width = 0; 
      return obj;   
     } 

     var x = e(); 

     var y = e(); 

     y.border.width = 12; 
     document.write(y.border.width); 
     document.write("<br/>"); 
     document.write(x.border.width); 

     function UpdateWidth(obj, a) { 
      obj.border.width = a; 
     } 

     UpdateWidth(y, 50); 
     document.write("<br/>"); 
     document.write(y.border.width); 

    } 



    window.onload = init; 

    </script> 

</head> 

<body> 

</body> 
</html> 
相關問題