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 相关文章推荐
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 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的一个登录的类 [推荐]
2007/03/16 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
python实现simhash算法实例
2014/04/25 Python
详解Python多线程
2016/11/14 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python的垃圾回收机制详解
2019/08/28 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
网页美工求职信
2014/02/15 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
警告通知
2015/04/25 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP