Javascript玩转继承(一)


Posted in Javascript onMay 08, 2014

Javascript究竟是一门面向对象的语言,还是一门支持对象的语言,我想每个人都有着自己的看法。那些Javascript忠实的Fans一定讲Javascript是一门面向对象的语言,像《Javascript王者归来》一书中对Javascript的说法是基于原型的面向对象。我谈谈我个人的看法。面向对象的三个特征,继承,多态,封装,Javascript虽然实现起来不像Java,C#等面向对象的语言来得快,但是毕竟也有着一定的支持。因此说Javascript是面向对象的语言是有着一定道理的,但是从继承这个部分来谈,一系列的继承法,但是每个继承法都无法实现真正面向对象语言的威力,因此,说他面向对象有着一定的牵强。综上,我对Javascript的理解,更愿意把它叫做一种简化的面向对象,或者说"伪"面向对象(这个伪字绝无贬义)。

今天就从面向对象这个第一个特征:继承来谈。
什么是继承?这个我不想废话,有一只动物,有一个人,有一个女孩,这个就是一个最简单,也是典型的继承链。
在C#等面向对象中,很容易。

class Animal 
{    } 
class People:Animal 
{    } 
class Girl:People 
{    } 
 

那么在Javascript中,没有类,没有继承的提供实现,我们该怎么做呢?
对象伪装(构造继承法)
什么是对象伪装呢?我们可能叫做构造继承更容易理解一些。顾名思义,就是用构造函数来玩继承。其实就是说把父类的构造函数当成是一个普通的方法,放到子类的构造函数中去执行,这样的话,当构造对象的时候,子类的对象当然就可以构造父类的方法啦!

还是用上面的那个例子,代码如下:

function Animal() 
{ 
        this.Run=function(){alert("I can run");}; 
} 
function People(name) 
{ 
//在这里就是传入了父类的构造方法,然后执行父类的构造方法,这个时候就//可以使用父类中的方法了。 
        this.father=Animal; 
        this.father(); 
        //记得要删除,否则在子类添加于父类相同名称的方法时,会修改到父类。 
delete this.Father; 
this.name=name; 
        this.Say=function(){alert("My name is "+this.name);} 
} 
function Girl(name,age) 
{ 
        this.father=People; 
        this.father(name); 
        delete this.father; 
        this.age=age; 
        this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);}; 
}

这样的话就实现了一个继承链,测试下:

var a=new Animal(); 
a.Run(); 
var p=new People("Windking"); 
p.Run(); 
p.Say(); 
var g=new Girl("Xuan",22); 
g.Run(); 
g.Say(); 
g.Introduce();

结果如下:

a. Javascript玩转继承(一)

b. Javascript玩转继承(一)

c.Javascript玩转继承(一)

d.Javascript玩转继承(一)

e. Javascript玩转继承(一)

f. Javascript玩转继承(一)

测试成功!

我们来总结一下这段代码的关键,指定父类,声明父类对象,然后删除临时变量,您是否觉得有些麻烦呢?至少我是这么觉得的,一旦忘记了delete,还要承担父类被修改的风险,针对这个,我们对这个用call和apply来改进!
接着看代码,还是上面的例子(为了更加容易大家理解,需求改变一下,Animal有了名字):

function Animal(name) 
{ 
        this.Run=function(){alert("I can Run");}; 
} 
function People(name) 
{ 
        //使用call方法实现继承 
this.father=Animal; 
        this.father.call(this,name); 
        this.name=name; 
        this.SayName=function(){alert("My name is "+this.name;);}; 
} 
function Girl(name,age) 
{ 
        //使用apply方法来实现继承 
        this.father=People; 
        this.father.apply(this,new Array(name)); 
        this.age=age; 
        this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);}; 
}

用一样的测试代码,发现测试一样成功。

如果是新手,可能看后面的这两段代码有些晕晕乎乎,什么是call,什么是apply呢?好,在玩转继承这个专题中,我加入一个增刊系列,如果对这个有不了解,可以看我的这个文章:《玩转方法:call和apply 》。
对象伪装,这只是一种实现继承的方式,在接下来的文章,我会继续写出其他的继承方式以及几种继承方式的优劣,欢迎继续关注。

Javascript 相关文章推荐
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
玩转方法:call和apply
May 08 #Javascript
jQuery产品间断向下滚动效果核心代码
May 08 #Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 #Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 #Javascript
setInterval计时器不准的问题解决方法
May 08 #Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 #Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 #Javascript
You might like
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python打印输出数组中全部元素
2018/03/13 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python 实现多维数组(array)排序
2020/02/28 Python
python实现取余操作的简单实例
2020/08/16 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
个人函授自我鉴定
2014/03/25 职场文书
销售2014年度工作总结
2014/12/08 职场文书
就业意向协议书
2015/01/29 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android