Prototypes and Prototype Chains

Foreword

Unlike most object - oriented languages, ES6 did not introduce the concept of classes before.JavaScript does not create instances through classes but directly through constructors.Before introducing prototypes and prototype chains, it is necessary to review the knowledge of constructors.

1. Constructor

The purpose of the constructor pattern is to create a custom class and create an instance of this class. Constructor pattern has the concept of class and instance, and instance and instance are independent of each other, that is, instance identification.

Constructor is an ordinary function, the way of creation is no different from ordinary functions, the difference is that constructors are used to capitalize the first letter.The other is the difference in calling methods, ordinary functions are called directly, while constructors need to be called using the new keyword.

function Person(name, age, gender) {
this.name = name
this.age = age
this.gender = gender
this.sayName = function () {
alert(this.name);
} 
}

var per = new Person("Monkey King", 18, "Male");
function Dog(name, age, gender) {
this.name = name
this.age = age
this.gender = gender
}

var dog = new Dog("Prosperity", 4, "male")
console.log(per);//When we print an object directly on the page, the event is the return value of the toString() method of the output object
console.log(dog);

Every time a Person constructor is created, a sayName method is added to each object in the Person constructor, that is to say, a new sayName method is created every time the constructor is executed.This causes the constructor to create a new method once executed, and 10, 000 new methods to be created when executed 10, 000 times, and 10, 000 methods are all the same, why not put this method in a separate place, And make all instances accessible ? This requires prototype(prototype)

2. Prototype

In JavaScript, whenever a function data type(ordinary function, class) is defined, it will have an prototypeattribute that points to the prototype object of the function, and this attribute is the value of an object data type.

 Let's use a diagram to represent the relationship between constructors and instance prototypes:

The prototype object is equivalent to a public area.All instances of the same class can access this prototype object.We can uniformly set the common content of the object into the prototype object.

3. Prototype chain

1. __proto__andconstructor

Each object data type(ordinary object, instance, prototype...) also inherently has an attribute __proto__, and the attribute value is the prototype(prototype) of the class to which the current instance belongs.There is a property in the prototype object constructorwhich points to the function object.

function Person() { }
var person = new Person()
console.log(person.__proto__ === Person.prototype)//true
console.log(Person.prototype.constructor === Person)//true
//By the way, learn an ES5 method to get the prototype of the object
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

2. What is the prototype chain

In JavaScript, everything is an object, and there is a relationship between objects and objects, and they do not exist in isolation.The inheritance relationship between objects, in JavaScript, points to the parent class object through the prototype object until it points to the Object object, which forms a chain pointed to by the prototype, which is called the prototype chain in professional terms.

For example: person → Person → Object, ordinary people inherit humans, and humans inherit object classes

When we access a property or method of an object, it will first look in the object itself, if there is one, it will be used directly, if not, it will be found in the prototype object, and if it is found, it will be used directly.If not, look for the prototype of the prototype until the prototype of the Object object is found.The prototype of the Object object has no prototype.If it is still not found in the Object prototype, it returns undefined.

We can use the object's hasOwnProperty()to check whether the object itself contains this property; when using to incheck whether the object contains a certain property, if the object does not have it but the prototype has it, it will also return true

function Person() { }
Person.prototype.a = 123;
Person.prototype.sayHello = function () {
    alert("hello");
};

var person = new Person()
console.log(person.a)//123
console.log(person.hasOwnProperty('a'));//false
console.log('a' in person)//true

There is no attribute a in the person instance.If the attribute a cannot be found in the person object, it will be person.__proto__searched from the prototype of person, that is, Person.prototype.Fortunately, the value of a is 123. Then if person.__proto__there is no such attribute in , how to find it ?

When reading the properties of the instance, if it can't find it, it will look for the properties in the prototype associated with the object. If it can't find it, it will find the prototype of the prototype until it finds the top - level Object.Object is the base class (the top - level class) of all object data types in JS.Object.prototype does not have __proto__this property.

console.log(Object.prototype.__proto__ === null) // true