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

This article mainly explains "JavaScript prototype case analysis". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "JavaScript prototype case analysis".

First look at three objects: first, the constructor (object):

Three ways of declaring functions in JS

1.function function name () {} declaration

two。 Anonymous function declares var foo = function () {}

3. The constructor declares var foo = new Function ("formal parameter 1", "formal parameter 2", "formal parameter 3"). Any function can be used

New Function to create

Function fn1 (name,age) {console.log (`My name is ${name}, I am ${age} this year);} fn1 ('Xiaohai', 19) / / the second way to define a function const fn2 = function (name,sex) {console.log (`My name is ${name}, gender ${sex} `) } fn2 ('Xiaohang', 'male') fn3 ('Xiaohang', 'male') / / Function is also a constructor / / the way above is the same as the way fn4 declares the function below const fn4 = new Function ('name','age','console.log (`my name is ${name}) Gender ${sex} `) / / of course, there are arrow functions that just change the way they are written, and the first one is similar to const fn3 = (name, sex) = > {console.log (`I call it ${name}, gender ${sex}`) }

When we use a function to create an object, the following Fun is the constructor. Fn () is an instance object

Function Fun () {} var fn = new Fun () console.log (fn.__proto__ = Fun.prototype); / / true

And know:

1. For any function, the fn fn1 fn2 fn2 above is an instance of Fun, and Fun is also an instance of the constructor Function, and Function is the built-in object of JS.

two。 When you see the code above, Fun.prototype refers to / points to the prototype (object, later referred to as the prototype).

Let's take a look at the second object:

Instance object function fn1 (name,age) {console.log (`My name is ${name}, I am ${age} this year);} const obj1 = {name: 'Xiaohang', age: '19'}

Know the following knowledge points:

1. As long as the object generated with the new keyword + constructor is the instance object

two。 Even if you do not use the new + keyword, but create an object such as a literal quantity, or declare that the function directly function the function name () {}, the instance object is generated, as in the code above.

3. Remember the important point: all instance objects have a _ _ proto__ attribute, and you can even get rid of the instance and change to a _ _ proto__ attribute for all objects.

4. You know that in the following code, fn is the instance object of the constructor Fun, and Fun is also the instance object of the constructor Function.

Function Fun () {} var fn = new Fun ()

The conclusion is as follows:

1. The _ _ proto__ attribute of the fn instance object points to the property prototype of the constructor Fun [prototype]

two。 The _ _ proto__ property of the instance object of Fun also points to the prototype [prototype] of the constructor's Function Note: here, prototype is both a property of Fun, and Fun.prototype is also the final place, destination, which is called prototype object.

/ / 1. The _ _ proto__ attribute of the instance object whose fn is the Fun () constructor points to the prototype property function Fun () {} var fn = new Fun () console.log of its own constructor (fn.__proto__ = Fun.prototype). / / true / / 2. The Fun function is an instance of the Function constructor, so the _ _ proto__ of Fun and the constructor Function point to the same place console.log (Fun.__proto__ = Function.prototype); / / true

The first console corresponds to the sequence number 1 of the following figure, and the second console corresponds to the sequence number 4 of the following figure.

3. Prototype object:

Know the knowledge points:

1. All functions have a prototype object. For example, the function Function, which has a prototype object Function.prototype. It is also said that Function.prototype is the concomitant object of the function Function, which means that as soon as the function is created, there is an object called Function.prototype that accompanies it. On Function itself, there is another property called prototype, which points to its companion object.

two。 The prototype object of the function has a property called constructor, which refers to the constructor. As if, the constructor Function points to the prototype object Function.prototype through the property prototype, while the prototype object Function.prototype points back through its own constructor property.

For example, the following can be verified by itself.

Function fn () {} console.log (fn.prototype); console.log (fn.prototype.constructor = fn); / / true

3. The prototype object of the function also has a property called the _ _ proto__ property. The browser prints it out and now looks like this.

[[Prototype]]: Object

The _ _ proto__ in the prototype points to the parent class's prototype object prototype, such as the following code

The following means the prototype of the function Person, which is a prototype object, and its _ _ proto__ attribute points to the prototype,Function of the Object parent class similarly. Why is that?

Because since both Person.prototype and Function.prototype are called prototype objects and are both objects, they are essentially created through new Object and are instances of the constructor Object, so they are also instance objects with a _ _ proto__ attribute pointing to the Object parent class.

Function Person () {} console.log (Person.prototype.__proto__ = Object.prototype); / / true console.log (Function.prototype.__proto__ = Object.prototype); / / true

The serial number 3 corresponding to the following figure

Remember:

Object is the root of each object

Look at three more attributes: first, prototype:

1. Remember that this property is unique to the function

The following code, fn has a prototype,Fun constructor that is not written under prototype,Function, but there is also a prototype.

Look at the code.

Var fn55 = new Function ('age',' sex', 'console.log (`this year ${age} gender ${sex} `)') console.log (fn55.prototype); console.log (fn55.__proto__ = Function.prototype); / / true

Note:

1. The fn55 above is a function created through new Function

two。 Function has prototype

3. Fn55 is also an instance object created through new + Function, so _ _ proto__, also points to the prototype of the Function constructor.

Look at the following code

Function Fun (name, age) {this.name = name; this.age = age} var fnn = new Fun ('voyage', '123') console.log (fnn.prototype); / / undefined

Note the code above:

1. Above, an instance object is created through new + Fun.

two。 Here, an object fnn is created through the constructor Fun, and fnn is not a function, so there is no prototype prototype object.

2. _ _ proto__

1. Remember that everything is an object, so everything has _ _ proto__

two。 The instance object created by the constructor, with _ _ proto__, pointing to the prototype of the constructor

Function Person (name,age) {this.name = name this.age= age} Person.prototype.sayHello = function () {console.log (this.name) } const obj1 = {name: 'Xiao Hang', age: '19'} const obj2 = new Object () obj2.name =' Jiao Maiqi 'obj2.age =' 19' console.log (obj1); console.log (obj2); console.log (Person.prototype) Const person1 = new Person ('Xiao Hong', 19) const person2 = new Person ('Xiao Ming', 20) console.log (person1.__proto__); console.log (person2.__proto__); console.log (Person.prototype = = person1.__proto__); / / true console.log (Person.prototype = = person2.__proto__) / / true console.log (Object.prototype = obj1.__proto__); / / true console.log (Object.prototype = obj2.__proto__); / / true

3. The function instance has _ _ proto__, and points to the constructor Function

/ / 2. Several ways to create a function / / the first way to define a function function fn1 (name,age) {console.log (`My name is ${name}, I am ${age} years old `) } fn1 (Xiaohang, 19) / / the second way to define a function const fn2 = function (name,sex) {console.log (`my name is ${name}, gender ${sex} `) } fn2 ('Xiaohang', 'male') / / or arrow function const fn3 = (name, sex) = > {console.log (`my name is ${name}, gender ${sex} `) } fn3 ('Xiaohang', 'male') / / the _ _ proto__ of these three functions is equal to the prototype / / Function of the constructor Function is also a constructor / / the essence of the above three ways is consistent with the way of the fn4 declaration function below / / the third way of defining the function const fn4 = new Function ('name','age' 'console.log (' my name is ${name}, gender ${sex} `)') / / console.log (Function.prototype = fn1.__proto__) / / true / / console.log (Function.prototype = fn2.__proto__); / / true / / console.log (Function.prototype = fn3.__proto__); / / true / / console.log (Function.prototype = fn4.__proto__); / / true

4. Both function Object and function Function are instances of the constructor Function, so there is also _ _ proto__

Console.log (Object.__proto__ = Function.prototype); / / true console.log (Function.__proto__ = Function.prototype); / / true

5. Prototype objects are also objects, so there is also _ _ proto__

Function Person () {} console.log (Person.prototype.__proto__ = Object.prototype); / / true console.log (Function.prototype.__proto__ = Object.prototype); / / true III, constructor attribute

The constructor attribute is only available on each prototype object

Function fn () {} console.log (fn.prototype); console.log (fn.prototype.constructor = fn); / / true console.log (Function.prototype.constructor = Function); / / true console.log (Object.prototype.constructor = Object)

Something more complicated.

Console.log (obj.__proto__.constructor.__proto__.__proto__.__proto__=== null); / / null

1. Obj.__proto__ points to Object.prototype

2. Object.prototype.constructor refers to Object itself.

Note: Object is also a constructor and an instance object of Function, so the following Object also has _ _ proto__

3. Object.__proto__ points to Function.prototype

4. What does Function.prototype.__proto__ point to? This is [prototype object is also object] what does the _ _ proto__ of the prototype object point to? It points to the prototype of the parent class, that is, Object.prototype

5. What Object.prototype points to, that is, the end point of the prototype chain null can go down and verify itself.

Prototype chain

The prototype chain is the end point of _ _ proto__

Thank you for your reading, the above is the content of "JavaScript prototype instance Analysis". After the study of this article, I believe you have a deeper understanding of the problem of JavaScript prototype instance analysis, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.