0

I have the code snippet like this:

function Person(myName,myAge) {
            this.name = myName
            this.age = myAge
        }
        Person.prototype = {
            say:function() {
            console.log("Hi");
            }
        }
let person = new Person("John",12);
console.log(Person.prototype)
console.log(Person.prototype.constructor)
console.log(person.__proto__)

I can't understand why when I first execute the code(by right click and open the file in chrome),the devtool will log:

Object
ƒ Object() { [native code] }
Object

But when I refresh the browser,the devtool will log:

{say: ƒ}
ƒ Object() { [native code] }
{say: ƒ}

So, in the first log,it actually didn't log the complete object,right?It just log Object in order to tell you that it is an object instead of telling you the content of this object.Why?What does the browser do when I refresh it?

AKT
  • 942
  • 6
  • 16
Chor
  • 833
  • 1
  • 5
  • 14
  • [This](https://stackoverflow.com/questions/21788187/javascript-better-way-to-modify-function-prototype) and [this](https://stackoverflow.com/questions/23807805/why-is-mutating-the-prototype-of-an-object-bad-for-performance) might help you why this is happening. This has been a long time thing on chrome and webkit. – AKT Jun 27 '20 at 08:07
  • @AbhishekKumarTiwari No,my doubts are not there.I just can't understand why the devtool will log `Object` when first execute the code while it will log the complete object when refreshing the browser.Check my question above. – Chor Jun 27 '20 at 08:19
  • I mean the first time when I try to log `Person.prototype`,it should just log `{say: ƒ}` instead of `Object` – Chor Jun 27 '20 at 08:21

1 Answers1

0

Changing the prototype directly is not a good idea. No matter if you use setPrototypeOf or directly .prototype.

From MDN

Warning: Changing the [[Prototype]] of an object is, by the nature of how modern JavaScript engines optimize property accesses, currently a very slow operation in every browser and JavaScript engine. In addition, the effects of altering inheritance are subtle and far-flung, and are not limited to simply the time spent in the Object.setPrototypeOf(...) statement, but may extend to any code that has access to any object whose [[Prototype]] has been altered.

Because this feature is a part of the language, it is still the burden on engine developers to implement that feature performantly (ideally). Until engine developers address this issue, if you are concerned about performance, you should avoid setting the [[Prototype]] of an object. Instead, create a new object with the desired [[Prototype]] using Object.create().

You should use Object.create instead with the desired prototype.

AKT
  • 942
  • 6
  • 16
  • My doubts are not there.I just can't understand why the devtool will log Object when first execute the code while it will log the complete object when refreshing the browser.Check my question above – Chor Jun 27 '20 at 08:35
  • It's clearly written in the answer, `currently a very slow operation in every browser and JavaScript engine` . Setting the prototype directly is never the way to go because of all the problems like yours it brings. – AKT Jun 27 '20 at 08:40
  • No, this isn't the question here – A. Wolff Jun 27 '20 at 08:42
  • @AbhishekKumarTiwariA You mean it is because "changing prototype is a slow operation" that it will only log `Object` for the first time,and later the operation is done and it logs the `{say: ƒ}`,right? – Chor Jun 27 '20 at 09:32
  • But i am still confused here since what I change is `prototype` instead of `[[prototype]]` or `__proto__`.Is changing the `prototype` also a slow operation? – Chor Jun 27 '20 at 09:34