JavaScript使用prototype属性实现继承操作示例


Posted in Javascript onMay 22, 2020

本文实例讲述了JavaScript使用prototype属性实现继承操作。分享给大家供大家参考,具体如下:

JS并没有显式的继承语法,在JS中所有的对象都是Object的子类实现, 因而对象之间是平等关系.

尽管如此我们可以通过特殊的方法达到继承的效果.

当然JS也不能直接定义类, 我们通过定义函数可以得到一个同名的类 , 同时这个函数就是这个类的构造器,

在定义函数时以this修饰的变量就是定义的 类的实例中的属性,当这个属性时函数时,  就可以认为这个属性变成了一个实例方法

//定义一个Person类
function Person(name , age)
{
  this.name=name;
  this.age=age;
  //定义一个info函数
  this.info=function()
  {
    document.writeln("年龄"+this.age+"姓名"+this.name);
  }
}
//创建Person类的实例对象
var p1= new Person('xiaoming',20);
//调用p1的info方法
p1.info();
var p2= new Person('wang',22);
p2.info();

这种在类内(函数内)定义函数的方式是有弊端的:

  • 性能低下, 这种方式定义函数在每次创建对象时都会创建一个新的info函数, 有多个对象就会有多个info函数,实际上我们只需要一个info函数,  这样就会造成系统内存泄漏, 引起性能的下降
  • 使info函数中的局部变量产生闭包, 闭包会扩大局部变量的作用域,使局部变量存活到函数外

为了避免这两种情况, 通常不建议在类定义时为类定义方法,而是采用prototype属性:

JS中所有类(函数)都有一个prototype属性, 为该属性增加属性方法可以视为对类的拓展,

也就是增加了prototype属性的类继承了原有的类 , 这也就是JS所提供的伪继承机制

//定义一个Person类
function Person(name , age)
{
  this.name=name;
  this.age=age;
  //定义一个info函数
  this.info=function()
  {
    document.writeln("年龄"+this.age+"姓名"+this.name);
  }
}
//创建Person类的实例对象
var p1= new Person('xiaoming',20);
//调用p1的info方法
p1.info();
 
//为Person类增加walk方法
Person.prototype.walk=function()
{
  document.writeln(this.name+'正在走<br/>');
}
var p2=new Person('xiaohong',20);
//p2可以调用Person中的方法
p2.info();
//也可以调用prototype属性增加的方法
p2.walk();
//JS允许为类动态增加方法和属性,这里p1也可以调用walk
p1.walk();

上例为prototype属性增加了方法可以认为是为Person类动态地增加了方法,

这种方式增加的方法会让所有实例共享一个walk方法, 可以注意到是Person.prototype类的属性,并非实例

walk方法不在Person函数内,因此不会产生闭包,

这种为类动态地增加属性和方法可以被当作一种伪继承,

但这种伪继承并非产生 了新的子类而是修改了原有的类

别着急,prototype属性还有另一种方式实现继承:

prototype属性代表该类原型对象, 即默认是一个Object对象, 将类prototype设为父类实例可以实现继承

function Person(name,age)
{
  this.name=name;
  this.age=age;
}
Person.prototype.say=function()
{
  console.log(this.name+'说话了');
}
var per = new Person('小明',20);
per.say();
//再定义一个student类,欲意继承Person
function Student (grade)
{
  this.grade=grade;
}
//将student的prototype设为Person对象
Student.prototype =new Person('小红',22);
//为Student添加方法
Student.prototype.intro= function()
{
  console.log(this.name+'是'+this.grade+'年级学生');
}
var stu=new Student(3);
stu.name="小刚";
console.log(stu instanceof Person&& stu instanceof Student);//true
stu.say();//小刚说话了
stu.intro();//小刚是3年级学生

上例定义了Person类,增加了say()方法

又定义了Student类, 并将Student类的prototype属性设为Person对象, 表明Student原型是Person对象,

也就是Student继承了Person, 会得到其方法和属性

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

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

Javascript 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
详解如何修改 node_modules 里的文件
May 22 #Javascript
Node.js API详解之 readline模块用法详解
May 22 #Javascript
vue+canvas实现移动端手写签名
May 21 #Javascript
基于canvas实现手写签名(vue)
May 21 #Javascript
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
js cavans实现静态滚动弹幕
May 21 #Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 #Javascript
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
wamp安装后自定义配置的方法
2014/08/23 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
python实现机器学习之元线性回归
2018/09/06 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
西部世纪面试题
2014/12/05 面试题
主持人婚宴答谢词
2014/01/28 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
小学入学感言
2015/08/01 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js