Qual è il significato delle proprietà sbiadite quando si utilizza console.dir in Console degli strumenti di sviluppo di Chrome

Question

Che cosa significa quando la proprietà di un oggetto è leggermente sbiadita quando si utilizza console.dir() nella console di Chrome.

Ad esempio, dare un'occhiata a "top, width, worldVisible, x & y" in questo screenshot.

Ho guardato il riferimento API qui https://developer.chrome.com/devtools/docs/console-api#consoledirobject, ma non ha avuto fortuna.

Grazie

Answer 1

Apper sbiadita delle proprietà per indicare proprietà non enumerabili. Se facciamo:

var a = {}; 
Object.defineProperties(a, { 
    hello: { enumerable: false }, 
    world: { enumerable: true } 
}); 
console.dir(a); 

allora vediamo che hello è sbiadito, mentre world non è.

Nel codice, se si fa for(prop in obj) { console.log(prop); } (dove obj è qualsiasi oggetto che ci sta mostrando nella console screenshot), vedrete che solo le proprietà sbiadite non vengono enumerati.

È inoltre possibile controllare questo con Object.getOwnPropertyDescriptor(obj, "worldVisible"), che dovrebbe restituire un oggetto con una proprietà enumerable: false.

Si noti che il corsivo in corsivo sui nomi di proprietà indica che il valore della proprietà è definito da una funzione getter. (Questo fa sì che il valore visualizzi un valore (...) prima dell'esecuzione della funzione.) Si tratta di un problema completamente separato dall'enumerabilità, che causa la dissolvenza dei nomi. È possibile avere proprietà definite getter in corsivo che non sono proprietà non enumerabili sbiadite e viceversa.

Answer 2

non sono stato in grado di trovare nella documentazione alcuna spiegazione ufficiale, ma ho una buona congettura sulla base di alcuni test che in grigio attributi sono quelli che sono predefiniti/set dal motore Javascript e non dal codice stesso. Ecco alcuni esempi:

length in un array

var foo = [1,2,3,45,1337]; 
console.dir(foo); 

cede la console:

Si noti che gli indici non sono visualizzati in grigio ma length e tutto in __proto__ è.

prototipazione

Il codice da https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype#Examples

var Person = function() { 
    this.canTalk = true; 
}; 

Person.prototype.greet = function() { 
    if (this.canTalk) { 
    console.log('Hi, I am ' + this.name); 
    } 
}; 

var Employee = function(name, title) { 
    Person.call(this); 
    this.name = name; 
    this.title = title; 
}; 

Employee.prototype = Object.create(Person.prototype); 
Employee.prototype.constructor = Employee; 

Employee.prototype.greet = function() { 
    if (this.canTalk) { 
    console.log('Hi, I am ' + this.name + ', the ' + this.title); 
    } 
}; 

var bob = new Employee('Bob', 'Builder'); 
bob.greet(); 
console.dir(bob); 

Dà nella console:

Ci sono un sacco di cose interessanti qui. Tutte le istanze di greet non sono disattivate. Comunque ovunque __proto__ è disattivato (probabilmente perché è impostato dal motore sul suo prototipo). Anche il costruttore sottoposto a override da Person è disattivato, ma il costruttore di Employee impostato in modo esplicito non è disattivato.

Quindi penso che ci sia uno schema approssimativo qui, che è che Chrom (e/ium) mette in ombra le proprietà che pensa che sarà meno probabile che gli importi, sia perché sono state ereditate o impostate dal motore come un costrutto del linguaggio, ma sembra non essere perfetto. (Ma chi è, giusto?) Un'altra cosa interessante da provare è F12 e digitare console.dir(window). Lì vedrai quasi tutto in grigio, ad eccezione delle cose inserite nel namespace della finestra globale dal Javascript del sito web.