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控件的相对独立性
Sep 03 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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
JS动画效果代码3
2008/04/03 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
js实现弹窗效果
2020/08/09 Javascript
Django实现组合搜索的方法示例
2018/01/23 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python实现搜索算法的实例代码
2020/01/02 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
Python内置函数property()如何使用
2020/09/01 Python
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
毕业学生推荐信
2013/12/01 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
写求职信有什么意义
2014/02/17 职场文书
党员政治学习材料
2014/05/14 职场文书
法院信息化建设方案
2014/05/21 职场文书
食品安全演讲稿
2014/09/01 职场文书
公司授权委托书范本
2014/09/18 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL