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

This article mainly introduces "how to use Javascript's prototype chain". In daily operation, I believe many people have doubts about how to use Javascript's prototype chain. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to use Javascript's prototype chain"! Next, please follow the editor to study!

We know that everything is an Object in Js, but there is no class in Js; Js is based on the object-oriented programming paradigm implemented by prototype-based, but not all objects have the attribute prototype:

Var a = {}

Console.log (a.prototype); / / = > undefined

Var b = function () {}

Console.log (b.prototype); / / = > {}

Var c = 'Hello'

Console.log (c.prototype); / / = > undefined

Prototype is an attribute that comes with each function definition, but function is also an object in Js, so let's take a look at the differences between the following concepts:

1. Function, Function, Object and {}

Function is a keyword of Js that defines variables of function types and has two grammatical forms:

Function F1 () {

Console.log ('This is function F1')

}

Typeof (F1); / / = > 'function'

Var f2 = function () {

Console.log ('This is function f2percent')

}

Typeof (f2); / / = > 'function'

If you define a function in a more object-oriented way, you can use Function:

Var f3 = new Function ("console.log ('This is function f3percent');")

F3 (); / / = > 'This is function f3'

Typeof (f3); / / = > 'function'

Typeof (Function); / / = > 'function'

In fact, Function is a class used to construct function type variables, or the constructor of function type instances; similar Object or String, Number and so on are the constructors of Js built-in type instances. A special one is Object, which is used to generate object types, which is abbreviated in the form of {}:

Var o1 = new Object ()

Typeof (o1); / / = > 'object'

Var O2 = {}

Typeof (O2); / / = > 'object'

Typeof (Object); / / = > 'function'

2. Prototype VS _ _ proto__

After you understand the above concepts, let's take a look at prototype:

Each function has two properties: length and prototype

Prototype and length are two properties that come with each function type, while other non-function types do not (as shown in the first example). This is easier to ignore or misunderstand because all types of constructors themselves are functions, so they come with the prototype attribute:

/ / Node

Console.log (Object.prototype); / / = > {}

Console.log (Function.prototype); / / = > [Function: Empty]

Console.log (String.prototype); / / = > [String:']

With the exception of prototype, all objects in Js (except undefined, null, and other special cases) have a built-in [[Prototype]] attribute that points to its "parent class" prototype. This built-in attribute is not explicitly obtained in the ECMA standard, but many Js implementations (such as Node, most browsers, etc.) provide a _ _ proto__ attribute to refer to this [[Prototype]]. We use the following example to illustrate how the _ _ proto__ in the instance points to the prototype of the constructor:

Var Person = function () {}

Person.prototype.type = 'Person'

Person.prototype.maxAge = 100

Var p = new Person ()

Console.log (p.maxAge)

P.name = 'rainy'

Person.prototype.constructor = Person; / / > true

P. crude protozoa _ = Person.prototype; / / = > true

Console.log (p.prototype); / / = > undefined

The above code example can be explained by the following figure:

Person is a variable of functional type, so it comes with the prototype attribute, and the constructor in the prototype attribute points to the Person itself; the instance p1 of the Person class generated by the new keyword points to the prototype of Person through the _ _ proto__ attribute. The _ _ proto__ here only illustrates the relationship between the instance p1 and the parent class when it is implemented internally (pointing to the prototype of the parent class). In the actual operation, the instance can be passed directly. Get the attributes in the parent class prototype, thus realizing the function of inheritance.

3. Prototype chain

With a clear understanding of the concept and relationship between prototype and _ _ proto__, we will have a deeper understanding of the phrase "everything in Js is an object". And then we think, since _ _ proto__ is a built-in property for (almost) all objects and points to the prototype of the parent class, does that mean we can "go up against the current" all the way to the source? Let's look at the following example:

/ / Node

Var Obj = function () {}

Var o = new Obj ()

O.crude protoplasts _ = Obj.prototype; / / = > true

O.__proto__.constructor = Obj; / / > true

Obj.__proto__ = Function.prototype; / / > true

Obj.__proto__.constructor = Function; / / > true

Function.__proto__ = Function.prototype; / / > true

Object.__proto__ = Object.prototype; / / > false

Object.__proto__ = Function.prototype; / / > true

Function.__proto__.constructor = Function;//= > true

Function.__proto__.__proto__; / / = > {}

Function.__proto__.__proto__ = = o.protozoa. Protozoa; / / > true

O.egg protozoa. Egg protozoa. Egg protozoa _ = null; / / > true

As you can see from the example and illustration above, the prototype object also has a _ _ proto__ property that goes up to null.

The function of the new keyword is to complete the concatenation of the relationship between the instance and the parent prototype shown in the figure above, and to create a new object; the function of the instanceof keyword can also be seen from the above figure, which is actually to judge _ _ proto__ (and _ _ proto__.__proto__...) Whether it points to the prototype of the parent class:

Var Obj = function () {}

Var o = new Obj ()

O instanceof Obj; / / = > true

O instanceof Object; / / = > true

O instanceof Function; / / = > false

O.crude protoplasts _ = Obj.prototype; / / = > true

O.egg protozoa. Egg protozoa _ = Object.prototype; / / = > true

O.egg protozoa. Egg protozoa _ = Function; / / = > false

At this point, the study on "how to use Javascript's prototype chain" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.