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 相关文章推荐
jQuery UI-Draggable 参数集合
Jan 10 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
vue学习笔记之指令v-text && v-html && v-bind详解
May 12 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
Oct 22 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设置头信息及取得返回头信息的方法
2016/01/25 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
如何快速上手Vuex
2017/02/14 Javascript
浅谈struts1 & jquery form 文件异步上传
2017/05/25 jQuery
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python-接口开发入门解析
2019/08/01 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
股权转让协议书范本
2014/04/12 职场文书
员工工作表现评语
2014/04/26 职场文书
会员卡清退活动总结
2014/08/27 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
MyBatis 动态SQL全面详解
2021/10/05 MySQL
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python