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 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
js实现随机点名功能
Dec 23 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 前一天或后一天的日期
2008/06/28 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
python 排列组合之itertools
2013/03/20 Python
python 七种邮件内容发送方法实例
2014/04/22 Python
python在控制台输出进度条的方法
2015/06/20 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
南京迈特望C/C++面试题
2012/07/09 面试题
历史教育专业个人求职信
2013/12/13 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
家长给学校的建议书
2014/05/15 职场文书
机械专业求职信范文
2014/07/15 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis