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 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
js获取页面description的方法
May 21 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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的memcached客户端memcached
2011/06/14 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
ThinkPHP控制器详解
2015/07/27 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
利用python汇总统计多张Excel
2020/09/22 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
工作决心书范文
2014/03/11 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
会计岗位职责范本
2015/04/02 职场文书
活动总结模板大全
2015/05/11 职场文书
党小组鉴定意见
2015/06/02 职场文书
800字作文之大雪
2019/12/04 职场文书