老师,这两个面向对象案例不是特别懂,

老师,这两个面向对象案例不是特别懂,

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2022-07-08 11:43:34

同学你好,面向对象的编程思路、思想与之前的代码写法、思想有很大差异,需要一点点体会,现在不理解是正常的。它的思想是把所有功能都封装起来,只要实例化一次,就能给某个元素赋予某些功能,便于复用功能。简单给同学说下这个案例的思路,同学尝试体会一下:

我们想生成100个红绿灯,每个红绿灯都能通过点击,切换灯的颜色,那么就可以通过遍历实例化100次trafficLight来实现:

https://img1.sycdn.imooc.com//climg/62c7a58b09ef408905560209.jpg

每遍历一次TrafficLight,就会在页面中生成一个红绿灯,并有点击切换功能。TrafficLight中会具体实现每个灯的功能。

实例化TrafficLight(new TrafficLight())时,代码就会从下图红框开始执行:


https://img1.sycdn.imooc.com//climg/62c7a5c609149d3a07630800.jpg

this.color就相当于声明变量color,只不过写法特殊,通过this.xxx的形式写。this.init()就是调用init方法,this.bindEvent()则是调用bindEvent方法。

调用init方法时,就会对应执行下图红框处位置:

https://img1.sycdn.imooc.com//climg/62c7a624096e4b9e08010533.jpg

即创建图片,并给图片设置src属性;这样页面上,就会显示出图片了。

调用bindEvent方法时,则会执行如下代码:

https://img1.sycdn.imooc.com//climg/62c7a65709c58c0007800603.jpg

此时就会给img图片绑定点击事件:

https://img1.sycdn.imooc.com//climg/62c7a66609e1833607400276.jpg

点击图片的时候,则会执行changeColor方法,从而实现切换src(切换颜色):

https://img1.sycdn.imooc.com//climg/62c7a69c09e2cf2d09740630.jpg

这样就逐步实现了功能。

当前阶段,同学只需要把代码看懂,能把代码的运行过程、逻辑屡清楚就可以,不要求同学独立写出来。独立写出这样的代码,需要经验积累,现在不要求。

祝学习愉快!

  • 提问者 卷毛奋斗中 #1

    谢谢老师,那小球那个案例呢?

    2022-07-08 13:02:24
  • 好帮手慕久久 回复 提问者 卷毛奋斗中 #2

    和这个类似,重点知道代码是怎么运行的、屡清楚运行逻辑就可以了。那个案例比红绿灯难,如果实在看不懂,可以暂时放放。往后学学,再回头看。先了解当前红绿灯案例就可以。

    2022-07-08 13:26:31
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师