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

preface

From the shallow to the deep, deep to the shallow. Take a look at JavaScript classes and inheritance.

What is a prototype

In different programming languages, designers also use different language features to describe objects abstractly. The most successful genre is the use of “classes” to describe objects, giving rise to popular programming languages such as C++ and Java. This school is called class-based programming languages.

JavaScript is a prototype-based programming language that uses stereotypes to describe objects.

Based on the categories:

In such languages, there is always a class and an object is instantiated from that class. Classes may form inheritance, combination and other relations between classes. Classes in turn are often integrated with the language’s type system to form some compile-time capabilities.

Based on prototypes:

Focus on the behavior of the object instance, partitioning it into the most recent prototype objects that are used in a similar way.

Prototype – based object-oriented systems that create new objects by “copying”.

Prototype: A collection of object behaviors. Archetypes are more about behavior.)

Before JavaScript, prototyping systems were more compatible with highly dynamic languages, and most prototype-based languages advocated prototyping modification at runtime.

There are two ways to realize the “copy operation” of prototype system:

One is to make the new object hold a reference to the prototype without actually copying it.

The other is to actually copy the object so that the two objects are no longer related.

JavaScript is the first one.

JavaScirpt prototype

In general, JavaScript1.1 introduced prototype-related concepts, 1.2 introduced __proto__ pseudo-attributes, and ES3 specification left no changes after pseudo-attributes were removed.

Examples of JavaScript 1.1 prototypes

Function ptSum(pt2) {return new Point(this.x + pt2. X, this.y + pt2. Y); } function ptDistance(pt2) { return Math.sqrt(Math.pow(pt2.x - this.x, 2) + Math.pow(pt2.y - this.y, 2)); Function Point(x, y) {// Create and initialize the new object's data attribute this.x = x; this.y = y; } // Add methods to shared prototype object point.prototype. sum = ptSum; Point.prototype.distance = ptDistance; var origin = new Point(0, 0); // Create a Point objectCopy the code

Prototype features:

  • When accessing an object property, the property value of the prototype object is returned if the property name has been defined on the stereotype associated with the object constructor.
  • Additions or modifications to stereotype object properties are immediately visible to existing objects created through the constructor associated with the stereotype.
  • When assigning a value to an object property, the value of the property of the same name defined on the stereotype associated with the object constructor is masked.

————————————————————————————————

In ES6, we are provided with a series of built-in functions to more directly access manipulation prototypes:

  • Create Creates a new Object based on the specified prototype. The prototype can be null.

  • Object.getprototypeof Gets the prototype of an Object;

  • Object.setPrototypeOf Sets the prototype of an Object.

    Var cat = {say(){console.log(“meow~”); }, jump(){ console.log(“jump”); }} // This code creates a cat object

    var tiger = Object.create(cat, { say:{ writable:true, configurable:true, enumerable:true, value:function(){ console.log(“roar!” ); Var anotherCat = object.create (cat); var anotherCat = object.create (cat);

    anotherCat.say();

    var anotherTiger = Object.create(tiger);

    anotherTiger.say(); // We can control the behavior of all cats and tigers through “primitive cat objects” and “primitive tiger objects”.

    console.log(Object.getPrototypeOf(anotherCat) === cat);

    console.log(Object.getPrototypeOf(anotherTiger) === cat); console.log(Object.getPrototypeOf(anotherTiger) === tiger);

PS: for __proto__ pseudo-attributes, refer to the MDN documentation, not recommended, phased out. I’m not going to spend too much time here. Probably most blog material has this __proto__ pseudo-attribute as well. Learn according to your own needs.

Class to inherit

Objects are created through the new constructor, and methods and properties are shared through Prototype.

Before the ES6

In the absence of Object. Create and Object. SetPrototypeOf in ES6, we can only specify the Object’s prototype through new and constructor.

Function c1(){this.p1 = 1; this.p1 = 1; this.p2 = function(){ console.log(this.p1); } } var o1 = new c1; o1.p2(); // function c2(){} // function c2(){// function c2(){// function c2(){// function c2(){// function c2(){// function c2.prototype.p1 = 1; c2.prototype.p2 = function(){ console.log(this.p1); } var o2 = new c2; o2.p2(); / / 1Copy the code

ES6 classes in the

class Rectangle { constructor(height, width) { this.height = height; this.width = width; } // Getter get area() { return this.calcArea(); } // Method calcArea() { return this.height * this.width; }}Copy the code

Inheritance in ES6

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
Copy the code

PS:

With uneasy psychology, combing class and integration. Because this piece does not have much actual combat experience as the basis, so it is inevitable to cite some examples, and around these examples to comb out. On the one hand, it is the combing of knowledge, on the other hand, it is also the combing of cases.

Before this, still must have the comb on train of thought, lest cause the pile up on content. JavaScript1.0 does not have inheritance and is an object-based language. After 1.1 function objects had prototype properties, 1.2 introduced __proto__ pseudo-properties.

ES6(ECMAScript2015) officially introduces classes, encapsulates JavaScript classes and inheritance, and there have been no major updates since then.

In general, the core content is JavaScirpt objects, functions, prototype chains, and classes and inheritance. From the point of view of fixed number of years alone, learning materials should be a lot. The emphasis is still on the implementation of prototype chains and classes and integrations to find appropriate cases and deepen understanding.

This paper selects some simple cases to do a simple sorting, mainly to be familiar with the core concepts of class and inheritance in JavaScirpt. Slowly and steadily, continuous access to information, the whole person has some impetuous, the most simple infrastructure first, and then to explore the depths.