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最常用与实用的创建类的代码
Aug 12 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
js获取微信版本号的方法
May 12 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 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
Codeigniter检测表单post数据的方法
2015/03/21 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
详解Python字典的操作
2019/03/04 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
护理专业学生职业生涯规划范文
2014/03/11 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
党支部公开承诺书
2014/03/28 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
个性车贴标语
2014/06/24 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
红色经典观后感
2015/06/18 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL