3

このコードは、Addy Osmani のオンライン ブック「Learning JavaScript Design Patterns」からのものです。 

// Extend an object with an extension
function extend( extension, obj ){
  for ( var key in extension ){
    obj[key] = extension[key];
  }
}

拡張機能を使用してオブジェクトを拡張できると主張しています。本のサンプルではうまく機能します。はcontrolCheckbox定義Subjectと DOMの両方でうまく機能しますcheckbox。

<input id="mainCheckbox" type="checkbox"/>
...
var controlCheckbox = document.getElementById( "mainCheckbox" ),
...
extend( new Subject(), controlCheckbox );
...
controlCheckbox["onclick"] = new Function( "controlCheckbox.Notify(controlCheckbox.checked)" );

しかし、なぜそれが拡張されているのかがわかりません。の関数定義は、を DOM からに拡張するのではなく、 を上書きextendしているように見えます。誰かが私を理解するのを手伝ってもらえますか?controlCheckboxcheckboxSubject

4

2 に答える 2

1

extendからのすべての属性を追加しextension、obj既存のものを上書きします。

obj['attr'] = 'foo'JavaScriptで言うとattr、オブジェクトに属性を作成してobj代入fooします。attrに既に存在する場合はobj、 で上書きしますfoo。

代替構文は になりますがobj.attr='foo'、この方法では、動的属性名を使用できません(例のような変数key)

いくつかの便利なリンク:

于 2013-10-12T00:14:43.133 に答える
0

以下に例を示します。

function extend( extension, obj ){
  for ( var key in extension ){
    obj[key] = extension[key];
  }
}

var obj = { a: 1, b: 2 },
    extension = { b: 20, c: 30 };

console.log("Before: ", obj);
extend(extension, obj);
console.log("After: ", obj);

出力：

Before:  Object {a: 1, b: 2} 
After:  Object {a: 1, b: 20, c: 30}

何が起こったかは簡単にわかります:

  1. フィールドaは には存在しなかったextensionため、変更されていません。
  2. フィールドbは両方のオブジェクトに存在していたため、のフィールドによって上書きされました。extensionb
  3. フィールドcは のみに存在したextensionため、 に追加されましたobj。
于 2013-10-12T00:24:57.763 に答える