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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jquery使用经验小结
May 20 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
原生JavaScript实现随机点名表
Jan 14 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
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
动态添加删除表格行的js实现代码
2014/02/28 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
小程序自定义日历效果
2018/12/29 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python将unicode和str互相转化的实现
2020/05/11 Python
python学习笔记之多进程
2020/08/06 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
Linux的文件类型
2016/07/05 面试题
J2EE相关知识面试题
2013/08/26 面试题
教师实习自我鉴定
2013/12/13 职场文书
运动会稿件100字
2014/02/21 职场文书
经典安踏广告词
2014/03/21 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
考勤制度通知
2015/04/25 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书