I have a prototype.

All data types in JavaScript, except the base type, are objects (reference types). But since there is no concept of class (ES6 introduced class, but it is just syntactic sugar), there is a problem of how to link all objects together, hence the concept of prototypes and prototype chains.

Each instance object has a private attribute (called __proto__) that points to its constructor’s prototype. The prototype object also has a prototype object of its own (__proto__), cascading up until an object’s prototype object is null. Null, by definition, has no prototype and serves as the last link in the prototype chain. Almost all objects in JavaScript are instances of Object at the top of the prototype chain.

Second, inheritance based on prototype chain

JavaScript objects are dynamic property “packages” (referring to their own properties). JavaScript objects have a chain that points to a prototype object. When it tries to access an object’s properties, it searches not only for that object, but also for that object’s prototype, and the prototype of that object’s prototype, working its way up until it finds an attribute with a matching name or reaches the end of the prototype chain.

Following the ECMAScript standard, the someObject.[[Prototype]] symbol is used to point to the Prototype of someObject. As of ECMAScript 6, [[Prototype]] can be accessed via object.getProtoTypeof () and Object.setProtoTypeof () accessors. This is equivalent to JavaScript’s non-standard but many browser implementations of the __proto__ attribute. But it should not be confused with the prototype property of the constructor func. The [[Prototype]] of the instance object created by the constructor points to the Prototype property of func. The Object.prototype property represents the prototype Object of Object.

Three,prototype 和 __proto__The difference between

Four or four ways to create objects and prototype chains

1. UseliteralObject created

var obj = {a: 1};
var arr = ['abc'.'hello'.233];
function fn() {
  return 2;
}
Copy the code

2. UseThe constructorObject created

In JavaScript, a constructor is just a normal function. When this function is used with the new operator, it can be called a constructor.

function Graph() {
  this.vertices = [];
  this.edges = [];
}

Graph.prototype = {
  addVertex: function(v){
    this.vertices.push(v); }};var g = new Graph();
// G is the generated object. Its properties are 'vertices' and 'edges'.
// when g is instantiated, g.[[Prototype]] points to graph.prototype.
Copy the code

Use 3.Object.createObject created

ECMAScript 5 introduced a new method: Object.create(). You can call this method to create a new object. The prototype of the new object is the first argument passed when the create method is called:

var a = {a: 1}; 
// a ---> Object.prototype ---> null

var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (inherited)

var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined because d does not inherit Object.prototype
Copy the code

Use 4.classObject created by keyword

ECMAScript6 introduces a new set of keywords to implement class. Developers using class-based languages will be familiar with these constructs, but they are different. JavaScript is still based on prototypes. These new keywords include class, constructor, static, extends, and super.

"use strict";

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width; }}class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength; }}var square = new Square(2);
Copy the code

What is a prototype chain?

Due to the__proto__Is a property that any object has, whereas in JavaScript everything is an object, so it forms one__proto__A chain of links, recursive access__proto__Must end and the value is null.

When the JavaScript engine finds a property of an object, it looks first for the presence of the property on the object itself. If not, it looks on the prototype chain, but not on its ownprototypePrototype is a function property.

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {} (the prototype object of the constructor function A)
console.log(a.__proto__.__proto__); //Object {}
console.log(a.__proto__.__proto__.__proto__); //null
Copy the code

See the following article for more information about how JavaScript can implement inheritance: JavaScript Inheritance Reference: Three diagrams to understand JavaScript prototype objects and prototype chains