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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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中array_map与array_column之间的关系分析
2014/08/19 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
常用PHP框架功能对照表
2014/10/23 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python使用sorted排序的方法小结
2017/07/28 Python
python 日志增量抓取实现方法
2018/04/28 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
详解python对象之间的交互
2020/09/29 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
关于运动会广播稿300字
2014/10/05 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
社会实践心得体会范文
2016/01/14 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
MySQL 数据表操作
2022/05/04 MySQL