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 相关文章推荐
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
AngularJS手动表单验证
Feb 01 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
一个简单计数器的源代码
2006/10/09 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python之Class&Object用法详解
2019/12/25 Python
python中append函数用法讲解
2020/12/11 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
我们的节日元宵活动方案
2014/08/23 职场文书
幼儿生日活动方案
2014/08/27 职场文书
学习张林森心得体会
2014/09/10 职场文书