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_03_javascript全局观
Oct 11 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
javascript里使用php代码实例
Dec 13 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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
解析PHP实现下载文件的两种方法
2013/07/05 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
python一键升级所有pip package的方法
2017/01/16 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
节能环保口号
2014/06/12 职场文书
欢度春节标语
2014/07/01 职场文书
企业领导对照检查材料
2014/08/20 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
Django使用echarts进行可视化展示的实践
2021/06/10 Python
整理Python中常用的conda命令操作
2021/06/15 Python
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
MySQL批量更新不同表中的数据
2022/05/11 MySQL