javaScript面向对象继承方法经典实现


Posted in Javascript onAugust 20, 2013

JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭。很多人都说JavaScript不能算是面向对象的变成语言。但是JavaScript的类型非常松散,也没有编译器。这样一来给了程序员很大的自由,也带来了一些缺陷。

虽然JavaScript不算是一门面向对象的语言。但是我们可以模仿着其他语言实现面向对象的方式来实现JavaScript的面向编程。

下面是JavaScript教程中非常经典的继承方法。

//定义一个Pet对象。通过这一个名称和数量的腿。 
var Pet = function (name,legs) { 
this.name = name; //Save ths name and legs values. 
this.legs = legs; 
}; //创建一个方法,显示了Pet的名字和数量的腿。 
Pet.prototype.getDetails = function () { 
return this.name + " has " + this.legs + " legs "; 
} 
//定义一个Cat对象,继承从Pet。 
var Cat = function (name) { 
Pet.call(this,name,4); //调用这个父对象的构造函数 
}; 
//这条线执行继承从Pet。 
Cat.prototype = new Pet(); 
//增加一个动作方法的猫 
Cat.prototype.action = function () { 
return "Catch a bird"; 
}; 
//创建一个实例petCat的猫。 
var petCat = new Cat("felix"); 
var details = petCat.getDetails(); 
console.log(details) //"felix has 4 legs". 
var action = petCat.action(); 
console.log(action) //"Catch a bird". 
petCat.name = "sylvester"; //改变petCat的名字 
petCat.legs = 7; //改变petCat腿的数量 
details = petCat.getDetails(); 
console.log(details) //"sylvester has 7 legs".

上述方法虽然执行起来没有太大的问题,但是代码整体风格略显臃肿,并不很优雅。在外面还是可以对属性进行修改。这种方法没有对继承的属性进行保护。下面一种方法,省去的new和prototype,利用“函数继承”的特性实现。
//定义一个pet对象。通过这一个名称和数量的腿。 
var pet = function (name,legs) { 
//创建一个对象that,其中名字是可以改的,但是腿数不可以改,实现了变量私有化。 
var that = { 
name : name, 
getDetails : function () { 
return that.name + " has " + legs + " legs "; 
} 
}; return that; 
} 
//定义一个cat对象,继承从pet。 
var cat = function (name) { 
var that = pet(name,4); //从pet中继承属性 
//cat中增加一个action的方法。 
that.action = function () { 
return "Catch a bird"; 
} 
return that; 
} 
//创建一个petCat2; 
var petCat2 = cat("Felix"); 
var details = petCat2.getDetails(); 
console.log(details) //"felix has 4 legs". 
var action = petCat2.action(); 
console.log(action) //"Catch a bird". 
petCat2.name = "sylvester"; //我们可以改变名字。 
petCat2.legs = 7; //但是不可以改变腿的数量 
details = petCat2.getDetails(); 
console.log(details) //"sylvester has 4 legs".

温馨提示:使用原型继承的好处是内存效率高,不管它被继承多少次,对象的原型属性和方法只被保存一次。函数继承的时候,每个新的实例都会创建重复的属性和方法。若创建很多大的对象,内存消耗会很大。解决方法是把较大的属性或方法保存在一个对象中,并将其作为参数传给构造函数。这样所有实例就会使用一个对象资源,而不是创建自己的版本了。

上面两种方法都可以轻松实现JavaScript面向对象的继承,没有哪种方法绝对的好,也没有哪种方法绝对的不好。依个人情况喜好而定。这两种方法也不是唯一的,欢迎大家评论补充哟!~

Javascript 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
js时间查询插件使用详解
Apr 07 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
Table冻结表头示例代码
Aug 20 #Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 #Javascript
jQuery回车实现登录简单实现
Aug 20 #Javascript
jquery 延迟执行实例介绍
Aug 20 #Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 #Javascript
js获取指定日期前后的日期代码
Aug 20 #Javascript
js 自定义个性下拉选择框示例
Aug 20 #Javascript
You might like
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
python集合用法实例分析
2015/05/30 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python代码过长的换行方法
2018/07/19 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
餐厅总经理岗位职责
2013/12/31 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
高三英语教学计划
2015/01/23 职场文书
Python基础之进程详解
2021/05/21 Python
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android