Shulou(Shulou.com)06/02 Report--

This article focuses on "how to understand JS prototypes, prototype chains, objects". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand JS prototypes, prototype chains, and objects.

one。 Ordinary object and function object

In JavaScript, everything is an object! But the object is also different. It is divided into ordinary objects and function objects. Object and Function are the function objects of JS. The following examples are given:

Var o1 = {}; var O2 = new Object (); var o3 = new F1 (); function f1 () {}; var f2 = function () {}; var f3 = new Function ('str','console.log (str)'); console.log (typeof Object); / / function console.log (typeof Function); / / function console.log (typeof f1); / / function console.log (typeof f2); / / function console.log (typeof f3) / / function console.log (typeof o1); / / object console.log (typeof O2); / / object console.log (typeof o3); / / object

In the above example, o1o2o3 is a normal object and f1f2f3 is a function object.

How to distinguish, in fact, is very simple, all the objects created by new Function () are function objects, and the others are ordinary objects.

F1 force f2, in the final analysis, is created by new Function ().

Function Object is also created through New Function ().

two。 Constructor function

Let's review the knowledge of constructors first:

Function Person (name, age, job) {this.name = name; this.age = age; this.job = job; this.sayName = function () {alert (this.name)}} var person1 = new Person ('Zaxlct', 28,' Software Engineer'); var person2 = new Person ('Mick', 23,' Doctor')

In the above example, person1 and person2 are both instances of Person. Both instances have a constructor (constructor) property, which is a pointer to Person. That is:

Console.log (person1.constructor = = Person); / / true console.log (person2.constructor = = Person); / / true

We need to remember two concepts (constructor, instance):

Both person1 and person2 are examples of the constructor Person

A formula:

The constructor property (constructor) of the instance points to the constructor.

three。 Prototype object

In JavaScript, whenever an object (a function is also an object) is defined, the object contains some predefined properties. Each of these function objects has a prototype property that points to the prototype object of the function.

Function Person () {} Person.prototype.name = 'Zaxlct'; Person.prototype.age = 28; Person.prototype.job =' Software Engineer'; Person.prototype.sayName = function () {alert (this.name);} var person1 = new Person (); person1.sayName (); / / 'Zaxlct' var person2 = new Person (); person2.sayName (); / /' Zaxlct' console.log (person1.sayName = = person2.sayName); / / true

We have obtained the "law" of this article:

1. Each object has a property named _ _ proto__

two。 Each constructor (the constructor standard starts with uppercase, such as the constructor included in Function (), Object (), and so on, JS, and created by yourself) has a method called prototype (note: since it is a method, it is an object (the function in JS is also an object), so prototype also has the _ _ proto__ attribute)

3. The _ _ proto__ attribute of each object points to the prototype of its own constructor

4. Every object has a, _ _ proto__ property, but only a function object has a prototype property

four。 Prototype chain

Prototype objects are actually ordinary objects. Almost all objects can be prototype objects or instance objects, and they can also be both prototype objects and instance objects. Such an object is a node that makes up the prototype chain. So understanding the prototype, then the prototype chain is not a very complex concept.

We know that all functions have a method called toString. So where does this method come from?

First declare a function at will:

Function add () {}

Then we can use the following diagram to represent the prototype chain of this function.

Prototype chain

Where add is an instance of the Function object. The prototype object of Function is also an instance of Object prototype. This forms a prototype chain. In fact, the access to the prototype chain is very similar to the scope chain, and they are both an one-way search process. Therefore, the instance object can access all the properties and methods of the object on the prototype chain through the prototype chain. This is why foo will eventually be able to access the toString method on the Object prototype object.

Based on the characteristics of the prototype chain, we can easily implement inheritance.

After understanding the specific basic knowledge, we analyze the following figure:

First analyze from the example add ()

Instance add () is the instance of Function

So

The _ _ proto__ of add () points to the prototype of its constructor, Function.prototype

Var add = function () {} add.__proto__ = = Function.prototype//true

Pay special attention to the _ _ proto__ of the constructor Funciton pointing to its own Function.prototype

Function.__proto__ = Function.prototype//true

So the _ _ proto__ and prototype of the constructor Function both point to Function.prototype

Second

Because both Function and Object are built-in functions of js

And Object is also created by new Function.

Typeof Function "function" typeof Object "function"

So the _ _ proto__ of Object points to the prototype object of Function, namely Function.prototype

Object.__proto__ = Function.prototype true

So both prototype of Object and _ _ proto__ of Function.prototype point to Object.prototype

Third

Object.prototype is called the E end of the prototype chain because its _ _ proto__ is null

At this point, I believe you have a deeper understanding of "how to understand JS prototypes, prototype chains, objects". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.