takeaway

Js prototype chain is the foundation, is the premise of JS inheritance, the principle of new, packaging components and so on.

(2) Prototype (constructor

Easy to understand

  1. When each JS object is created, another object is associated with it. This other object is the prototype object.
  2. For example, if you create an empty Array arR, arR can call Array methods, arR itself does not have Array methods, JS will use __proto__ (nonstandard attribute) layer by layer to find the corresponding method from the Array prototype, this layer of correlation is the prototype chain.

concept

  1. Js objects can be divided into function objects and ordinary objects. Each object has a __proto__ attribute, but only function objects have a Prototype attribute.
var a = {};
console.log(a.prototype); //undefined
console.log(a.__proto__);  //Object {}

var b = function(){}
console.log(b.prototype); //b {}
console.log(b.__proto__);  //function() {}
Copy the code
  1. Object and Function are built-in Function objects of JS, similar to the commonly used Array, Date, Number and String.
  2. An object’s __proto__ refers to an object that has two attributes, constructor and __proto__, constructor referring to the corresponding constructor.
Motherland ='China'; // motherland='China'
function Person(name, age){ 
    this.name = name;
    this.age = age;
 }
 Person.prototype.motherland = 'China'
Copy the code
// Person1 instance created with new Person()
let person1 = new Person('kevin'.30);
Copy the code
Person.prototype.constructor == Person The constructor of the prototype object (person.prototype) points to the constructor itself
person1.__proto__ == Person.prototype The __proto__ of the instance (that is, person01) points to the same place as the prototype object
Copy the code

The role of the prototype chain

Prototype objects store properties and methods that are common to instances and can greatly reduce memory consumption.

Expand the knowledge

proto

__proto__ is a nonstandard attribute. If you want to access an Object’s prototype, use the reflect.getPrototypeof or object.getPrototypeof () methods new in ES6.

console.log({}.__proto__ === Object.getPrototypeOf({})); // => true
Copy the code

ES6 class

ES6 classes are essentially syntactic sugar for the constructor

class Rectangle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
    }
    draw() {
      console.log('draw'); }}Copy the code

Babel + babel-preset- PRESET – ES2015-loose Compiles the result

'use strict';
// Rectangle Class is a Rectangle constructor
var Rectangle = (function () {
  function Circle(x) {
    this.x = x;
  }
  var _proto = Circle.prototype;
  The class method is defined on Prototype
  _proto.draw = function draw() {
    console.log('draw');
  };
  returnCircle; }) ();Copy the code

Extends inheritance

class Shape {
    constructor(y) {
      this.y = y; }}class Rectangle extends Shape {
    constructor(y, x) {
        super(y);
        this.x = x;
    }
    draw() {
        console.log('draw'); }}Copy the code

Babel + babel-preset- PRESET – ES2015-loose Compiles the result


var Shape = function Shape(y) {
    this.y = y;
};
var Circle = (function (_Shape) {
    _inheritsLoose(Circle, _Shape);
    function Circle(y, x) {
        var _this;
        // Combinatorial inheritance
        _this = _Shape.call(this, y) || this;
        _this.x = x;
        return _this;
    }
    var _proto = Circle.prototype;
    _proto.draw = function draw() {
        console.log('draw');
    };
    return Circle;
})(Shape);
Copy the code

summary

I hope after reading this article you can have the following help:

  • Understand the JS prototype prototype chain
  • ES6 Class

If there are any mistakes in this article, please correct them in the comments section. If this article has helped you, please like it and follow it.