Day39 prototype chain and page fireworks effect 2021.10.13

Prototype chain ：（Object Is a top-level constructor , stay js Everything is an object ）

As long as an object has a property __proto__,

Prototype objects are also objects , So the prototype object also has __proto__ attribute , This attribute also points to a prototype object

Of instance objects __proto__ Point to the prototype object , Of a prototype object __proto__ Point to another prototype object , Are all objects , There are __proto__ attribute , So all the prototypes we finally found were Object.prototype

Access rules for instance object method properties ：

When an instance object accesses properties , First, find the instance object itself , Use it when you find it

If you can't find it , It's in __proto__ Point to the prototype object , Use it when you find it

If not, find it in the prototype that goes to the prototype object , Find it and use it

Can't find. Continue to find in the prototype of the prototype , Finally find Object.prototype Prototype ,

If there are no properties or methods , Then return to undefined

Realize the fireworks effect on the page ：

Step analysis ：

1. A night sky background appears 1000*600

2. Give the night sky a click event , Click on the night sky div A square fireworks appears at the bottom

-- Where the square fireworks appear , It is the same as the horizontal position of the click

3. Square fireworks lifted off from the bottom , Rise to the click position , And then disappear （ After disappearing, multiple dot fireworks appear ）

4. Dot fireworks explosion effect , Each dot moves to a random position , And then disappear

Functions to be prepared ：

Motion function , Random color function , A function that gets a range of random numbers , Functions that style elements