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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
vue页面跳转实现页面缓存操作
Jul 22 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
单位成立周年感言
2014/01/26 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
新党章的学习心得体会
2014/11/07 职场文书
机关工会工作总结2015
2015/05/26 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
MySQL如何解决幻读问题
2021/08/07 MySQL