for-in输出

Question

var oDome = document.getElementById('dome');
Object.prototype.move = function(json){
    for(var key in json){
        console.log(key)
        //为什么输出的是 width,height,move ?
        //不是应该只有width，height吗？
    }
    console.log(json)
};

oDome.move({
    'width':'200px',
    'height':'300px'
});

Answer 1

for…in

以任意序迭代一个对象的可枚举属性。
循环将迭代对象的所有可枚举属性和从它的构造函数的 prototype 继承而来的（包括被覆盖的内建属性）。

在你的例子中，move属性在Object构造函数的原型里面，而所有对象都是Object的实例，所以枚举任何一个对象的属性都会看到它。

解决方法有两个——

1. 使用hasOwnProperty方法，检验属性是否是其本身所含有的

   for(var key in json){
       if(json.hasOwnProperty(key)) {
           console.log(key);
       }
   }

2. 将move的属性设置为不可枚举

   Object.defineProperty(Object.prototype, "move", {
       enumerable: false
   });

Answer 2

你改了Object的原型啊, 这个当然会影响所有对象, 包括你传给move这个函数参数的匿名对象

Answer 3

for..in会遍历继承可枚举的属性。

Answer 4

props = Object.getOwnPropertyNames({a:1, b:2});
props是输入参数的所有属性所组成的数组: ["a", "b"]

Answer 5

tips：
1、继承关系：oDome.move(json) 中的 json，继承自Object。
2、被自定义后的Object对象：被自定义了 move 属性。
3、此时的 json 中 key 包含 'width'和'height'。
4、for-in的工作原理：除了被枚举的对象的属性外，如果不加限制，还会在其原型链枚举。

解决方法：

for(var key in json){
    if(json.hasOwnProperty(key)) {
        console.log(key);
    }
}

Answer 6

用for of 或者foreach