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验证真实姓名与身份证号是否匹配
Oct 13 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
JavaScript实现鼠标经过表格某行时此行变色
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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
Python制作钉钉加密/解密工具
2016/12/07 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python sorted排序方法如何实现
2020/03/31 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
党员承诺书内容
2014/03/26 职场文书
读书活动总结
2014/04/28 职场文书
建材投资建议书
2014/05/16 职场文书
中秋节晚会开场白
2015/05/29 职场文书
儿子满月酒致辞
2015/07/29 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Python echarts实现数据可视化实例详解
2022/03/03 Python