What is a prototype?

Each function has a Prototype property, which is a pointer to an object whose purpose is to hold properties and methods shared by all instances of a particular type.

function Person() {}
Person.prototype.name = 'Nicholas';
Person.prototype.age = '29';
Person.prototype.job = 'SoftWare Engineer';
Person.prototype.sayName = function() {
    console.log(this.name);
};

var person1 = new Person();
person1.sayName(); // Nicholas

var person2 = new Person();
person1.sayName(); // Nicholas

console.log(person1.sayName === person2.sayName); // true
Copy the code

Here is the diagram

According to the figure above,

  1. Constructor’s Prototype property, pointing to the prototype object

  2. Because the prototype object currently belongs to the Person constructor, its constructor points to the Person constructor

  3. Instance 1 and Instance 2 both point to prototype objects, so it proves that the properties and methods defined by Person.prototype are shared with its instances. SayName === person2.sayName returns true. That is, they really use the same function (the reference address of the function is the same)

  4. When a constructor is called to create a new instance, the instance contains a pointer (internal property) to the constructor’s Prototype object, [[Prototype]]. While there is no standard way to access [[Prototype]] in scripts, Firefox, Safari, Chrome, and others support a property proto on each object;

  5. Note that the [[Prototype]] of instances 1 and 2 refer to the Prototype object, not directly to the constructor itself

  6. Although don’t have access to the [[Prototype]] attribute, but can be by Prototype object’s isPrototypeOf () method to determine whether an instance pointing to the constructor of the Prototype object, Person, Prototype. IsPrototypeOf (person1) returns true

  7. In ES5, there is a new method object.getProtoTypeof () that returns the value of [[Prototype]]

By now, you should understand the relationship between stereotypes, stereotype objects, and constructors

What is a prototype chain?

Suppose one stereotype object is equal to an instance of another type, and another stereotype object is equal to an instance of another type. So this is the chain of instances and prototypes, and this is the basic concept of what’s called a prototype chain

// Define constructor: superclass function SuperType() {this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; }; // Define constructor: subclass function SubType() {this.subproperty = false; } // subtype. prototype = new SuperType(); / / prototype object rewritten and SubType. The new method. The prototype getSubValue = function () {return enclosing subproperty; }; var instance = new SubType();Copy the code

The diagram

What is inheritance?

You could view it as, let’s say I have functions A and B. Function A inherits function B. Then the attribute methods in function B can also be accessed and used in function A

There are many ways of inheritance: prototype chain inheritance, combination inheritance, original type inheritance, parasitic inheritance, parasitic combination inheritance

The content/inspiration of the article is taken from below

  • Continuous maintenance/update 500+ front end questions/notes github.com/noxussj/Int…

  • [Big data visualization chart plug-in] www.npmjs.com/package/ns-…

  • [3D city modeling using three.js (Zhuhai)] 3D.noxussJ.top /