Question

这段代码来自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)" );

但我无法理解为什么扩展？ extend的函数定义类似于覆盖，而不是扩展，controlCheckbox从DOM checkbox到Subject在我可怜的眼里。有人可以帮我理解吗？

Answer 1

extend所做的是将extension的所有属性添加到obj并覆盖已存在的属性。

当您在javascript中说obj['attr'] = 'foo'时，您会在对象attr中创建属性obj并为其指定foo。如果attr中已存在obj，您将使用foo覆盖它。

另一种语法是obj.attr='foo'，但这样，您就无法使用动态属性名称（变量，如示例key中所示）

一些有用的链接：

Answer 2

以下是一个例子：

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}

很容易看出发生了什么：

a中不存在字段extension，因此保持不变。

字段b存在于两个对象中，因此extension的字段b 覆盖。

字段c仅存在于extension中，因此已添加至obj。

Javascript函数，用扩展名扩展对象

2 个答案: