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 要点归纳(一) jQuery选择器
Mar 21 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
将list转换为json失败的原因
Dec 17 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
详解TypeScript中的类型保护
Apr 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
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
浅谈js的异步执行
2016/10/18 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
学生周末回家住宿长期请假条
2014/02/15 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
餐馆开业致辞
2015/08/01 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
使用Django框架创建项目
2022/06/10 Python