Function prototype Properties-javascript in layman's (c)

The first two summarizes the basic data types in JavaScript (value types < reference types, reference types < complex values >) and their in-memory storage, a simple understanding of memory space, and a second summary of the use of this in layman's, We know that the use of this depends on how the function is called in four ways.

This time we are going to make a plain understanding of JavaScript and the prototype chain.

JavaScript in layman's series

1) Complex value vs original value && memory space-JavaScript simple (i)

2) This usage –javascript in layman's (ii)

3) function prototype properties-javascript in layman's (c)

Cond...... The topic of prototypes will become serious .

In fact, the prototype is just an empty object property called "Prototype", which is created in the background by JavaScript (and of course we know how it works and can do it manually);

When you create a function, the function will have a prototype attribute (whether you don't use it as a constructor).

Βヾ (,,? ∇?,, River ← So let's take a concrete look at it!!!

Prototype chain Overview

The prototype property is an object that JavaScript creates for each function instance.

Specifically, "It will create a < object instance > link back to the < constructor >" that created them with the new keyword. In this way, we can share or inherit common methods and properties. When we look at attributes, we unconsciously start our prototype chain trip.

Let's start with a simple example of our prototype chain search: We use the array constructor to create an array and then call the Join method

I think the above example is very simple for JS starter, but let's take a closer look, you find that the join method is not defined as a property of the MyArray object instance , but the array we created can access the Join () method, It's as if we could have visited.

Where is the join () defined?

In fact, we often use the join (), slice (), push () ... Such built-in methods are defined for the properties of the prototype property of the array () constructor . Because the join () is not found in the myarray array we created, JavaScript looks for the join () method in the prototype chain ;

In fact, it's easy to think of efficiency and reuse , and by adding the attribute to the prototype, all of our arrays have the same join () function, without having to create a new instance of the function for each array instance.

Prototypes are standard on all function () instances

We know that there are two ways to create a function

1. Call the function constructor method:

2, using the literal method:

In fact, even if you do not directly use the function constructor, but instead use literal notation, all functions are created by the function () constructor.

We created a function using the literal method, and found that its prototype and function () constructors all point to object (), which confirms what we said.

The default prototype property is Object ()

As I mentioned above, in fact, the prototype is just an empty object property called ' Prototype ', which has been created in the background of JavaScript and is used through the function () constructor.

We can finish this work manually in order to understand its mechanism.

The code above is very simple and actually very useful, and it essentially duplicates the work that JavaScript has done in the later.

Link the instance created by the constructor to the prototype property of the constructor

Link The instance created by the constructor to the prototype property of the constructor, let's start this mysterious _proto_ link

Our prototype above is just an object, but it is special, because the prototype chain links each instance to its constructor's prototype property.

instance of object created and the prototype property of the constructor that creates the object

Of course, in addition to using the _proto_ link, we can also use the constructor properties:

In fact,_proto_ = = = Constructor.prototype

This is not difficult to understand, the following can achieve the same effect:

In the above example, I write that the direct use of the chain is also possible, the following will describe its query order. Although I believe that the entry is used by the chain query , but we have to know the mechanism behind it.

There's actually an invisible hand that's helping our code complete the task

the last of the prototype chain is Object.prototype.

So let's look at its prototype chain query.

Because the prototype property is an object, the last station of the prototype chain or query is Object.prototype.

I think the above code, for us is not very laborious, but to take this simple example, the last simple undefined results, but experienced a not for us to see the prototype chain query;

We created a myarray empty array, and then we tried to access the undefined myarray attribute, and did not return the undefined directly, but went through a prototype chain query.

① Find the Foo attribute in the MyArray object ;

If not found

② finds the attribute in Array.prototype ;

But there is no definition of where it is,

the last place ③ found was object.prototype.

None of the three objects is defined, and finally gives us a undefined of feedback. so please take good care of your undefined, because it appears twists, it is really not easy ah. Haha

replacing the prototype property with a new object removes the default constructor property

We can replace the default value of the prototype property with a new value, but it is important to note that doing so removes the default constructor attribute found in the "prefabricated" prototype object , unless we specify one manually;

　　

So when you want to replace the default prototype property of JavaScript settings (similar to some JS oop patterns), you should reconnect the constructor property that references the constructor .

Let's simply change the code above so that the constructor property can again provide a reference to the appropriate constructor

Instances that inherit prototype properties always get the latest values

In fact, prototype is an instance of a dynamically inheriting prototype property that always gets the latest value ,

This is simple, whether you overwrite it with a prototype object or your own object, and the instance that inherits the prototype property always gets the new value.

But we need to pay attention to the following point:

丨

丨

丨

Replacing the prototype property with a new object does not update the previous instance

When you want to completely replace the prototype property with a new object and feel that all instances will be updated, you are about to go to a wrong path, and you may get unexpected results.

When an instance is created, the instance is bound to the "just completed" prototype when it is instantiated, providing a new object as the prototype property does not update the connection between the created instance and the prototype

The point here is that once you start creating an instance, you don't apply a new object that replaces the object's prototype, which causes the instance to have a link to a different prototype

Custom constructors Implement prototype inheritance

When we are customizing constructors, we can also implement prototype inheritance:

The example we wrote above is a good use of the prototype chain to create a constructor function. constructors can inherit the legs and arms properties if we do not provide parameters . If an argument is passed in, the inherited property is obscured

Create an inheritance chain

Our custom constructors implement prototype inheritance, and the purpose of design prototype inheritance is to find an inheritance chain that mimics the inheritance pattern in the traditional object-oriented programming language. Inheritance is simply an object that can access the properties of another object.

Next, let's create a simple inheritance chain:

In fact, the code I'm doing is just using an existing native object.

The default object () value for the person () and the prototype property is not different, and this is exactly what happens when a prototype property contains the default empty object () value. Finds the prototype (that is, object.prototype) of the constructor used to create the object to find the inherited property.

:: We Why pay attention to the prototype propertyIt?

(I hope you can give <javascript beginners > A reason to know prototype)

You may not like the stereotype inheritance, but more of the object inheritance that prefers another pattern. But:

① native constructors (such as Ocject (), Array (), function () ... ) uses the prototype property to allow your instance to inherit properties and methods.

② If you want to understand JavaScript better, we need to understand how JavaScript itself uses the prototype object

③ When you customize a constructor, you can use inheritance like JavaScript native objects, and you need to know how he works.

④ by using prototype inheritance, we can create valid object instances. Because not all array objects require their own join () method < I think that requires us to do some work >, but all instances can take advantage of the same join () method, which improves efficiency and reusability .

Write it in the back.

Here we have introduced the function prototype properties of the easy-to-learn series has been described, this blog post hope to help beginners--remember the prototype chain hierarchy work principle, for confusing prototype inheritance attributes have a classification, to solve the beginner's heart of the prototype puzzle

Like, pay attention to it, the attention and support of the predecessors is to give me the greatest motivation

Function prototype Properties-javascript in layman's (c)