Use of for in loop and hasOwnProperty in Javascript_javascript tips

Compared with the in operator, for in will also traverse the prototype chain when looping the properties of the object. For in will not read non-enumerable properties, such as the length property of an array. Summary: When detecting whether an object has a certain property, hasOwnProperty is the only method that can complete this task. In the for in loop, it is recommended to add hasOwnProperty for judgment, which can effectively avoid errors caused by extending the local prototype.

Compared with the in operator, for in will also traverse the prototype chain when looping the properties of the object. for in will not read non-enumerable properties, such as the length property of an array.

Copy code The code is as follows:

// Extend Object.prototype
Object.prototype.bar = 1;
var foo = {moo: 2};
for(var i in foo) {
console.log(i); // Output bar and moo
}

We cannot change the behavior of the for in loop. When we need to filter certain properties in the loop body, we can use the hasOwnProperty method of Object.prototype to complete it.

Tip: Because the for in loop always traverses the entire prototype chain, it is less efficient when traversing multiple inherited objects.

Use hasOwnProperty to filter

Copy code The code is as follows:

// Still targeting the foo object in the above example
for (var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i);
}
}

In the example, because hasOwnProperty is used, moo is eventually output; if hasOwnProperty is ignored, the code will output unexpected results because the local prototype (such as Object.prototype) has been extended .

The Prototype framework is a class library that extends Javascript original objects and is widely used. Its shortcomings are also obvious. When the framework is introduced, if you do not use hasOwnProperty for filtering and judgment, the output results are guaranteed not to be what you want. .

Best Practices

It is recommended to always use hasOwnProperty for judgment when for in. No one can guarantee whether the running code environment has been contaminated.

hasOwnProperty
In order to check whether an object has a custom property that is not on the prototype chain, it is necessary to use the hasOwnProperty method. Any object has this method, which inherits from Object.prototype.

Tip: We cannot completely detect whether a property is undefined, because the property may exist, but its value is undefined. hasOwnProperty is the only method in Javascript that can handle object properties without traversing the prototype chain.

Copy code The code is as follows:

// Extend Object.prototype
Object.prototype.bar = 1;
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

Only hasOwnProperty gives the correct expected result, This is necessary when iterating over an object's properties; there is no other way to exclude properties defined on the object's prototype chain.

hasOwnProperty as a property

Javascript does not protect hasOwnProperty as a keyword or reserved word, so if an object has a property with the same name, it is necessary to use the extended hasOwnProperty to get the correct results.

Copy code The code is as follows:

var foo = {
hasOwnProperty: function() {
return false;
},
bar: 'Here be dragons'
};
foo.hasOwnProperty('bar'); // always returns false
// Call it using another hasOwnProperty and setting this to foo
{}.hasOwnProperty.call(foo, 'bar'); // true

Summary
When detecting whether an object has a certain property, hasOwnProperty is the only method that can complete this task. In the for in loop, it is recommended to add hasOwnProperty for judgment, which can effectively avoid errors caused by extending the local prototype.