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 相关文章推荐
php与js的区别是什么
Aug 05 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
简单实现node.js图片上传
Dec 18 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 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/08/08 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
vuex的简单使用教程
2018/02/02 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python后端接收前端回传的文件方法
2019/01/02 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
销售员岗位职责范本
2014/02/03 职场文书
行政管理专业求职信
2014/07/06 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
部门2015年度工作总结
2015/04/29 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python