javascript - 用 Javascript 编写扩展方法

Question

我想知道是否有人可以帮助我理解为什么有必要添加以下行...

if (!obj.hasOwnProperty(key)) continue;

...通过以下方法:

extend: function(obj) {
  // shallow copy
  for (var key in obj) {
    if (!obj.hasOwnProperty(key)) continue;
      this[key] = obj[key];
  }
}

Answer 1

当您使用for-in循环遍历对象的属性名称时，您会看到所有可枚举属性，包括对象从其继承的属性原型(prototype)。看来实现该方法的人不想复制从原型(prototype)继承的属性，因此只包含对象本身直接拥有的属性。

这是一个例子:

function Thing(name) {
    this.name = name;
}
Thing.prototype.speak = function() {
    console.log("I'm " + this.name);
};
Thing.prototype.infoForAllThings = 42;
var t1 = new Thing("Fred");
console.log(t1.name);             // "Fred"
console.log(t1.infoForAllThings); // "42"
t1.speak();                       // "I'm Fred"
var t2 = extend(t1);              // (Where `extend` is like your function,
                                  // but returns the object rather than using `this`
console.log(t2.name);             // "Fred"
console.log(t2.infoForAllThings); // "undefined"
t2.speak();                       // Error

在上面，t1 从其原型(prototype)继承了 infoForAllThings 和 speak 属性，该属性被设置为 Thing.prototype 当 t1 创建时。但 extend 函数使用 hasOwnProperty 过滤掉这些内容，因此不会将它们复制到它创建的副本中，因此它们不存在于 t2< 上。 t2 有 name 因为它被直接分配给对象，它不是来自原型(prototype)，但其他的来自原型(prototype)并且所以不要被复制。