js类的继承定义与用法分析


Posted in Javascript onJune 21, 2019

本文实例讲述了js类的继承定义与用法。分享给大家供大家参考,具体如下:

如何实现类的继承呢?

有如下2个构造函数:

function PeopleClass(){
  this.type = "人";
};
PeopleClass.ptototype = {
  getType:function(){
    alert("这是一个人");
  }
};
function StudentClass(name,sex){
  this.name = name;
  this.sex = sex;
};

如何让『学生』对象来继承『人』对象呢?可使用apply方法将父对象的构造函数绑定在子对象上,代码如下:

function PeopleClass(){
  this.type = "人";
};
PeopleClass.ptototype = {
  getType:function(){
    alert("这是一个人");
  }
};
function StudentClass(name,sex){
  PeopleClass.apply(this,arguments);
  this.name = name;
  this.sex = sex;
};
var stu = new StudentClass("lily","男");
alert(stu.type); //[人]

从运行的结果来看,StudentClass继承了PeopleClass的属性『人』。

而方法的继承,只要循环使用父对象的prototype进行复制,即可达到继承的目的。方法如下:

function StudentClass(name,sex){
  PeopleClass.apply(this,arguments);
  var prop;
  for(prop in PeopleClass.prototype){
    var proto = this.constructor.prototype;
    if(!proto[prop]){
      proto[prop] = PeopleClass.prototype[prop];
    }
    proto[prop]["super"] = PeopleClass.prototype;
  }
  this.name = name;
  this.sex = sex;
};
var stu = new StudentClass("lily","女");
alert(stu.type); //[人]
stu.getType(); //[这是一个人]

以上就是js中继承的实现。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
layui动态表头的实现代码
Aug 22 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
js中值引用和地址引用实例分析
Jun 21 #Javascript
微信小程序实现消息框弹出动画
Apr 18 #Javascript
前端Electron新手入门教程详解
Jun 21 #Javascript
javascript实现自由编辑图片代码详解
Jun 21 #Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 #Javascript
微信小程序实现圆形进度条动画
Nov 18 #Javascript
JavaScript迭代器的含义及用法
Jun 21 #Javascript
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python实现多线程抓取妹子图
2015/08/08 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
电子商务专业应届生求职信
2014/05/28 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
安全责任书模板
2014/07/22 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书