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 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 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的栏目导航程序
2006/10/09 PHP
简单的页面缓冲技术
2006/10/09 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python解析json文件相关知识学习
2016/03/01 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python web框架 django wsgi原理解析
2019/08/20 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
浅谈django channels 路由误导
2020/05/28 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
html5录音功能实战示例
2019/03/25 HTML / CSS
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
校本课程教学计划
2015/01/19 职场文书
中秋节寄语2015
2015/03/24 职场文书