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中null与undefined分析
Jul 25 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
angular实现商品筛选功能
Feb 01 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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 rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python通过文本和图片生成词云图
2020/05/21 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
同学聚会主持词
2014/03/18 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
个人承诺书格式
2014/06/03 职场文书
建筑结构施工求职信
2014/07/11 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python