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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
javascript数组使用调用方法汇总
Dec 08 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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/05 新手入门
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
jQuery 使用个人心得
2009/02/26 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
JS实现小星星特效
2019/12/24 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python WSGI的深入理解
2018/08/01 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Python实现代码统计工具
2019/09/19 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
Java程序员常见面试题
2015/07/16 面试题
应征英语教师求职信
2013/11/27 职场文书
党员检讨书
2014/10/13 职场文书
信访工作汇报材料
2014/10/27 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书