https://ko.javascript.info/function-prototype
In this article (https://ko.javascript.info/function-prototype), you said that the prototype property of the function is different from [[Prototype]] and only [[Prototype]]] of the new object that is created when you call new. Looking at https://ko.javascript.info/native-prototypesChanging native prototypes in this article, adding new properties to String.prototype also seems to affect [[Prototype]]] of already created objects. Shouldn't it not affect [[Prototype]] of an existing object, but only [[Prototype]] of a newly created String object?
Is there anything I misunderstood? I wonder why these results come out.
javascript prototype
When I read each article separately, there is no problem because only the explanation that fits the situation is written.
When I read these two sentences while comparing them together, I feel like I'm getting confused.
https://ko.javascript.info/function-prototype
This first article describes how objects created when you instantiate Function with the new keyword relate to the constructor function through the prototype property.
It says change prototype here,
function Rabbit() {}
Rabbit.prototype = {
jumps: true
};
In terms of code, you are replacing the value in the existing prototype with another value ({jumps:true}).
function Rabbit() {}
console.log(Rabbit.prototype); // {constructor: ƒ}
Rabbit.prototype = {jumps: true};
console.log(Rabbit.prototype); // {jumps: true}
To avoid confusing this change with what will be described later, let's say redefine prototype.
https://ko.javascript.info/native-prototypes
This is the second article. The native object is described as an example of how prototype chain works.
The term change is also used here.
But the change is a bit different.
String.prototype.show = function() {
alert(this);
};
You added a property called show to the existing prototype property. This is a situation in which other properties (functions) that existed in the existing String.prototype are retained and only the function show is added.
function Rabbit() {}
console.log(Rabbit.prototype); // {constructor: ƒ}
Rabbit.prototype.jumps = true;
console.log(Rabbit.prototype); // {jumps: true, constructor: ƒ}
Let this change be prototype extension.
Both prototype override and prototype extension are correct to change prototype, but
If you override the The instantiated object refers to However, objects created by instantiating after Because of this nature, the expression The following example will help you understand. Note that the prototype that an object references can be determined through its If you compare the values from the example above, This is also proof that a prototype of the constructor function can affect objects that have already been instantiated. Let's wrap up by taking an example of prototype, you lose the prototype properties of the existing constructor function.prototype of the constructor function at the time of creation.prototype override of the constructor function refer only to prototype after the override, and the objects before the override are not accessible. is used in the article as a pass that can be used only once.
(Assuming that there is no backup...))function Rabbit() {}
Rabbit.prototype = {jumps: true};
// The first rabbit
var rabbit1 = new Rabbit();
console.log(rabbit1.jumps); // true
// The prototype of the constructor function has been overridden
// An instance object that was already created before that references to it
// Override is a previous prototype object and is not affected.
Rabbit.prototype = {shortEars: false};
console.log(rabbit1.jumps); // true
// The second rabbit
// The prototype has been overridden above
// Jumps is not defined.
// Instead, the overridden attribute values are properly contained.
var rabbit2 = new Rabbit();
console.log(rabbit2.jumps); // undefined
console.log(rabbit2.shortEars); // false
// Save the prototype referenced by Rabbit2 separately (backup mentioned above)
// Let's redefine the prototype of the constructor function.
var temp = Rabbit.prototype;
Rabbit.prototype = {redEyes: true};
// Rabbit2 is also not affected as Rabbit1 was.
console.log(rabbit2.shortEars); // false
console.log(rabbit2.redEyes); // undefined
// However, if you change the temp that was a prototype before the override,
// It can be seen that it is also reflected in Rabbit2.
// Change the value of an existing property, or
temp.shortEars = true;
console.log(rabbit2.shortEars); // true
// Adding new attributes will also reflect it.
temp.shortTail = true;
console.log(rabbit2.shortTail); // true
__proto__ property.// False because the objects referenced as prototypes are different.
rabbit1.__proto__ === rabbit2.__proto__ // false
// True because they are the same.
temp === rabbit2.__proto__ //true
prototype extension.
If you understand correctly so far, this will be easy.function Rabbit() {}
// First, override prototype
Rabbit.prototype = {jumps: true};
// Create one instance object before the extension.
var rabbit1 = new Rabbit();
// The jumps present in the prototype attribute of the constructor function are reflected.
// LongEars is undefined.
console.log(rabbit1.jumps, rabbit1.longEars); // true undefined
// Attempt to expand
Rabbit.prototype.longEars = true;
// It is reflected in an object that has already been instantiated.
console.log(rabbit1.jumps, rabbit1.longEars); // true true
// The same is true of instances created after an extension attempt.
var rabbit2 = new Rabbit();
console.log(rabbit2.jumps, rabbit2.longEars); // true true
// The prototypes in both instances are looking at the same object
rabbit1.__proto__ === rabbit2.__proto__ // true
// The object is the prototype of the constructor function.
rabbit1.__proto__ === Rabbit.prototype // true
The way prototypes work is 'mysterious'. This is because JavaScript automatically finds properties in the prototype when you try to read them from the object, but they don't exist. In programming, this behavior is called 'prototype inheritance'.
https://ko.javascript.info/prototype-inheritance
That's what it says
If you create an object that's been created before, or a new object that's been created with the same constructor function, the prototype will be the same, and then it'll be like the description above?
© 2024 OneMinuteCode. All rights reserved.