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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php学习之变量的使用
2011/05/29 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
Python微信公众号开发平台
2018/01/25 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
python多进程实现文件下载传输功能
2018/07/28 Python
基于Python函数和变量名解析
2019/07/19 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
公司委托书范本
2014/04/04 职场文书
食品采购员岗位职责
2014/04/14 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书