A brief introduction to prototypes and prototype chains in javascript

This article brings you a brief introduction to prototypes and prototype chains in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

[[Prototype]]

Almost all objects will generate a [[Prototype]] chain when they are created, which is what people often call the prototype chain. When you try When referencing the properties of an object, the [[Get]] operation of the object will be triggered. For the default [[Get]] operation, the first step is to find whether the current object has the property you want to reference. If so, will use it. If it is not found, it will look for the prototype chain of this object. For example:

var one = {
  type: 'one'
}
var two = Object.create(one)

console.log(two.type) // one

In the above example, there is no type attribute in the two object, but due to Object.create (create a The new object, with the specified prototype object and attributes), connects the one object and the two object together. Therefore, during the search process of the prototype chain, even if the type attribute is not found in the two object, it will continue to search upward in the one object. Find the type attribute and print it. If you search all the way up the prototype chain and fail to find it, it will print undefined

prototype

To explain clearly what prototype is first A simple example:

function origin(type) {
  this.type = type
  console.log(this.type)
}
origin.prototype.name = 'origin'
var son1 = new origin('male')
var son2 = new origin('male')
console.log(son1.name) // origin
console.log(son2.name) // origin

The prototype attribute of function origin is actually equivalent to an object. This object points to the prototype objects of instances son1 and son2. Therefore, when the name attribute is called, it will be searched all the way up the prototype chain. , output the value of origin.prototype.name. Simply put, the prototype object of the function will point to the prototype of the instance. From another perspective, it can also be said that son1 and son2 inherit the prototype object of the function origin

constructor

Let’s look at a simple example first:

function origin() {

}
const son = new origin()
console.log(origin.prototype.constructor === origin) // true
console.log(son.constructor === origin) // true

origin.prototype has a public and non-enumerable attribute, constructor, by default, and this attribute refers to The function associated with the object, so origin.prototype.construct = origin, and the instance object son also has a construcor attribute, pointing to the function that created this object

_proto_

__proto__ is actually a function supported by most browsers To access an attribute of the internal prototype chain

    son.__proto__ === origin.prototype // true

When calling son.__proto__ actually calls son.__proto__(), the return value is the same as the result of Object.getPrototypeOf(origin)

The above is the detailed content of A brief introduction to prototypes and prototype chains in javascript. For more information, please follow other related articles on the PHP Chinese website!