2012-01-25 6 views
1

javascriptオブジェクトのプロパティを関数に渡してプロパティの値を更新することはできますか?今、私は、オブジェクトのような...更新する関数でパラメータとしてカスタムJavaScriptオブジェクトプロパティを渡す

element = { 
    border: { 
    width:0 
    } 
} 

を持っている私は、widthプロパティを更新するための関数にこのオブジェクトのインスタンスに渡すためにしようとしているが、それは働いていません。以下のような何か...

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のプロパティを実際に持っています。そしてそれらのすべてはウェブページ上の選択によって更新される必要があります。たとえば、境界線の幅(すべて、上、右、btm、左)を制御する5つのスライダがページにあります。右の境界線のスライダを移動したときにオブジェクトの境界線のプロパティを更新するために、スライダをjqueryドキュメント準備完了イベントに配線しました。したがって、これらのプロパティはすべて、スライダに配線するために各関数にjqueryに渡される配列内にあります。 –

+0

私はこれをコールバック関数として実行しようとしました。私のjqueryでは、各ループは関数を呼び出して値を渡していますが、関数内に入ると値は未定義です。私はコールバックを見るためにファイヤーバグを使用しているので、なぜそれが関数に定義されていないのかはわかりません。何か案が?ありがとう。 –

0

あなたが参照することによりプリミティブ値(例えば、数リテラル、0)を渡すことはできません。場合は、

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

しかし:

UpdateWidth(instance.border, 50); 

は確かに、これはこのようなものであることをUpdateWidthが必要になります。このようborderプロパティに格納されている1つとして - オブジェクトは、他の一方で、することができ

instance.border.width = 50; 

:関数はそのことについて簡単です、あなただけの参照を渡す必要とせずに、直接 widthプロパティを設定することができます

ただし、既存のオブジェクトから直接新しいインスタンスを作成することはできません。

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> 
関連する問題