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 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
JavaScript中的关键字"VAR"使用详解 分享
Jul 31 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
JavaScript函数详解
2015/02/27 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
深入理解Python对Json的解析
2017/02/14 Python
Python实现的矩阵类实例
2017/08/22 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
如何使用python操作vmware
2019/07/27 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
实习教师自我鉴定
2013/12/12 职场文书
幼儿园标语大全
2014/06/19 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
2016公司年会主持词
2015/07/01 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书