为什么刷新浏览器前后console.log的结果会不一样？

Question

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?

Answer 1

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.