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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 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
JAVA/JSP学习系列之四
2006/10/09 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
token 机制和实现方式
2020/12/15 Javascript
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python中GIL的使用详解
2018/10/03 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python数值基础知识浅析
2019/11/19 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
2014年庆元旦活动方案
2014/02/15 职场文书
关于保护环境的建议书
2014/08/26 职场文书
居安思危观后感
2015/06/11 职场文书