Jakie jest znaczenie wyblakłych właściwości podczas korzystania z konsoli console.dir w narzędziu Chrome Developer Tools Console

Question

Co to znaczy, gdy właściwość obiektu jest lekko wyblakła podczas używania konsoli console.dir() w konsoli chrome.

Na przykład spójrz na "góra, szerokość, światwidoczne, x & y" na tym zrzucie ekranu.

Szukałem w odniesieniu API tutaj https://developer.chrome.com/devtools/docs/console-api#consoledirobject, ale nie miał szczęścia.

Dzięki

Answer 1

Wyblakłe właściwości pojawiają się, wskazując właściwości nieprzeliczalne. Jeśli robimy:

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

potem widzimy, że hello jest wyblakły, a world nie jest.

W kodzie, jeśli nie for(prop in obj) { console.log(prop); } (gdzie obj jest cokolwiek przedmiot jesteś pokazując nam w zrzucie konsoli), zobaczysz, że tylko wyblakłe właściwości nie są wyliczone.

Można to również sprawdzić za pomocą Object.getOwnPropertyDescriptor(obj, "worldVisible"), która powinna zwrócić obiekt z właściwością enumerable: false.

Uwaga: kursywa na nazwach właściwości wskazuje, że wartość właściwości jest definiowana przez funkcję pobierającą. (To również powoduje, że wartość wyświetla wartość (...) przed uruchomieniem tej funkcji.) Jest to całkowicie oddzielny problem z wymienialnością, który powoduje, że nazwy są wyblakłe. Można zdefiniować kursywa, które nie są wyblakłymi właściwościami nieprzeliczalnymi i na odwrót.

Answer 2

I nie były w stanie znaleźć w dokumentacji żadnego oficjalnego wyjaśnienia, ale mam dobre przypuszczenie na podstawie niektórych badań, które wyszarzonych atrybuty są te, które są domyślnie/set silnikiem JavaScript i nie przez sam kod. Oto kilka przykładów:

length w tablicy

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

daje w konsoli:

Zauważmy, że indeksy nie są wyszarzone ale length i wszystko w __proto__ jest.

prototypowania

Kod z 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); 

Daje w konsoli:

Istnieje wiele ciekawych rzeczy tutaj. Wszystkie wystąpienia greet nie są wyszarzone. Jednak wszędzie __proto__ jest wyszarzony (prawdopodobnie dlatego, że jest ustawiony przez silnik na jego prototyp). Również nadpisany konstruktor z Person jest wyszarzony, ale jawnie ustawiony konstruktor Employee nie jest wyszarzony.

Myślę więc, że istnieje tutaj szorstki wzorzec, który polega na tym, że Chrom (e/ium) wyszczerbia właściwości, które według nich są mniej prawdopodobne, ponieważ zostały odziedziczone lub ustawione silnik jako konstrukcja języka, ale wydaje się, że nie jest doskonały. (Ale kto jest, prawda?) Kolejną interesującą rzeczą, którą można wypróbować, jest F12 i wpisz console.dir(window). Zobaczysz prawie wszystko w szarym kolorze, z wyjątkiem rzeczy umieszczonych w globalnej przestrzeni nazw okna przez skrypt JavaScript strony.