javascript 原型继承介绍


Posted in Javascript onAugust 30, 2011

暑假还搞了ext4的web desktop,更多的也是javascript的东西。对于javascript,以前就只会document.getElementById()和alert(),现在才开始慢慢深入了解。如果本文有什么不对的地方,请指出。
关于javasript,它是基于对象的,因此,它没有类的概念,所以,如果要实现继承,也就只能是利用javascript的原型机制prototype去实现了。(其实这里是错的,感谢 @记忆的森林 的提示,还可以用apply和call去实现)
因为javascript没有专门的机制去实现类,所以这里只能是借助它的函数能够嵌套的机制来模拟实现类。在javascript中,一个函数,可以包含变量,也可以包含其它的函数,那么,这样子的话,我们就可以把变量做为类的属性,内部的函数则作为成员方法了。那么,外层的函数,就可以看成是一个类了。
1、首先我们写一个动物类吧,其实他是一个函数,只不过我们可以把它看成这个类的构造函数

function Animal(){ 
console.log('Call the constuctor.'); 
}

2、然后我们可以使用new关键字来创建一个myClass类的实例
var cat = new Animal();

这样,我们就创建了一个实例obj了,运行一下,使用相关的调试工具就可以看到Call the constructor的调试信息了。也就证明,我们创建类成功了。
3、那么,接下来,我们也可以给构造函数加上参数,比如:

function Animal(name){ 
this.name = name; 
}

这样子,我们就可以创建实例,并且访问类的属性了

function myClass(name){ 
this.name = name; 
} 
var cat = new myClass("Kate"); 
alert(cat.name);

这样子,就可以访问到实例cat的属性name了。
4、大家都知道,动物会跳会吃,那么我们怎么给他加上方法呢?看下面

方法一:直接在构造函数里面声明方法

function Animal(name){ 
this.name = name; this.jump = function(){ 
alert (this.name + " is jumping..."); 
}; 
this.eat = function(){ 
alert (this.name + " is eatting..."); 
}; 
} 
var cat = new Animal("Kate"); 
alert(cat.name); 
cat.jump(); 
cat.eat();

方法二:利用prototype为类添加方法

function Animal(name){ 
this.name = name; 
} 
Animal.prototype = { 
type : 'cat', 
jump : function(){ 
alert (this.name + " is jumping..."); 
}, 
eat : function(){ 
alert (this.name + " is eatting..."); 
} 
} 
var cat = new Animal("Kate"); 
alert(cat.name); 
alert(cat.type); 
cat.jump(); 
cat.eat();

同样的,我们也可以用同样的方法为类添加新的属性,如type....
5、上面我们讲到的,是javascipt中,怎么创建一个类,以及怎么为类添加属性以及方法,接下来,我们谈一下怎么实现类的继承。

要实现继承,我们可以通过prototype实现类的继承,首先,我们要先声明一个Dog类(如果还不懂,请重新看上面相关内容),并且让它继承Animal类。

function Dog(){}; 
Dog.prototype = new Animal("Henry");

然后我们可以实例化一只新的狗dog出来,试着调用它的方法,看看成功了吗?

function Dog(){}; 
Dog.prototype = new Animal("Henry"); 
var dog = new Dog(); 
dog.jump(); 
dog.eat();

显然,如果代码没敲错的话,应该可以看到提示“Henry is jumping...”,“Henry is eatting...”。
6、既然实现了类的继承,那就必然想到另外一个问题,那就是多态的问题。
  多态是指相同的操作或函数、过程可作用于多种类型的对象上并获得不同的结果。不同的对象,收到同一消息可以产生不同的结果,这种现象称为多态。
  通过继承,子类已经继承了父类的方法了,但要实现多态,势必对子类的方法进行重写。

为了表达更明确,我们再创建一个Pig类出来,并且继承Animal类。怎么创建我就不说了。创建完的代码应该是像现在这样子。

function Dog(){}; 
Dog.prototype = new Animal("Henry"); 
function Pig(){}; 
Pig.prototype = new Animal("Coco"); 
var dog = new Dog(); 
dog.jump(); 
dog.eat(); 
var pig = new Pig(); 
pig.jump(); 
pig.eat();

运行之后,因为继承了Animal类的原因,结果肯定又是“XX is jumping...”,“XX is eatting...”了,那我们要实现的,就是进行方法的重写。我们可以有下面的方式实现方法的重写。

function Dog(){};//创建dog子类 
Dog.prototype = new Animal("Henry"); 
//重写dog的方法 
Dog.prototype.jump = function(){ 
alert("Hi, this is " + this.name + ", I'm jumping...") 
}; 
Dog.prototype.eat = function(){ 
alert("Henry is eatting a bone now."); 
}; 
function Pig(){};//创建pig子类 
Pig.prototype = new Animal("Coco"); 
//重写pig的方法 
Pig.prototype.jump = function(){ 
alert("I'm sorry. " + this.name + " can not jump."); 
}; 
Pig.prototype.eat = function(){ 
alert("Hi, I'm " + this.name + ", I'm eatting something delicious."); 
} 
var dog = new Dog(); 
dog.jump(); 
dog.eat(); 
var pig = new Pig(); 
pig.jump(); 
pig.eat();

运行一下,是不是实现了对方法的重写呢??
6、那么,假如我实例化一只dog之后,我想单独为这只dog添加属性和方法,怎么做呢?看下面

var dog = new Dog(); 
//添加属性和方法 
dog.type = "Doberman Pinscher"; 
dog.shout = function(){ 
alert("I'm a " + this.type + "."); 
} 
dog.jump(); 
dog.eat(); 
//调用新的方法 
dog.shout();

7、好了,这篇文章就写到这里了。相信初学者对于类的创建与继承应该有一定的了解了。如果有什么问题,可以留言啊。多谢指教哦。
Javascript 相关文章推荐
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
javascript实现移动端轮播图
Dec 09 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 #Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 #Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 #Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 #Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 #Javascript
Javascript 面向对象编程(一) 封装
Aug 28 #Javascript
Javascript继承机制的设计思想分享
Aug 28 #Javascript
You might like
PHP批量生成缩略图的代码
2008/07/19 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP XML数据解析代码
2010/05/26 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
浅析Python多线程下的变量问题
2015/04/28 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
python使用KNN算法识别手写数字
2019/04/25 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
小学科学教学反思
2014/01/26 职场文书
文明旅游倡议书
2015/04/28 职场文书
离职信范文
2015/06/23 职场文书
总结Python常用的魔法方法
2021/05/25 Python