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 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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中的正规表达式(二)
2006/10/09 PHP
php数组一对一替换实现代码
2012/08/31 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
vue中的scope使用详解
2017/10/29 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
2019/10/22 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
react 生命周期实例分析
2020/05/18 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
详解Django通用视图中的函数包装
2015/07/21 Python
python与php实现分割文件代码
2017/03/06 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python基于event实现线程间通信控制
2020/01/13 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
聊城大学毕业生自荐书
2014/02/01 职场文书
药品促销活动方案
2014/02/14 职场文书
仓库管理计划书
2014/05/04 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python