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 相关文章推荐
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 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
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
php使用正则验证中文
2016/04/06 PHP
php时间戳转换代码详解
2019/08/04 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
python绘图方法实例入门
2015/05/19 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python定时关机小脚本
2018/06/20 Python
python实现自动解数独小程序
2019/01/21 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python实现括号匹配方法详解
2020/02/10 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
软件测试面试题
2015/10/21 面试题
土木工程专业自荐信
2013/10/04 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
人力资源部岗位职责
2015/02/11 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
Python 绘制多因子柱状图
2022/05/11 Python