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 相关文章推荐
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
js中的 || 与 && 运算符详解
May 24 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 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 数学运算验证码实现代码
2009/10/11 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php操作access数据库的方法详解
2017/02/22 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
js 函数调用模式小结
2011/12/26 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python web基础之加载静态文件实例
2018/03/20 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
python实现学生成绩测评系统
2020/06/22 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
金融专业个人求职信
2013/09/22 职场文书
酒店开业策划方案
2014/06/02 职场文书
学校运动会广播稿
2014/10/11 职场文书
2014年设计师工作总结
2014/11/25 职场文书
社区宣传标语口号
2015/12/26 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python