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 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
java必学必会之static关键字
Dec 03 Javascript
javascript基本语法
May 31 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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新手谈谈我的学习心得
2007/02/25 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
python图像处理之反色实现方法
2015/05/30 Python
Python的多态性实例分析
2015/07/07 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
护士自我评价范文
2014/01/25 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
家庭教育的心得体会
2014/09/01 职场文书
矛盾论读书笔记
2015/06/29 职场文书
六年级数学教学反思
2016/02/16 职场文书