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中最简洁的编码html字符串的方法
Oct 11 Javascript
JavaScript中的this机制
Jan 30 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
react antd实现动态增减表单
Jun 03 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
destoon之一键登录设置
2014/06/21 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
json简单介绍
2008/06/10 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python实现的归并排序算法示例
2017/11/21 Python
python psutil库安装教程
2018/03/19 Python
python命令 -u参数用法解析
2019/10/24 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
学习党的群众路线对照检查材料
2014/09/29 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
python实现简单区块链结构
2021/04/25 Python
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Python实现socket库网络通信套接字
2021/06/04 Python
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
Python的三个重要函数详解
2022/01/18 Python