Some nonsense

Recently on the front end to advance the encountered some obstacles on the road, prior to work with are some of the class-based object-oriented language, met js mentally force, the inheritance to do, the prototype object is what, prototype chain is so complex, the prototype is the little red book that most embarrassing chain of a complex obscure words that in the beginning, or to come to the Denver nuggets bosses great resolution.

First of all to put out to save me in the fire and water of the article, this article is really concise and clear, after reading feel suddenly enlightened, feeling myriad, decided to write down, convenient later.

Some concepts and principles

Some of the concepts

1, Js objects are divided into ordinary objects and function objects, each object has a __proto__ attribute, but not every object has a prototype attribute, only function objects have.

The __proto__ attribute is also an object that has a __proto__ attribute, but also a constructor attribute; The stereotype object has a default constructor property that points to the instance’s constructor.

Some principles

1, the prototype object (prototype property) to the constructor itself, namely the Test. The prototype. The constructor = = Test, the following figure

The __proto__ attribute of the instance points to the prototype object, test.__proto__ == test.prototype, as shown below

var Test = function() {};var test = new Test();

console.log(Test.prototype.constructor);
console.log(Test.prototype.constructor == Test);

console.log(test.__proto__);
console.log(test.__proto__ == Test.prototype);
Copy the code

Some understanding

Js doesn’t have anything based on classes, so how do you play with object-oriented inheritance, which is the prototype chain.

Var Test = function() {} var Test = function() {} var Test = function() {} Testson.prototype = new Test(); .

In this way, the instantiation of a subclass can access not only the attributes and methods of the subclass, but also the attributes and methods of the parent class through the prototype chain layer lookup. Of course, if you add or modify a property or method that has the same name as the parent class in an instantiation of a subclass, then you override it, and then when you access it again, you’re accessing the property method that the subclass instantiated itself, not the parent class. (Of course, you can modify the properties and methods in the parent class directly without overwriting them, but then the property methods called by other parent and subclass instances will also be modified because they are common).

Some examples

This example is learning to play, I think there is no problem in thought.

/ / parent class
var Menu = function () {
    this.name = 'menu';
}

Menu.prototype = {
    GetName: function () {
        return this.name; }}/ / subclass
var MenuLanguage = function () {
    this.currentLanguage = 'chn';
    this.ShowInfo = function () {
        console.log(this.currentLanguage);
        console.log(this.GetName()); }}/ / inheritance
MenuLanguage.prototype = new Menu();


var languageMenu = new MenuLanguage();
languageMenu.ShowInfo();
Copy the code

The parent class is the menu class, which has its own properties. Prototype = new Menu(); MenuLanguage. Prototype = new Menu(); The parent class is inherited from the menu. prototype method GetName() with its own properties and methods. Finally, a language menu was instantiated, and the method was called to print, which not only accessed the properties of the language menu itself, but also accessed the properties of the parent menu class, as shown in the figure below

Some other pictures

Some other crap

This article is for the purpose of recording notes, so it is inevitable that it will not be accurate or even wrong, after all, it is only a front-end white, just began to learn. Everyone is welcome to pass by correction.