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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
JS分页的实现(同步与异步)
Sep 16 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
JS setTimeout与setInterval的区别
Apr 20 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 第一节 php简介
2012/04/28 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
php压缩文件夹最新版
2018/07/18 PHP
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
jQuery AJAX应用实例总结
2020/05/19 jQuery
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python设计模式大全
2016/06/27 Python
判断网页编码的方法python版
2016/08/12 Python
Python函数的周期性执行实现方法
2016/08/13 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
python logging模块的使用详解
2020/10/23 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书