Различные console.log () во фрагменте stackoverflow против консоли браузера - почему? - PullRequest
Новая
       11

Различные console.log () во фрагменте stackoverflow против консоли браузера - почему?

1 голос
/ 15 января 2020 

const func = function() {
  this.name = 'mon'
}
let f1 = new func
let f2 = Object.create(f1) 
let f3 = Object.create(f2) // The following comments are what the browser console logs:
console.log(f1.__proto__) // {constructor: f}
console.log(f2.__proto__) // func {name: "mon"}
console.log(f3.__proto__) // func {}   (here's where this snippet logs func {"name": "mon"})

Кроме того, «тип» объекта в JS определяется его «ближайшим» конструктором? (т.е. fun c - это тип, который браузер регистрирует для f1 & f2)?

1 Ответ

2 голосов
/ 15 января 2020

Разница в том, что консоль Stack Snippet (код которой можно найти здесь ) перебирает свойства, используя for..in. Это будет включать в себя перечисляемых свойств в любом месте цепочки прототипов. Вот как (часть) консоль фрагмента определяет свойства для ведения журнала: 

    function n(e) {
        var n = [];
        for (var o in e)
            n.push(o);
        return n
    }

Например: 

const proto = { prop: 'val' };
const obj = Object.create(proto);
console.log(obj); // browser console shows `Object`, but no `prop` property

Напротив, в консоли браузера будут отображаться только свойства непосредственно зарегистрированного объекта. Чтобы получить доступ к внутреннему прототипу зарегистрированного объекта (и просмотреть возможные свойства в прототипе), вам нужно щелкнуть свойство __proto__, чтобы развернуть его.

enter image description here

Поскольку свойство constructor для someFunction.prototype является не перечисляемым, оно не будет повторяться через for..in, поэтому оно отображается в браузере консоль, но не в консоли фрагмента. 

const func = function() {
  this.name = 'mon'
}
console.log(func.prototype.hasOwnProperty('constructor'));
for (const prop in func.prototype) {
  console.log(prop); // Nothing is logged
}

Кроме того, «тип» объекта в JS определяется его «ближайшим» конструктором? (т.е. fun c - это тип, который браузер записывает для f1 и f2)?

Каждый объект имеет ровно один внутренний прототип. В вашем фрагменте внутренний прототип f3 равен f2, внутренний прототип f2 равен f1, а внутренний прототип f1 равен func.prototype. Что-то в цепочке прототипов может также иметь свойство constructor (func.prototype.constructor === func), но тот факт, что такое свойство существует, на самом деле не влияет на внутреннюю цепочку прототипов, это просто удобно метод связывания объекта .prototype с соответствующим function.

...