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 相关文章推荐
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
几种响应式文字详解
May 19 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
js中的数组对象排序分析
Dec 11 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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
php实现mysql数据库备份类
2008/03/20 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python实现的jpg格式图片修复代码
2015/04/21 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python 画出来六维图
2019/07/26 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python3 深浅copy对比详解
2019/08/12 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
Python try except finally资源回收的实现
2021/01/25 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
免税水晶:Duty Free Crystal
2019/05/13 全球购物
社团活动策划书范文
2014/01/09 职场文书
教学督导岗位职责
2015/04/10 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
话题作文之诚信
2019/11/28 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
MySQL数据库事务的四大特性
2022/04/20 MySQL
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang