A detailed description of the prototype and inheritance in javascript-turned from the Genhai mirror greatly

This article will introduce the object-oriented, inheritance, prototype and other related knowledge, the knowledge points involved are as Follows:

• Object-oriented and inheritance
• Ceoc
• Oloo
• Bloated objects
• Prototype and prototype chain
• How to modify a prototype

Object-oriented and inheritance

I recently learned about python, and also wrote a blog post , "re-programming fun-my python notes ", which deepened my understanding of object-oriented.

We will abstract the program we write, and different languages provide different abstract tools, such as arrays in various languages, sets (array of key values, hash tables, dictionaries, Etc.) provide the abstraction of the data, and VB inside the subroutine, C language inside the function, provides the ability to abstract code Snippets.

Sometimes we want to encapsulate the data with the manipulation of the data, which is called an object, and is a higher-level abstraction, an abstract tool-objects that can model the real WORLD.

Things in the real world have some connections, such as we can abstract out the cat, then the male cat, the female cat, obviously the male cat should have the characteristics of the cat, which is the inheritance, subdivision of things should have high latitude things characteristics.

To realize the object and inherit this set of thinking, there are two implementation methods, namely CEOC and Oloo.

Ceoc

CEOC (class Extend Other Class) is a set of methods based on class and instance, which is more practical and widely used, and most of the Meteor object-oriented languages are in use, such as Java,python.

A class is an abstract description of an object, which is an instance of a class, also known as a generalization, generalization, and abstraction of a class. The most appropriate analogy is to build a house, class is equivalent to the house of drawings, drawings are the properties and functions of the house description, according to the drawings can cover a lot of similar houses; another analogy is the abrasive and parts, abrasives equivalent to the class, parts equivalent to the object, through the abrasives we can create a lot of parts.

In fact, rather than object-oriented programming, in this mechanism to solve the above mentioned inheritance logic, is implemented on the class, subclasses can inherit the parent class.

In the mechanism of the class is more like in the factory through the mold making parts mechanism simulation, rather than the animal world This reproduction inheritance mechanism simulation, The Oloo described below is a better simulation of the WORLD.

Oloo

Oloo (object Link Other Object) is a set of object-based and prototype implementation, the only way to achieve a wide range of languages is js, familiar with the class mechanism of the classmate, the first contact with this, may feel not very good understanding, and many front-end students understand is not very clear, Before writing a prototype article, we recommend that you read theJavaScript prototype path .

In fact, the class-oriented mechanism is somewhat superfluous, because the final use of the object, rather than the class, then we directly let the object can be integrated object is not the line, in this mechanism can be done by some action between objects and objects can establish an inheritance relationship, when the inherited object (sub-object) You can go to an inherited object (parent Object) to find it without certain attributes.

In oloo, the parent object can also be a prototype of the child object, which is similar to our human reproduction, each person is an object, is born by the parents, rather than the template built out, each person has a father, children and fathers have a special relationship between the father and Son.

Bloated objects

To say that JS in the object mechanism, JS objects appear to be somewhat bloated, JS object to undertake two functions, one is object-oriented mechanism, the other is the collection of data Abstraction-other languages called Key-value array, hash table or Dictionary.

In fact, in other languages, the object is not coupled with the function of the collection, such as Python has a dictionary, PHP has a key value array, in es2015 to introduce a new map type, to decouple this function, but I believe many people are accustomed to use o (╯-╰) o

The object mentioned in this article does not include this part of the function, especially in the object-oriented mechanism of js.

Prototype and prototype chain

JS language is a prototype-based language, in JS almost everything is an object, each object has a prototype, and the prototype is an object, also has its own prototype, thus forming a prototype chain.

When attempting to access the properties of an object, it searches not only on the object, but also on the prototype of the object, as well as the prototype of the object, which is searched upward until a matching property of the name is found or at the end of the prototype Chain.

JS refers to the prototype may have different meanings, we have to distinguish clearly, we need to clear which prototype is:

1. JS is the prototype in the Prototype-based language
2. Each object has a prototype in its own prototype.
3. Each function has a prototype in the prototype attribute

The 1th prototype is a concept, a mechanism, not a specific thing.

The 2nd Prototype is that each object has its own prototype object (the parent object), and we use [[Prototype]] to refer to the prototype Object.

3rd and 2nd are easy to confuse, each function has a prototype attribute, and we use prototype to refer to it.

ES5 brings up a method--object.getprototypeof to view the Object's prototype, which returns the prototype of the specified object (that is, The value of the Object's internal property [[Prototype]].

Console.log (object.getprototypeof ({}))

>>> Object.prototype

Es6 brings another way to view the prototype of an object--object.prototype.__proto__, an object's Proto property and its own internal property [[prototype]] point to the same value (usually called this value as a prototype), The value of the prototype can be either an object value or null (for example, object.prototype. The value of Proto is null).

({}). __proto__

>>> Object.prototype

Here's An example of the prototype and prototype chain, and the behavior that happens when you access object Properties:

A---> b for B is a prototype

How to modify a prototype

There are many ways to create and modify prototypes in js, listed BELOW.

In the following example, we point the object A's [[Prototype]] to B.

A---> b

Create an object using normal syntax

This is the most easily overlooked method, in JS you are not around the prototype, inadvertently created a prototype

var o = {a:1};

O---> object.prototype---> NULL

var a = [];

A---> array.prototype---> object.prototype---> NULL

function f () {}

F---> function.prototype---> object.prototype---> NULL

This method does not allow A's [[Prototype]] to point to B.

To create an object using the constructor

A constructor is a normal function, but this time it is not called directly, but is preceded by the new keyword in front of the Function.

Each function has a prototype property, and the prototype of the new object through the new keyword points to the prototype property of the constructor, so we can modify the Constructor's prototype property to achieve the object Prototype.

In order for B to inherit a, you need to have a constructor

var B = {};

function A () {};

A.prototype = b;

var a = new A ();

object.getprototypeof (a) = = = b;

True

a---> A.prototype = = = B

Create an object using Object.create

ES5 brings the Object.create interface, allowing us to set up an object prototype directly

var B = {};

var a = Object.create (b);

object.getprototypeof (a) = = = b;

True

A---> b

Object.setprototypeof

ES6 brings another interface that can bypass the process of creating objects and manipulate prototypes directly

var a = {};

var B = {};

Object.setprototypeof (a, b);

object.getprototypeof (a) = = = b;

True

A---> b

Proto

ES6 also brings a property that can be manipulated directly by this Property.

var a = {};

var B = {};

a.__proto__ = b;

object.getprototypeof (a) = = = b;

True

A---> b

Note that this property is in the appendix to the ES6 specification, which means that not all environments will have this Attribute.

Using the class keyword

ES6 introduced the class syntax sugar, through the extends keyword we can also implement inheritance, but not directly manipulate the Object's prototype, but to use the "class", is actually the constructor and function of the prototype Property.

Class B {}

Class A extends B {}

var a = new A ();

object.getprototypeof (a) = = = a.prototype;

True

Example of a---> A.prototype = = = B

Summarize

A detailed description of the prototype and inheritance in javascript-turned from the Genhai mirror greatly