js类式继承与原型式继承详解


Posted in Javascript onApril 07, 2016

本文实例为大家分享了js类式继承与原型式继承相关代码,供大家参考,具体内容如下

1.js类式继承

/* -- 类式继承 -- */
//先声明一个超类

function Person(name) {
this.name = name;
}
//给这个超类的原型对象上添加方法 getName 
Person.prototype.getName = function() {
return this.name;
}
//实例化这个超
var a = new Person('Darren1')
console.log(a.getName());//Darren1

//再声明类

function Programmer(name, sex) {
//这个类中要调用超类Person的构造函数,并将参数name传给它
Person.call(this, name);
this.sex = sex;
}
//这个子类的原型对象等于超类的实例
Programmer.prototype = new Person();
//因为子类的原型对象等于超类的实例,所以prototype.constructor这个方法也等于超类构造函数,你可以自己测试一下,如果没这一步,console.log(Programmer.prototype.constructor这个是Person超类的引用,所以要从新赋值为自己本身

console.log(Programmer.prototype.constructor);
/*function Person(name) {
this.name = name;
} */

Programmer.prototype.constructor = Programmer;
console.log(Programmer.prototype.constructor);

/*function Programmer(name, sex) {
Person.call(this, name);
this.sex = sex;
} 
*/
//子类本身添加了getSex 方法
Programmer.prototype.getSex = function() {
return this.sex;
}
//实例化这个子类
var _m = new Programmer('Darren2', 'male');
//自身的方法
console.log(_m.getSex());//male
//继承超类的方法
console.log(_m.getName());//Darren2

2.js原型式继承

/* -- 原型式继承 -- */
//clone()函数用来创建新的类Person对象
var clone = function(obj) {
4
var _f = function() {};
//这句是原型式继承最核心的地方,函数的原型对象为对象字面量
_f.prototype = obj;
return new _f;
}
//先声明一个对象字面量
var Person = {
name: 'Darren',
getName: function() {
return this.name;
}
}
//不需要定义一个Person的子类,只要执行一次克隆即可
var Programmer = clone(Person);
//可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
alert(Programmer.getName())
Programmer.name = 'Darren2'
alert(Programmer.getName())

//声明子类,执行一次克隆即可
var Someone = clone(Programmer);

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
Vue使用localStorage存储数据的方法
May 27 Javascript
js实现简单的秒表
Jan 16 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
javascript原型继承工作原理和实例详解
Apr 07 #Javascript
浅析JS原型继承与类的继承
Apr 07 #Javascript
AngularJs 弹出模态框(model)
Apr 07 #Javascript
详解AngularJS 模态对话框
Apr 07 #Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 #Javascript
jQuery动态添加
Apr 07 #Javascript
javascript模块化简单解析
Apr 07 #Javascript
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python表示矩阵的方法分析
2017/05/26 Python
Python 查看文件的编码格式方法
2017/12/21 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Django实现celery定时任务过程解析
2020/04/21 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
保安自我鉴定范文
2013/12/08 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
大学生赌博检讨书
2014/09/22 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python