Summary of Javascript for in defects, javascriptfor

Summary of Javascript for in defects, javascriptfor

Summary of Javascript for in defects

The for in statement is used to list attributes (members) of an object.

Var obj = {name: "jack", getName: function () {return this. name }}; // output name, getName for (var recognition in obj) {alert (recognition );}

Note that no built-in attributes such as toString and valueOf of are output (or built-in members, hidden attributes and predefined attributes ). That is, for in is used to list display members (custom members) of an object ).

If the built-in attributes are overwritten, the following will rewrite the toString of obj.

var obj = {name:"jack",   getName:function(){return this.name},   toString:function(){return "I'm jack."}}for(var atr in obj) {  alert(atr);}

What will be output?

1. in IE6/7/8 and without rewriting toString, only name and getName are output.

2. In IE9/Firefox/Chrome/Opera/Safari, name, getName, and toString are output.

If you add properties/methods to the built-in prototype, the for in can also be traversed.

Object.prototype.clone = function() {}var obj = {  name: 'jack',  age: 33}// name, age, clonefor (var n in obj) {  alert(n)}

The clone method is added to Object. prototype. for in, all browsers display the clone method.

This may not be enough, because it is generally not recommended to extend the Prototype of the built-in constructor, which is one of the reasons why Prototype. js is declining. JQuery and Underscore do not have a self-prototype extension. The former makes a post on the jQuery object, and the latter simply adds all methods to the underline.

However, sometimes we extend the prototype of the built-in constructor on browsers that do not support ES5 (IE6/7/8) to be compatible with ES5 or later versions, in this case, for in is different in different browsers. As follows:

if (!Function.prototype.bind) {  Function.prototype.bind = function(scope) {    var fn = this    return function () {      fn.apply(scope, arguments)    }  }}function greet(name) {   alert(this.greet + ', ' + name)}for (var n in greet) {  alert(n)}

IE6/7/8 outputs bind, but none in other browsers. Because in modern browsers, bind is native and for in is not supported, IE6/7/8 adds bind to Function. prototype.

Conclusion: in cross-browser design, we cannot rely on for in to obtain the object's member name. Generally, hasOwnProperty is used to determine the name.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!