鱼C论坛

 找回密码
 立即注册
查看: 1485|回复: 3

[庖丁解牛] 010 ※ 填坑记之#缺点二 |【构造函数继承】

[复制链接]
发表于 2018-7-18 11:29:43 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-8-3 16:59 编辑

关于为什么要学习JavaScript设计模式,请看:传送门




上一讲最后由于快到下午上班时间,小不二没有对类式继承的缺点二进行深入分析~

这不趁着下午手头工作不忙,小不二开始填坑~
(所以要允许程序员工作之余,钻研自己喜欢的技术)

giphy.gif


回顾一下缺点二:
由于子类实现的继承是靠其原型prototype对父类的实例化实现,代码:
  1.    Son.prototype = new Father();
复制代码


因此在创建父类的时候,是无法向父类传递参数的,在实例化父类的时候也无法对父类构造函数内的属性进行初始化。



问题既然有了,解决方案肯定也有。

JS是极其灵活的,例如构造函数继承,肯能就是很棒的解决方案。

重写代码:
  1. //    声明父类
  2.     function Father(id) {
  3. //        引用类型共有属性
  4.         this.book = ['零基础入门学习Web开发', '鱼C', '小甲鱼'];
  5. //        值类型共有属性
  6.         this.id = id;
  7.     }

  8.     //    父类声明原型方法
  9.     Father.prototype.showBooks = function () {
  10.         console.log(this.book);
  11.     }

  12.     //    声明子类
  13.     function Son(id) {
  14.         //    继承父类
  15.         Father.call(this, id);
  16.     }

  17.     //    实例化一个Son的对象
  18.     var tst1 = new Son(1);

  19.     tst1.book.push('Python');
  20.     console.log(tst1.book);

  21. //    调用父元素的原型方法,
  22.     tst1.showBooks();//TypeError
复制代码

Snip20180718_41.png


嗯?

Son中通过Father.call(this,id)(构造函数继承的精华),将子类的变量在父类中执行了一遍。
(call可以更改函数的作用环境)

由于父类是给this绑定属性,因此子类自然也继承了父类的共有属性

问题来了,为什么showBooks()的方法,子类没有继承到呢?

那是因为构造函数继承方法本身的缺陷。

由于这种类型的继承并没有涉及原型prototype,所以父类的原型方法自然不会子类继承。

但是要想被继承,目标方法就要放在构造函数中,这样创建出来的每个实例都会单独拥有一份但不能共用

不二突然明白:
就像一位很有钱的父亲,遗产100W,儿子少还好说,多了的话,每个人都只能得到10W,每个人还不能合作。


可想而知,这样做很浪费资源,应该有在此基础上还有更好的方式...

预知后事如何,请看下回分解





课后作业


1、构造函数继承的关键是?

2、为什么showBooks()的方法子类没有继承到?



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢JS-设计模式,请订阅 专辑☞传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-12-8 09:26:36 | 显示全部楼层
1. ……
2. ……
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-22 18:33:08 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-10-21 21:20:11 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 01:23

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表