javascript每日必学之继承


Posted in Javascript onFebruary 23, 2016

朋友们大家好,我们今天这一讲就接着前面的封装继续讲解,今天就是在前面内容上面的升级,OOP思想中的继承,我们就先来解释一下继承到底是什么意思,我们在什么地方会用到继续。

继承就是,后代继续祖先的一系列属性,行为。后代仍然算是与祖先同族,下面我们再用一些具体描述,来理解一下什么是继承

javascript每日必学之继承

中国人,跟美国人都是 继承自 人类祖先,所以我们具有相同的属性行为,但是还有一定的差异,后面我们们将继续讲到的多态,所以通过上面的示例图,我们可以清晰的知道,人与人之前其实大同小异,所以我们再看看下面的示例代码,我们就知道,用代码来模拟继承,我们就又可以知道一种方法来写尽量少的代码达到做尽量多的事。

//遗传继承函数
function Extend(Children,Parent){
  //这里仅仅只是继承的原型链接定义的行为
  for(var p in Parent.prototype){
    Children[p] = Parent.prototype[p];
  }
}
//人类祖先
function Human(){
  this.weight = "50kg";
  this.height = "180cm";
  this.hair = "棕色";
}
//吃饭
Human.prototype.Eat = function(){
  console.log("吃饭");
}
//说话
Human.prototype.Say = function(){
  console.log("大家好我是地球人");
}
//行走
Human.prototype.Walk = function(){
  console.log("我是人类,天生就可以两条腿直立行走");
}
//繁衍
Human.prototype.Multiply = function(){
  console.log("跟老婆一起做羞羞的事,就是为了人类的繁荣");
}

//中国人
function Chinese(){
  //调用继承函数
  Extend(this,Human);
}
//美国人
function American(){
  //调用继承函数
  Extend(this,Human);
}

我们就这样写,就模拟了高级语言中的继承,下面我们看看运行后,有没有问题

javascript每日必学之继承

运行后,我们发现了问题,这样写,我们已经可以实现原型链接的继承了,而且也大大的节省了很多代码,我们在写Chinese和American函数的时候,是不是只写了少量代码,我们就把父类行为给继承过来了,而实例也能调用父类所拥有的行为函数,但是这样写,我们还没有完全实现继承,因为我们在调用hair属性的时候就根本没有起到作用,那么,我们再修改一下代码,就可以实现完全继承了

//遗传继承函数
function Extend(Children,Parent){
  //现在我们是从父类实例来继承,所以属性和方法都会被继承的
  for(var p in Parent){
    if(typeof Children[p] == "undefined"){
      Children[p] = Parent[p];
    }
  }
}
//人类祖先
function Human(){
  this.weight = "50kg";
  this.height = "180cm";
  this.hair = "棕色";
}
//吃饭
Human.prototype.Eat = function(){
  console.log("吃饭");
}
//说话
Human.prototype.Say = function(){
  console.log("大家好我是地球人");
}
//行走
Human.prototype.Walk = function(){
  console.log("我是人类,天生就可以两条腿直立行走");
}
//繁衍
Human.prototype.Multiply = function(){
  console.log("跟老婆一起做羞羞的事,就是为了人类的繁荣");
}
//中国人
function Chinese(){
  //调用继承函数
  Extend(this,new Human());
}
//美国人
function American(){
  //调用继承函数
  Extend(this,new Human());
}

我们还是要看一下运行的效果是不是跟我们想象中的一样?

javascript每日必学之继承

通过上在的代码我们不难看出,现在的继承函数实际上是从Human类的具体实例中复制的属性及行为,这样我们就更进一步模拟出了类的继承,在上面有一句,我还需要给大家解释一下

if(typeof Children[p] == "undefined"){
 ...... 
}

这里出现的typeof关键字其实是一个运算符,是查看某个变量是什么类型,如果是未定义的情况,运算出的结果就是 "undefined" ,所以我就是这样比较,如果子类没有定义过这样的属性或者行为函数,那么就从父类继承(注:这里的解释是为了后面的多态作铺垫)。

接下来我们再来看一下可不可以多重继承,前面我们已经提到Chinese与American两个类都是继承自Human类,下面我们再写一个类来继承自Chinese

//四川人
function SiChuanMan(){
  Extend(this,new Chinese());
}

javascript每日必学之继承

现在我们已经写出很健壮的继承代码,理解也非常的简单,只要在声明新类的时候,在构造函数里面调用一下继承函数,我们就可以实现属性及行为函数的完全继承,这样,我们就可以省下大量的代码,OOP思想的优势再一次地被体现了出来,如果我们要模拟中国每个省份的人,如果我每个省份都照着Human类的方式去写,从太阳出来写到第二天的太阳落坡都写不完。继承的写法多种多样,每个人都有自己的写法,这里,我就是以一种最简单的方式给大家讲解的,到后面大家能熟练使用时候,也可以以自己喜欢的方式去写,javascript本身就是一门很灵活的语言。

总结一下,我们今天在封装基础上进一步做了升级,这样我们就实现了对象的继承,书写的代码量被进一步被压缩,想想能提高工作的效率,更能提高代码的优雅度,是不是有一点的小激动呢,只要跟着我脚步走,我们就可以用最简单的方式去理解最复杂的东西,其实程序并不复杂,复杂的原因是大家没有得到正确的带领,本来很简单的一个东西,被不同的人理解及解释成不同的东西,这样学习起来就复杂了,更多的是没有连续的教程一步一步地带领大家向正确的方向迈进,所以很长时间都很难得到提升。

Javascript 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
JavaScript函数柯里化
Nov 07 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 #Javascript
理解javascript封装
Feb 23 #Javascript
学习Javascript面向对象编程之封装
Feb 23 #Javascript
javascript每日必学之封装
Feb 23 #Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 #Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 #Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 #Javascript
You might like
PHP 转义使用详解
2013/07/15 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
jQuery调用WebService的实现代码
2011/06/19 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
json数据的列循环示例
2013/09/06 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
pycharm安装图文教程
2017/05/02 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Python验证码截取识别代码实例
2020/05/16 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
公务员个人自我评价分享
2013/11/06 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技