This is the 16th day of my participation in the August More Text Challenge

The preface

Many new-found friend JS, prototypes are around the important knowledge points, however, but believes that many people are like when I was a beginner of doubt, any special meaning for this thing, why do we need to learn this, this thing what, always a little knowledge learned, today we will take to find the answer to these questions.

Prototype

In JavaScript, objects have a special hidden attribute [Prototype] (which is either null or a reference to another object. This object is called a “stereotype.” Prototype exists when we have a User object with its properties and methods and want admin and guest as variations based on user with slight modifications. We want to reuse content in User, not copy/re-implement its methods, but just build a new object on top of it. When a missing property is read from an object, JS automatically looks up the property from the stereotype. This behavior is called stereotype inheritance. case

let people = { eats: true }; let rabbit = { jumps: true }; rabbit.__proto__ = people; // Set rabbit.[[Prototype]] = peopleCopy the code

Now, when we read an attribute from Rabbit that it doesn’t have, JS will automatically get it from people

For example,

let people = { eats: true }; let rabbit = { jumps: true }; rabbit.__proto__ = people; // // Now we can find both properties in rabbit: alert(rabbit.eats); // true alert( rabbit.jumps ); // trueCopy the code

Here we can say “Animal is the original rabbit”, or “The original rabbit is inherited from animal”. Therefore, if Animal has many useful attributes and methods, they will automatically become available in Rabbit. This property is called inheritance.

If we have a method in people, it can be called in Rabbit

let people = { eats: true, walk() { alert("people walk"); }}; let rabbit = { jumps: true, __proto__: people }; // The walk method is the rabbit.walk() obtained from the prototype; // people walkCopy the code

Prototype chains can be inherited from one object to another

let people = { eats: true, walk() { alert("people walk"); }}; let rabbit = { jumps: true, __proto__: people }; let longEar = { earLength: 10, __proto__: rabbit }; // Walk is obtained by prototype chain longear.walk (); // people walk alert(longEar.jumps); // true (from rabbit)Copy the code

Let’s see, longEar inherits rabbit, and Rabbit inherits people, so longEar inherits both Rabbit and people, and when properties that aren’t on longEar are taken, he looks up from the bottom up. I’ll look it up in Rabbit, and then I’ll look it up in Animal.

There are two limitations to the prototype chain

  1. References do not form a closed loop. If we try to assign proTO in a closed loop, JavaScript throws an error.
  2. The value of proto can be an object or null. All other types are ignored.

Note that there is only one [[Prototype]]. An object cannot inherit from two other objects. Proto is a historical getter/setter for [[Prototype]]. Many people confuse proto with [[Prototype]]. Proto is the getter/setter for [[Prototype]]. So modify proto, [[Prototype]] will change accordingly, then use the Object. The getPrototypeOf/Object setPrototypeOf to replace the proto do get/set the Prototype.

for… In circulation

for.. The IN loop also iterates over inherited properties.

let people = { eats: true }; let rabbit = { jumps: true, __proto__: people }; Keys returns only its own key alert(object.keys (rabbit)); // jumps // for.. In iterates over itself and the inherited key for(let prop in rabbit) Alert (prop); // Jumps, followed by eatsCopy the code

If this is not what we want, and we want to exclude inherited properties, there is a built-in method obj.hasownProperty (key) : returns true if obj has its own (non-inherited) property named key.

let people = {
  eats: true
};
​
let rabbit = {
  jumps: true,
  __proto__: people
};
​
for(let prop in rabbit) {
  let isOwn = rabbit.hasOwnProperty(prop);
​
  if (isOwn) {
    alert(`Our: ${prop}`); // Our: jumps
  } else {
    alert(`Inherited: ${prop}`); // Inherited: eats
  }
}
Copy the code

In this way, we can distinguish between properties of the object itself and properties that are inherited.