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小框架 fly javascript framework
Nov 26 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
JavaScript数组操作详解
Feb 04 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
layui table 参数设置方法
Aug 14 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
vue-cli点击实现全屏功能
Mar 07 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
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
node中socket.io的事件使用详解
2014/12/15 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
React父子组件间的传值的方法
2018/11/13 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
js实现简单的秒表
2020/01/16 Javascript
python3.6使用pickle序列化class的方法
2018/10/22 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
财务助理岗位职责
2013/11/10 职场文书
加拿大留学自荐信
2014/01/28 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
2014年国培研修感言
2014/03/09 职场文书
优秀毕业生求职信
2014/06/05 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
z-index不起作用
2021/03/31 HTML / CSS
python实现过滤敏感词
2021/05/08 Python