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

👉 prototype

👉 Prototype-based languages

JavaScript is often described as a prototype-based language — each object has a prototype object, which is a template from which it inherits methods and properties. A stereotype object may also have a stereotype from which it inherits methods and properties, layer by layer, and so on. This relationship, often referred to as a stereotype chain, explains why one object has properties and methods defined in other objects.

We often see how to create a new empty array in js, empty, empty string, and so on, for example, to create a new empty array, we usually use the const arr = [] to create, and then use the console. The dir (arr) in the console view to print the results, found a __proto__ properties, Then you can print the console.dir(Array) constructor again and see that it has a prototype property and find arr.__proto__ === array. prototype

const arr = []
const newArr = new Array()
console.dir(arr)
console.dir(newArr)
/**
 * length: 0
 * __proto__: {
 * concat: function () {}
 * ...
 * }
 */
​
console.dir(Array)
/**
 * from: function() {}
 * isArray: function() {}
 * prototype: {
 * concat: function () {}
 * }
 * __proto__: {
 * apply: function() {}
 * bind: function() {}
 * call: function() {}
 * }
Copy the code

So before we get to the concept, what is a constructor, what is an instance object, for example, what is the variable newArr? Array is an object that is instantiated with the constructor new keyword. In JavaScript, a function that starts with an uppercase letter is called a constructor.

In traditional OOP, a “class” is first defined, and then all properties and methods defined in the class are copied into the instance when an object instance is created. This is not replicated in JavaScript — instead, a link is made between the object instance and its constructor, which is a __proto__ property derived from the constructor’s prototype property, and then those properties and methods are found in the constructor by going up the prototype chain.

👉 uses prototypes in JavaScript

As shown above, each function has a Prototype property, so you can run the following code from the Chrome console to help understand.

Function doSomething(){} console.log(doSomething. Prototype); Var doSomething = function(){}; console.log( doSomething.prototype ); / / add some properties to doSomething prototype doSomething. Prototype. Foo = "bar"; console.log( doSomething.prototype ); Var doSomeInstancing = new doSomething(); doSomeInstancing.prop = "some value"; // Add properties console.log(doSomeInstancing); // Here find doSomeInstancing.__proto__ === doSomething. PrototypeCopy the code

What’s the beauty of the design?

First, what is the order in which attributes are found? To find the value of prop on the doSomeInstancing object, we can find some value directly; if we look for the value of foo, we find that the value returned is bar. It’s actually quite understandable.

When you visit a property on doSomeInstancing, the first thing to find out about doSomeInstancing is whether it exists, and what if it doesn’t? Then look at doSomeInstancing to see if it’s available on the prototype object of this instance, so look at doSomeInstancing.__proto__. This is the prototype property of the constructor. So if you find doSomething. Prototype, if doSomething. Prototype has this property on it, go straight back to doSomeInstancing; if not, go on to find doSomeInstancing.__proto__. Find doSomeInstancing.__proto__.__proto__ === Object.prototype, however if no properties are found on Object.prototype as well, It will look for doSomeInstancing.__proto__.__proto__.__proto__, only to find that it will return null, and finally find out that there is no property at all and find out that the property value is undefined

function doSomething(){}
doSomething.prototype.foo = "bar";
var doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value";
console.log("doSomeInstancing.prop:      " + doSomeInstancing.prop);
console.log("doSomeInstancing.foo:       " + doSomeInstancing.foo);
console.log("doSomething.prop:           " + doSomething.prop);
console.log("doSomething.foo:            " + doSomething.foo);
console.log("doSomething.prototype.prop: " + doSomething.prototype.prop);
console.log("doSomething.prototype.foo:  " + doSomething.prototype.foo);
​
/**
doSomeInstancing.prop:      some value
doSomeInstancing.foo:       bar
doSomething.prop:           undefined
doSomething.foo:            undefined
doSomething.prototype.prop: undefined
doSomething.prototype.foo:  bar
 */
Copy the code

👉 Understand the prototype object

Start by defining a constructor function

Function Person(first, last, age, gender, interests) {// attribute and method definition};Copy the code

Then create an instance object

var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
Copy the code

How the prototype chain works

        inherits from prototype                inherits from prototype
person1                             Person                               Object
                  =>                                    =>
Copy the code

Note: It is important to reiterate that methods and properties in the stereotype chain are not copied to other objects — they need to be accessed through the “stereotype chain” described earlier.

👉 prototype property: Where inheritance members are defined

The inherited properties and methods are defined on top of the Prototype property, which you can call sub namespaces — those whose names start with Object.prototype. Properties that begin, not properties that simply begin with Object. The value of the Prototype attribute is an object where properties and methods that we want to inherit from objects downstream of the prototype chain are stored.

JavaScript is full of examples of inheritance through prototype chains. For example, you can try to find methods and properties from the prototypes of String, Date, Number, and Array global objects.

👉 constructor properties

Each instance object inherits from the stereotype a constructor property that points to the constructor used to construct this instance object.

var o = {};
o.constructor === Object; // true
​
var o = new Object;
o.constructor === Object; // true
​
var a = [];
a.constructor === Array; // true
​
var a = new Array;
a.constructor === Array // true
​
var n = new Number(3);
n.constructor === Number; // true
Copy the code