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 easyui的tabs使用时的问题
Mar 23 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
通过实例解析javascript Date对象属性及方法
Nov 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数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
Vue入门之animate过渡动画效果
2018/04/08 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Flask配置Cors跨域的实现
2019/07/12 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
五水共治捐款倡议书
2014/05/14 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
会议承办单位欢迎词
2019/07/09 职场文书