While most programming languages are class-based, JS is a prototype-based inheritance language.

1. Why are there prototypes and prototype chains?

First, let’s take a look at why there are prototypes and prototype chains, and what they can do for you. In object-oriented programming, there are many ways to create objects, the simplest of which is the factory mode and constructor mode. However, objects created in these ways cannot share attributes and methods, and each object will repeatedly create the same attributes and methods, resulting in a waste of memory resources. Each variable has its own toString method. The purpose of stereotypes is to help us store common properties and methods.

2. Understand the prototype object

Each function we create has a Prototype property, which is a pointer to an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type. This object is the prototype object for that function. The prototype object automatically gets a constructor property, which in turn points to the function itself.

3. Understand the prototype chain

Each constructor has a prototype object; the prototype object constructor contains a pointer to the constructor; and each instance contains an internal pointer to the prototype object __proto__.

Based on the above relationship, we make the stereotype of one constructor equal to an instance of another type, in which case the stereotype object contains a pointer to the other stereotype, which in turn contains a pointer to the other constructor. Add another prototype and an instance of another type, and the above relationship still holds, and so on, forming a chain of instance and prototype. This is the basic concept of a prototype chain.

An example:

function Person(name, age) {
  this.name = name
  this.age = age
}

Person.prototype.alertName = function() {
  alert(this.name)
}

var p = new Person('Joe'.20)
p.alertAge = function() {
  alert(this.age)
}
p.alertAge() // Own attributes
p.alertName() // p._proto_ (person.prototype
p.toString() // p._proto_._proto_ (object.prototype

// The properties of the loop object itself
for (var item in p) {
  // Advanced browsers have masked attributes from prototypes, but it is recommended to add this filter for compatibility and robustness
  if (p.hasOwnProperty(item)) {
    console.log(item)
  }
}
Copy the code

4, summarize

  • Prototype is the function’s prototype object, which in turn contains a constructor property pointing to the function (prototype is the function’s property, and we’re generally talking about constructors);
  • The object’s __proto__ refers to its constructor’s prototype (__proto__ is an instance property);
  • The prototype chain of all constructors will eventually point to the prototype of the Object constructor, that is, the prototype of the Object constructor is understood to be the lowest of all prototype chains, that isObject.prototype.__proto__ === null ；
  • To find the prototype of a function, look at who it inherits from.
  • To find an object’s __proto__, look at its instance and find its constructor;

5, problem sets

Remember a few sentences from the previous section, let’s look at the following topic, it is relatively easy. The following equation is always true:

Group 1: (Prototypical relationships of several native objects)

Object.__proto__ === Function.prototype // Treat Object as an instance of Function
Object.prototype.__proto__ === null // Treat Object as a constructor

Function.__proto__ === Function.prototype // treat Function as an instance of Function
Function.prototype.__proto__ === Object.prototype // Think of Function as a constructor whose prototype is an instance of Object

Array.__proto__ === Function.prototype // Treat Array as an instance of Function
Array.prototype.__proto__ === Object.prototype // Think of Array as a constructor whose prototype is an instance of Object
Boolean, String, Number......
Copy the code

The second group:

var obj = {}
obj.__proto__ === Object.prototype // obj is an instance of Object
obj.prototype === undefined // obj is not a function, so it has no prototype object attributes

var arr = []
arr.__proto__ === Array.prototype // arr is an instance of Array

var fn = function() {}
fn.__proto__ === Function.prototype // treat fn as an instance of Function
fn.prototype.__proto__ === Object.prototype // Think of fn as a function whose prototype is an instance of Object

function Test() {}
var test = new Test()
Test.prototype.__proto__ === Object.prototype // Think of Test as a constructor whose prototype is an instance of Object
test.__proto__ === Test.prototype // test is an instance of test
Copy the code

reference

  • Javascript Advanced Programming (version 3)
  • Three sentences explaining the prototype and the prototype chain