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 流畅动画实现原理
Sep 08 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 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下封装较好的数字分页方法
2010/11/23 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
原生JS实现天气预报
2020/06/16 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
python求解汉诺塔游戏
2020/07/09 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
大学生简单自荐信
2013/11/10 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
婚前财产公证书
2014/04/10 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
赔偿协议书范本
2014/09/12 职场文书
房产公证委托书范本
2014/09/20 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
中秋晚会致辞
2015/07/31 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
解析python中的jsonpath 提取器
2022/01/18 Python