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 相关文章推荐
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
js实现AI五子棋人机大战
May 28 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
Python使用Pygame绘制时钟
2020/11/29 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
四年级语文教学反思
2014/02/05 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2015年加油站工作总结
2015/05/13 职场文书
外出培训学习心得体会
2016/01/18 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS