day39 原型链及页面烟花效果 2021.10.13

本文详细介绍了JavaScript中的原型链机制,阐述了对象的__proto__属性如何连接形成原型链,以及实例对象属性访问的查找规则。同时,通过实例展示了如何利用JavaScript实现页面烟花效果,包括背景创建、烟花升空、爆炸等步骤,并提到了所需的关键函数,如运动、随机颜色和样式设置等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原型链:(Object是顶级的构造函数,在js中万物皆对象)

只要是对象就有一个属性__proto__,

原型对象也是对象,所以原型对象也有__proto__属性,这个属性指向的也是一个原型对象

实例对象的__proto__指向原型对象,原型对象的__proto__指向另外的一个原型对象,都是对象,都有__proto__属性,所以最后找到的原型都是Object.prototype

实例对象方法属性的访问规则:

实例对象访问属性的时候,先在实例对象本身查找,找到了就使用

如果找不到,则在__proto__指向的原型对象中查找,找到了就使用

如果找不到在去到原型对象的原型中找,找到了就是使用

找不到继续往原型的原型中找,最终找到Object.prototype原型,

还是没有属性或方法的话,则返回undefined

实现页面烟花效果

步骤分析:

1. 出现一个夜空背景 1000*600

2. 给夜空一个点击事件,点击夜空div在底部出现一个方块烟花

--方块烟花出现的位置,和点击的水平位置是一样的

3. 方块烟花从底部升空,升到点击的位置,然后消失(消失后出现多个圆点烟花)

4. 圆点烟花爆炸效果,每一个圆点烟花运动到随机的位置,然后消失

需准备的函数:

运动函数,随机颜色函数,获取范围随机数的函数,给元素设置样式的函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值